盒子模型(Box Model):
指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
内容content:
指文本等内容的大小,width和height设置内容的大小,并非包含边框border和内边距padding的值,因此设置其它两项,容器的实际大小会改变。设置其它两项后,经常会出现盒子被撑开的问题,其中一种解决方法就是修改width和height,结合下面内边距设置属性值的个数为1个可得:容器实际大小 = 容器未设置其他两项前的大小 - 2 * (padding + border),注意:设置margin会改变父级元素的盒子大小。
内边距padding:
指内容(content)和边框(border)之间的距离。当给一个值时设置的是上、下、左、右四个方向的内边距,两个值时设置的是上下、左右方向的内边距,三个值时设置的是上、左右、下方向的内边距,四个值时设置的是上、右、下、左方向的内边距。速记:从上开始顺时针对应给值,没有值的边用对边的值补,当然可以分开写,如:
padding-left: 1px;
边框border:
指内边距(padding)和外边距(margin)之间的距离,由border-width边框宽度、border-style边框样式、border-color边框的颜色,三者缺一不可显示,其连写为:border:border-width border-style border-color
div {border: 16px solid red;}
border-width:
边框的宽度一般给像素,当然像em等也是支持的。
border-style:
边框的样式一般设置为solid实线,其值还有:none无边框、hidden隐藏边框(兼容差)、dotted点线(兼容问题)、dashed虚线、double双实线、groove凹槽边框、ridge菱形边框、inset凹边、outset凸边等
border-color:
边框的颜色取值和color的取值一样。
边框拆分:
border可以拆分为上下左右四个边框:border-top上边框、border-bottom下边框、border-left左边框、border-right右边框,拆分后其属性设置和border一样。
div {border-bottom: 1px solid yellow;}div {border-bottom-width: 16px;border-bottom-style: dotted;border-bottom-color: pink;}
border-collapse合并表格相邻边框:
解决表格table中cellspacing=“0” 外边距设置为0后相邻边框叠加加粗问题,这个属性必须设置在table中才有效。
table {border-collapse:collapse;/* 当去掉这个属性后,相邻边框叠加变粗 */}td{border: 3px solid black;}<table cellspacing="0"><tr><td>苹果</td><td>苹果</td></tr></table>
border-radius:
设置边框四角的弧度,简称圆角边框,其值和border-width设置类似,这个值可以可以使用一组参数设置,中间用反斜杠/隔开,反斜杠前面控制的是X轴,反斜杠后面控制的是Y轴,反斜杠只能出现一次(20px/40px,一般前后值相同时是省略的);可以设置为1~4个值,设置多个值时,起始是从左上角开始顺时针分别设置,没有值的角使用其对角的值;也可以给每条分别设置,需要注意的是需要先写上下后写左右属性:
div {border-radius: 50% 20% 10%;/* 一个圆角值为50%的圆角是一个圆 */}div {border-top-right-radius: 20px/40px;}
外边距margin:
设置盒子以外的距离,这个距离不能放其他内容,margin可拆分为margin-top上边距、margin-bottom下边距、margin-left左边距、margin-right右边距,当为margin时也可以设置多个属性值,每个属性值对应的方向和border一样,都是从上面开始,顺时针旋转分别给值,没有的用对边值补。
实现盒子水平居中的方法:必须是块级元素,必须设置宽度
div {/* 第一种分开写: */margin-left: auto;margin-right: auto;}div {/* 第二种不分开: */margin: auto;/* 或者使用margin:0 auto; */}
清除默认边距:
浏览器默认有自己的padding,元素有自己的默认margin,此时为了更好的控制布局,可以清除这些默认的值:
* {margin: 0;padding: 0;}
注意:行内元素没有上下外边距,只有左右外边距,因此设置垂直方向的margin是不起作用的。
垂直方向外边距合并问题:
如果给两个盒子的相邻边分别设置margin,此时这两个盒子之间的距离是其中设置的margin较大的盒子的margin值,如box1的margin-bottom设置为20px,box2的margin-top设置为50px,则它们之间的外边距是50px,实际开发中只设置其中一个外边距即可。
<style>.father {width: 400px;height: 400px;background-color:aqua;margin-bottom: 100px;}.brother {width: 400px;height: 400px;background-color:rgb(241, 143, 13);margin-top:50px;}</style><div class="father"></div><div class="brother"></div>
嵌套盒子中垂直外边距塌陷问题:
当两个盒子嵌套在一起时,如果给里面的盒子一个margin-top,此时里面的盒子不会相对于外面的盒子向下移动,而是内外盒子保持相对静止向下移动,避免这个问题的方法是给父级元素加border或者padding,但是父级盒子会被撑开,此时使用overflow:hidden可以不被撑开父级盒子而解决盒子塌陷问题,overflow后面会详细介绍,水平方向不会出现这种情况。
<style>.father {width: 400px;height: 400px;background-color:aqua;border: 1px solid transparent;/* padding: 1px; 给padding也可以解决这个问题 *//* overflow: hidden; 推荐使用这个解决盒子塌陷问题 */}.son {width: 200px;height: 200px;background-color:rgb(241, 143, 13);margin-top:50px;margin-left:30px;}</style><div class="father"><div class="son"></div></div>
标准盒模型:
盒子设置宽高后,再去设置padding、border时, 此时盒子的实际大小会变大。
怪异盒模型:
盒子设置宽高后,再去设置padding、border时,此时盒子不会被撑开,它会挤压内容区(content),开启怪异盒模型的方法:box-sizing:border-box
div {box-sizing: border-box;/开启怪异盒模型,解决给定宽高后再去设置padding和border时盒子被撑开问题/}
盒子阴影box-shadow:
给一个盒子加上阴影效果,其属性值分别为:box-shadow: h-shadow水平阴影,必选 v-shadow垂直阴影,必选 blur模糊距离 spread阴影尺寸 color阴影颜色 inset内/外阴影,默认是外阴影不用写,当需要为内阴影时在最后加上inset即可。
div {box-shadow: 2px 2px 3px 4px pink inset;}
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海