1. 盒子模型介绍
盒子
- 页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局
- 浏览器在染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为
盒子
盒子模型
CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域(padding) 、边框区域(border) 、外边距区域(margin)构成,这就是盒子模型
盒子高度=边框+内边距+内容
2. 内容区宽高
【注意!】width和height默认设置的是内容区的大小,不是整个盒子的大小
属性名 | 作用 | 属性值 |
---|---|---|
width | 内容区域-宽 | 数字+px 或 百分比 |
height | 内容区域-高 | 数字+px或 百分比 |
3. border边框
属性名 | 作用 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字+px |
边框样式 | border-style | 实线solid、虚线dashed、点线dotted |
边框颜色 | border-color | 颜色取值 |
也可以通过border一次给以上三个都设置的
- 如果想给单方向设置边框
- border-方位词
4. 盒模型自动内减
- CSS3盒模型:
- 属性名:box-sizing
- 属性值:border-box
例:如下案例,宽高都设置成300,还设置了边框和内边距。配置box-sizing:border-box以后,会自动减小内容区的大小,从而使整个盒模型的宽高保持300
div {
width: 300px;
height: 300px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 自动内减 */
box-sizing: border-box;
}
5. 外边距折叠现象
5.1. 合并现象
场景:垂直布局的块级元素
,上下的margin
会合并
结果:最终两者的距离边恒margin的最大值
解决办法:避免就好
只给其中一个盒子设置margin
5.2. 坍塌现象
场景:互相嵌套
的块级元素
,子元素的margin-top
会作用在父元素上
结果:导致父元素一起往下移动
思路:
方案一:子元素的margin-top和父元素的margin-top贴在一起,发生了类似合并现象的情况。为了解决这个问题,我们只需要想办法将这两个margin-top用东西分隔开即可。
方案二:上面的方法会导致添加不必要的因素,导致页面不精准。所以可以使用下述的方法234
解决方法:
-
给父元素设置border-top或者padding-top
-
给父元素设置overflow:hidden
-
转换成行内块元素
-
设置浮动
-
6. 行内元素的margin和padding无效情况
场景:给行内元素设置margin和padding
结果:
- 水平方向的margin和padding布局中有效
- 垂直方向的margin和padding不居中无效
7. 不会撑大盒子的特殊情况
对于块级元素来说
- 如果子盒子没有设置宽度,此时子盒子的宽度,默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border,此时不会撑大盒子
Comments NOTHING