CSS盒子模型-黑马程序员-前端零基础

目录

1.优先级

2.盒子模型

2.1边框（border）

2.2尺寸大小

2.3.padding（内边距）margin（外边距）

 2.4margin折叠现象

2.5.清除默认样式

2.6.版心居中

---

1.优先级

继承<通配符选择器< 标签选择器< 类选择器< id选择器< 行内选择器 <！important

  color: bisque!important;

2.盒子模型

2.1边框（border）

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid，虚线dashed，点线dotted
边框颜色	border-color	颜色取值

2.2尺寸大小

border会撑大盒子

左边距和右边距都会占空间，别忘了*2

2.3.padding（内边距）margin（外边距）

多值

四值	上 右 下 左
三值	上 左右 下
两值	上下 左右

顺时针，看对面

自动内减

 box-sizing: border-box;
     /* 自动内减 */

 2.4margin折叠现象

• 合并现象

        垂直布局的块级元素，上下的margin会合并

        最终两者距离为margin的最大值（所以，只给其中一个盒子设置margin）

• 塌陷问题（子级把父级拖下水）

       互相嵌套的块级元素，子元素的margin-top会作用在父元素上

        导致父元素一起往下移动

        解决方法：

1. 给父元素设置overflow：hidden
2. 转换成行内块元素
3. 设置浮动

在行内元素中margin和padding的top/bottom不生效，left和right生效，此时加上line-height就可以啦

2.5.清除默认样式

        *
        {
            margin: 0;
            padding: 0;
        }

2.6.版心居中

版心：网页的有效内容

margin: 0 auto;

上下是0，左右是自动

又一个快捷键 Alt+Shift+向下的箭头，可以复制粘贴当前行