HTML学习-day5 盒子模型

目录

1.盒子模型定义

2.盒子的复合属性

3.外边距合并

（1）上下元素垂直外边距的合并

（2）嵌套元素垂直外边距的合并（塌陷）

4.实用tips

（1）字数不一样多的导航栏设计

（2）块级盒子水平居中对齐

（3）CSS第一句话：清除所有元素内外边距

（4）圆角边框

（5）盒子阴影

1.盒子模型定义

将网页布局看成一个矩形盒子，由元素内容、边框（border）、内边距（padding）、外边距（margin）组成。盒子实际的大小=内容的宽度和高度+内边距+边框。

注意：如果盒子没有宽度（继承父亲），则padding值不会撑开盒子。

考虑到布局稳定性，推荐使用顺序为width>padding>margin

2.盒子的复合属性

边框——border: border-width || border-style || border-color

内边距——padding:一个值（上下左右）

                                两个值（上下，左右）

                                三个值（上，左右，下）

                                四个值（上，右，下，左），顺时针

3.外边距合并

（1）上下元素垂直外边距的合并

解决办法：尽量只给一个盒子添加margin值

（2）嵌套元素垂直外边距的合并（塌陷）

塌陷原因：父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中较大者

 解决方法：为父元素定义上边框；为父元素定义上内边距；为父元素添加overflow:hidden；此外，浮动、固定、绝对定位的盒子不会塌陷。

4.实用tips

（1）字数不一样多的导航栏设计

链接转换为行内块元素，用padding值撑开

.nav a {
    display: inline-block;
    height: 41px;
    line-height: 41px;
    padding: 0 20px;
    text-decoration: none;
}

（2）块级盒子水平居中对齐

（1）盒子必须指定宽度；（2）左右外边距设置为auto；

margin: 0 auto;

（3）CSS第一句话：清除所有元素内外边距

* { 
    margin: 0;  
    padding: 0;
}

（4）圆角边框

width: 200px;
height: 200px;
border-radius: 100px;  /*圆*/
border-radius: 50%;  /*圆*/

width: 200px;
height: 20px;
border-radius: 10px;  /*圆角边框，给高度的一半*/

（5）盒子阴影

box-shadow: 水平阴影  垂直阴影  模糊距离（虚实）  阴影尺寸  阴影颜色  内/外阴影

注意：阴影尺寸为0时和盒子大小一致，外阴影默认不写

box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3) inset;