CSS进阶-盒子模型

权重叠加计算

• 先比较第一级 如果第一级比较出来了就不用看后面的

盒子模型介绍

概念

CSS中规定每个盒子为：内容区域、内边距区域、边框区域、外边距区域构成

div{
        width: 300px;
        height: 200px;
        background-color: pink;
        /* 边框线==纸箱子 */
        border:1px solid #000;
        /* 内边距=填充泡沫 */
        padding: 20px;
        /* 外边距 ：出现在两个盒子之间*/
        margin:50px;
    }

边框

属性名：border

快捷键：bd + tab

属性值：单个取值的连写
solid （实线、dashed（虚线、dotted（点线

• 单方向设置

属性名：border - 方位名词

场景：只给盒子的某个方向单独设置边框

自动内减

• 加padding和border时盒子被撑大

操作：给盒子设置属性：box-sizing：border-box；
优点：浏览器会自动计算多余大小

清除默认内外边距

*{
	margin：0；
	padding：0；
} //给所有代码的默认样式清零

去掉序号列表

• list-style：none；

外边距折叠现象

1.合并现象
垂直布局的块级元素 上下的margin会合并
最终两者距离为margin的最大值

解决方法：只给一个盒子设置margin

2.塌陷现象
互相嵌套的块级元素 子元素的margin-top
导致父元素一起往下移动

解决方法：给父级设置overflow-hidden

行内元素的内外边距问题

• 行内标签的margin-top和bottom不生效
  行内标签的padding-top和bottom不生效

解决办法：line-height