优先级

提示

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承

权重计算

标签选择器

权重叠加每位不存在进制

权重相同此时比较层叠性

全是继承的特殊情况

盒子模型

盒子模型效果展示

div {
      width: 300px;
      height: 300px;
      background-color: pink;
      /* 边框线 == 纸箱子 */
      border: 1px solid #000;
      /* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
      padding: 20px;

      /* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/
      margin: 50px;
}

<div>内容电脑</div>
<div>内容电脑</div>

边框

尺寸

内边距

内减模式

外边距

清除默认内外边距

通配符选择器消耗资源大，能不用就不用

* {
    margin: 0;
    padding: 0;
}

版心居中

常见问题

合并问题

<div class="one">11</div>
<div class="two">22</div>

div {
    width: 100px;
    height: 100px;
    background-color: pink;
}

.one {
    /* margin-bottom: 50px; */
    margin-bottom: 60px;
}

.two {
    margin-top: 50px;
}

塌陷问题

<div class="father">
    <div class="son">son</div>
</div>

.father {
    width: 300px;
    height: 300px;
    background-color: pink;
    /* padding-top: 50px; */
    /* 如果设计稿没有border, 不能使用这个解决办法 */
    /* border: 1px solid #000; */

    /* overflow: hidden; */
}

.son {
    width: 100px;
    height: 100px;
    background-color: skyblue;

    margin-top: 50px;

    display: inline-block;
}