CSS中的盒子模型及内外边框处理学习总结
盒子模型就是把html页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
盒子模型包括:边框、外边距、内边距、实际内容。
border属性可以设置元素的边框,包括边框宽度(粗细)、边框样式、边框颜色。
语法:
border : border-width border-style border-color; —— (没有顺序)
border-top : border-width border-style border-color; —— (只设定上边框,其余同理)
1 | div { |
border-collapse属性可以用来设置表格单元格细线。
1 | border-collapse: collapse;/*表示相邻边框合并在一起*/ |
border-radius属性可以设置圆角边框样式,语法:border-radius : length;
属性值可以为数值或百分比。
如果是正方形,把数值设置为边长一半即可变为圆形边框,或直接写 50%。
如果是矩形,设置为高度的一半即可变为圆角边框。
该属性是一个简写方式,可以跟4个值,分别代表左上角、右上角、右下角、左下角。
也可以分别设置各个角的圆角边框效果:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
1 | div { |
注意:边框会改变盒子的实际大小。
padding属性用于设置内边距,即边框和内容的距离。
padding属性可以有1到4个值:
1 | padding : 5px; ——上下左右都是5px内边距。 |
注意:如果盒子本身没有指定宽高属性,此时padding不会撑开盒子大小。
margin属性用于设置外边距,即盒子和盒子的距离。
margin属性可以有1到4个值(写法和意义同padding一致)。
也可以分别设置上下左右的外边距:
1 | margin-top |
外边距可以让块级盒子水平居中,满足以下条件即可:
盒子必须指定了宽度。
盒子左右的外边距都设置为auto。
1 | margin: 0 auto; |
相邻块元素垂直外边距的合并:
定义:当上下相邻的两个块元素(兄弟关系)相遇,如果上面的元素有下外边距,下面的元素有上外边距,则它们之间的垂直距离不是下外边距和上外边距之和,而是取其较大值。
解决方案:尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷:
定义:对于两个嵌套关系(父子)的块元素,父元素有上外边距,子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
可以为父元素定义上边框。
可以为父元素定义内边距。
可以为父元素添加overflow:hidden;
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一样。因此我们在布局前,先要清除下网页元素的内外边距。
1 | * { |
CSS3中新增了box-shadow属性,可以为盒子添加阴影。
语法:box-shadow : h-shadow v-shadow blur spread color inset;
h-shadow —— 必须,水平阴影的位置,允许负值。
v-shadow —— 必须,垂直阴影的位置,允许负值。
blur —— 可选,模糊距离。
spread —— 可选,阴影的尺寸。
color —— 可选,阴影的颜色。
inset —— 可选,将外部阴影改为内部阴影。
注意:
默认的是外部阴影(outset),但不可以写这个单词,否则导致阴影无效。
盒子阴影不占用空间,不会影响其他盒子的排列。
1 | div { |
CSS3中新增了text-shadow属性,可以为文字添加阴影。
语法:text-shadow : h-shadow v-shadow 阴影模糊半径默认为0 blur color;
1 | h1{ |
CSS3中可以通过box-sizing属性来指定盒子模型,这样我们计算盒子大小的方式就发生了变化。
box-sizing:content-box; —— 盒子大小为 width + padding + border (以前默认的)。
box-sizing:border-box; —— 盒子大小为 width。
如果盒子模型改为了box-sizing:border-box;那padding 和 border就不会撑大盒子了(前提是padding 和 border不会超过width)。
没有设置box-sizing:border-box属性,宽高会加上padding和border的值,需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽高。
加了box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里,盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整。