css盒⼦模型（BoxModel）
css盒⼦模型（Box Model）
盒⼦的组成
⼀个盒⼦由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒⼦的这三个部分。⽽content则是HTML元素的内容。
盒⼦的⼤⼩
盒⼦的⼤⼩指的是盒⼦的宽度和⾼度。⼤多数初学者容易将宽度和⾼度误解为width和height属性，然⽽默认情况下width和height属性只是设置content（内容）部分的宽和⾼。盒⼦真正的宽和⾼按下⾯公式计算：
盒⼦的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒⼦的⾼度 = 内容⾼度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
为了显得专业⼀点，我们还可以⽤带属性的公式表⽰：
盒⼦的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒⼦的⾼度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
上⾯说到的是默认情况下的计算⽅法，另外⼀种情况下，width和height属性设置的就是盒⼦的宽度和⾼度。盒⼦的宽度和⾼度的计算⽅式由box-sizing属性控制。
box-sizing属性值
content-box：默认值，width和height属性分别应⽤到元素的内容框。在宽度和⾼度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度。
inherit：规定应从⽗元素继承box-sizing属性的值。
当box-sizing：content-box时，这种盒⼦模型成为标准盒⼦模型，当box-sizing: border-box时，这种盒⼦模型称为IE盒⼦模型。
盒⼦成分分析
margin
margin，盒⼦的外边框，他是完全透明的，开发者只可以设置它的边距。
margin包含了上下左右四条边，开发者可以单独设置每⼀条边的边距。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
开发者也可以直接使⽤简写属性margin同时设置四条边的宽度。
margin⽰例1
/*margin属性后只跟⼀个值，同时设置四条边的边距相等*/
margin: 10px;
/*下⾯样式与上⾯的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin⽰例2
/*margin属性后跟两个值，第⼀个值设置上下边距，第⼆个是设置左右边距*/
margin: 10px 20px;
/*下⾯样式与上⾯的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin⽰例3
/*margin属性后跟三个值，第⼀个值设置上边距，第⼆个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*下⾯样式与上⾯的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
margin⽰例4
/*margin属性后跟四个值，第⼀个值设置上边距，第⼆个是设置右边距，第三个值设置下边距，第四个值设置左边距*/
margin: 10px 20px 30px 40px;
/*下⾯样式与上⾯的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
padding
padding表⽰盒⼦的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜⾊和图⽚。
与margin类似，padding包含了上下左右四条边，开发者可以单独设置每⼀条边的边距。
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
开发者也可以直接使⽤简写属性padding同时设置四条边的宽度。这⼀部分的⽤法与上⾯的margin类似，可以参考margin的四个实例。
margin和padding的区别
margin是盒⼦的外边距，即盒⼦与盒⼦之间的距离，⽽padding是内边距，是盒⼦的边与盒⼦内部元素的距离。
（margin是⽤来隔开元素与元素的间距；padding是⽤来隔开元素与内容的间隔。margin⽤于布局，可以分开元素，使元素与元素互不相⼲；padding⽤于设置元素与内容之间的间隔，让内容（⽂字）与（包裹）元素之间有⼀段“呼吸距离”。）
语法结构
（1）padding-left:10px; /margin-left:10px;        　左内/外边距
（2）padding-right:10px; /margin-right:10px;        　右内/外边距
（3）padding-top:10px; /margin-top:10px;        　上内/外边距
（4）padding-bottom:10px; /margin-bottom:10px;  　下内/外边距
（5）padding：10px;/ margin:10px;    　四边统⼀内/外边距
（6）padding:10px 20px; /margin:10px 20px;        　上下、左右内/外边距
（7）padding:10px 20px 30px;/margin:10px 20px 30px;  　上、左右、下内/外边距
（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距
margin的⽤法说明:
（1）需要在border外侧添加空⽩时，
（2）空⽩处不需要有背景（⾊）时，
（3）上下相连的两个盒⼦之间的空⽩需要相互抵消时，⽐如15px+20px的margin，将得到20px的空⽩。
padding的⽤法说明:
（1）需要在border内侧添加空⽩时（往往是⽂字与边框距离的设置），
（2）空⽩处需要背景（⾊）时，
（3）上下相连的两个盒⼦之间的空⽩希望等于两者之和时，⽐如15px+20px的padding，将得到35px的空⽩。
关于padding：
注意：将Padding设置为负值⽆效：
在块元素中：
因此，padding在块级元素下，上下左右可以随意设定，会对元素内部发⽣改变。
在内联元素中：
⾏内⾮替换元素上设置的内边距不会影响⾏⾼计算；因此，如果⼀个元素既有内边距⼜有背景，从视觉上看可能会延伸到其他⾏，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值，⾏内元素的padding元素，只有padding-left和padding-right有效果，上下不识别；
关于margin：
margin：0 auto；只对块级元素起作⽤
在块元素中：
因此，margin在块级元素下，上下左右可以随意设定。且块级元素的margin的参照基准是前⼀个元素即相对于⾃⾝之前的
元素有margin距离。如果元素是第⼀个元素，则就是相对于⽗元素的margin距离。
在内联元素中：
margin-top和margin-bottom对内联元素（对⾏）的⾼度没有影响，如果你要改变内联元素的⾏⾼即类似⽂本的⾏间距，那
么你只能使⽤这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素⾼度的是line-height⽽不是height。
border
border表⽰盒⼦的边界，它可以设置成可见的，样式多样的。
最基本的，border像margin和padding⼀样可以分别对每⼀条边进⾏设置，也可以使⽤简写属性border进⾏设置。
border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界
当border属性的⾊值不明确指定时，如border: 1px solid，边框颜⾊与当前元素的字体颜⾊color相同。
border实例1
/*使⽤简写属性，同时设置四条边界，四条边界的宽度、样式和颜⾊都是⼀样的*/
border: 2px solid green;
/*下⾯的样式与上⾯的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
borderboxborder-right: 2px solid green;
除了可以单独对每⼀条边进⾏样式设置之外，还可以分别对边界的宽度、样式和颜⾊进⾏设置（下⾯的属性会对四条边进⾏设置），同样可以使⽤简写属性border进⾏设置。
border-width：边界宽度
border-style：边界样式
border-color：边界颜⾊
border-sytle属性可取值：
none：定义⽆边框。
hidden：与 “none” 相同。不过应⽤于表时除外，对于表，hidden ⽤于解决边框冲突。
dotted：定义点状边框。在⼤多数浏览器中呈现为实线。
dashed：定义虚线。在⼤多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：定义 3D inset 边框。其效果取决于 border-color 的值。
outset：定义 3D outset 边框。其效果取决于 border-color 的值。
inherit：规定应该从⽗元素继承边框样式。
border实例2
/*使⽤简写属性设置宽度、样式和颜⾊，同时作⽤于四条边*/
border: 2px dotted green;
/*下⾯的样式与上⾯的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;
这还不算完，开发者还可以对单独⼀条边界单独设置宽度、样式或颜⾊。以上两组属性都可以作为下⾯属性的简写属性。
border-top-width：上边界宽度
border-top-style：上边界样式
border-top-color：上边界颜⾊
border-bottom-width：下边界宽度
border-bottom-style：下边界样式
border-bottom-color：下边界颜⾊
border-left-width：左边界宽度
border-left-style：左边界样式
border-left-color：左边界颜⾊
border-right-width：右边界宽度
border-right-style：右边界样式
border-right-color：右边界颜⾊
border实例3
/*使⽤简写属性设置宽度、样式和颜⾊，同时作⽤于四条边*/
border: 2px dotted green;
/*下⾯的样式与上⾯简写样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;
/
*下⾯的样式与上⾯简写样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
/*下⾯样式⼜与上⾯三个样式的任意⼀个样式等价*/
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: green;
上⾯的属性是对各边的宽度、样式和颜⾊进⾏设置，下⾯⼀些有趣的属性可以让盒⼦变得更加地有创意、更加好看。
⾸先，了解⼀下边界半径，也就是圆⾓。边界半径由属性border-radius进⾏控制，这是⼀个简写属性，像上⾯提到过的margin、padding等⼀样，可以有⼀个、两个、三个或四个值进⾏设置。同样也可以对盒⼦的每⼀个⾓的半径进⾏单独设置。
border-top-left-radius：左上⾓
border-top-right-radius：右上⾓
border-bottom-left-radius：左下⾓
border-bottom-left-radius：右下⾓
边界半径可以使⽤ px、em 等长度单位，也可以使⽤百分数。
border-radius值的个数以及每个值对应控制的位置：
⼀个值：设置四个⾓有相同的边界半径；
两个值：第⼀个值设置左上⾓和右下⾓，第⼆个值设置右上⾓和左下⾓；
三个值：第⼀个值设置左上⾓，第⼆个值设置右上⾓和左下⾓，第三个值设置右下⾓；
四个值：第⼀个值设置左上⾓，第⼆个值设置右上⾓，第三个值设置右下⾓，第四个之设置左下⾓。
border实例4
/
*以简写属性的三个值为例*/
border-radius: 10px 20px 30px;
/*下⾯样式与上⾯简写属性样式等价*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;
开发者还可以设置x半径和y半径的不同，创建椭圆形⾓。x半径表⽰⽔平半径，y半径表⽰垂直半径。在border-radius属性中，x半径和y半径⽤“/”分隔，在border-top-left等四个属性中，传⼊两个值，第⼀个值表⽰x半径，第⼆个值表⽰y半径。
border实例5
/*简写属性的x半径设置两个值，y半径设置三个值*/
border-radius: 30px 20px / 20px 10px 30px;
/*在简写属性中设置⾓度时，值与盒⼦⾓的映射是x和y分开的，按照上⾯提到的规则进⾏映射*/
/*x半径两个值，第⼀个值控制左上⾓和右下⾓，第⼆个值控制右上⾓和左下⾓*/
/*y半径三个值，第⼀个值控制左上⾓，第⼆个值控制右上⾓和左下⾓，第三个值控制右下⾓*/
border-top-left-radius: 30px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 20px 10px;
盒⼦阴影
在盒⼦的组成成分之外，CSS3给盒⼦添加了阴影。盒⼦的阴影由box-shadow属性控制，阴影的轮廓与盒⼦边界border的轮廓⼀样。该属性的正规语法如下：
none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
1
inset：默认阴影在边框外。使⽤ inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
offset-x, offset-y：这是头两个长度值，⽤来设置阴影偏移量，相对于border外边线开始计算。offset-x 设置⽔平偏移量，如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量，如果是负值则阴影位于元素上⾯。如果两者都是0，那么阴影位于元素后⾯。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。
blur-radius：这是第三个长度值。值越⼤，模糊⾯积越⼤，阴影就越⼤越淡。不能为负值。默认为0，此时阴影边缘锐利。
spread-radius：这是第四个长度值。取正值时，阴影扩⼤；取负值时，阴影收缩。默认为0，此时阴影与元素同样⼤。
color：如果没有指定，则由浏览器决定——通常是color的值，不过⽬前Safari取透明。
设置多个阴影时，使⽤逗号将每个阴影的值隔开。前⾯的阴影会在后⾯阴影之上，如果上层有透明度较低的部分，会与下层的颜⾊重叠，合成新颜⾊。
border-shadow实例
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* 多个阴影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;
/*全局关键字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。