精品网站建设公,微信网站模版下载,wordpress rest 授权,做家政网上推广网站1. 盒子模型的五个属性 盒模型主要涉及的属性有#xff1a;width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。
2. 盒子模型的两种模式 模式一#xff1a;width盒子自身的width #xff08;正常情况#xff09; 模式二#xff1a;width盒子自…1. 盒子模型的五个属性 盒模型主要涉及的属性有width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。
2. 盒子模型的两种模式 模式一width盒子自身的width 正常情况 模式二width盒子自身的width左padding右padding左border右border 仅在IE5和IE6怪异模式中出现 当然也可以通过box-sizing属性来控制标准模式(box-sizing:content-box)还是怪异模式(box-sizing:border-box)。 实例1 实例2 3. padding属性 指内边距padding的区域有背景颜色css2.1前提下并且背景颜色一定和内容区域的相同。也就是说background-color将填充所有border以内的区域。 padding属性分两种写法综合属性和小属性。 (1). 综合属性 padding10px 20px 30px 40px顺序为上右下左 padding10px 20px 30px 上下分别为10px和30px右左均为20px padding10px 20px 上下为10px右左为20px padding10px 上右下左均为10px (2). 小属性 padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px; 特别用法可以用小属性来层叠综合属性但不要反过来用。 padding: 20px; padding-left: 30px;
4. border属性 指边框border有三个要素粗细、样式、颜色。如果颜色不写默认为黑色其它两个属性不能不写。 首先介绍一下border的所有线性 border可以分两种写法综合属性和小熟悉 (1). 综合属性 border10px solid red上右下左四个边框均为10px的实线颜色为红色 (2). 小属性 A: 按照三要素来分 border-width: 10px 20px符合上右下左的规律可以写1、2、3、4个属性 border-style: solid 符合上右下左的规律可以写1、2、3、4个属性 border-color: red blue green pink 符合上右下左的规律可以写1、2、3、4个属性 B: 按照方向来分 border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red; C: 按照方向-三要素来分 border-top-width:10px; border-top-style:solid; border-top-color:red; border-right-width:10px; border-right-style:solid; border-right-color:red; border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red; border-left-width:10px; border-left-style:solid; border-left-color:red; 特别用法可以用小属性来层叠综合属性但不要反过来用。
5. margin属性 指外边距border以为的区域通常两个盒子之间的距离。 (1). 塌陷现象 在标准文档流中margin竖直方向存在塌陷现象竖直方向取margin的最大值。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 !DOCTYPE html html head meta charsetUTF-8 title/title style typetext/css .p1 { width: 200px; height: 300px; background-color: pink; margin-bottom: 30px; } .p2 { width: 200px; height: 300px; background-color: yellow; margin-top: 50px; } /style /head body !--在标准文档流中margin塌陷 竖直方向默认为最大的-- p classp1/p p classp2/p /body /html 在非标准文档流中margin竖直方向不塌陷。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 !DOCTYPE html html head meta charsetUTF-8 title/title style typetext/css *{ margin: 0; padding: 0; } .p1 { width: 200px; height: 300px; background-color: pink; margin-bottom: 30px; float: left; } .p2 { width: 200px; height: 300px; background-color: yellow; margin-top: 50px; float: left; } div{ width: 200px; border: 2px dashed black; overflow: hidden; } /style /head body div p classp1/p p classp2/p /div /body /html (2). 利用 “margin0 auto” 属性使盒子水平居中 使用条件 A盒子要有明确的width。 B只有在标准文档流中的盒子中才会生效浮动了或定位了均无效。 C该特性作用的是盒子使盒子水平方向居中。 D若要使盒子中的内容水平居中text-aligncenter竖直居中line-heightheight。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 !DOCTYPE html html head meta charsetUTF-8 title/title style typetext/css .box1{ width: 300px; height: 300px; background-color: palevioletred; /*盒子水平居中*/ margin: 0 auto; /*文字水平居中*/ text-align: center; /*盒子竖直居中*/ line-height: 300px; } /style /head body div classbox1 我要居中了 /div /body /html
