web前端学习-css盒子模型

目录

css特性-优先级：

css特性-优先级-叠加计算： 

CSS-盒子模型：

css-盒子模型-自动内减：

 css-盒子模型-清除默认外边距：

css-盒子模型-外边距折叠现象-①合并：

css-盒子模型-外边距折叠现象-②塌陷：

css-内标签的内外边距问题：

拓展-排错-Chrome调试工具：

---

css特性-优先级：

        特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器

        优先级公式：

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

        注意点：

        1. !important写在属性值后面，分号前面！

        2. !important不能提升继承优先级，只要是继承优先级最低

        3. 实际开发中不建议使用!important

 

css特性-优先级-叠加计算： 

权重叠加计算：

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个优先级最高会生效

权重叠加计算公式：每一级不存在进位

 

 

CSS-盒子模型：

1.盒子的概念

                1.页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角方便进行布局

                2.浏览器在渲染网页时，会将网页中的元素看作是一个个矩形区域，我们也形象的称之                      为盒子

2.盒子模型

                css中规定每一个盒子分分别由：内容区域（centent）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这是盒子模型

注意点：

            1.border和padding会撑大盒子

        

内边距（padding）注意点：

 

css-盒子模型-自动内减：

方法一：手动内减

        操作：自己计算多余大小，手动在内容中减去

        缺点：项目中计算量太大，比较麻烦

方法二：自动内减少

        操作：给盒子设置属性box-sizing:border-box;即可

        优点：浏览器会自动计算多余大小，自动在内容中减去

                

 css-盒子模型-清除默认外边距：

css-盒子模型-外边距折叠现象-①合并：

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

结果：最终两者距离为margin的最大值

解决办法：避免最好

                只给其中一个盒子设置margin即可

 

css-盒子模型-外边距折叠现象-②塌陷：

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

结果：导致父元素一起往下移动

解决办法：

                1.给付清元素设置border-top或者padding-top（分割父子元素的margin-top）

                2.给父亲元素设置overflow：hidden

                3.转换成行内块元素

                4.设置浮动

css-内标签的内外边距问题：

 

拓展-排错-Chrome调试工具：

 这里是本人学习CSS3基础的一些笔记，可以供大家一起学习和交流！！！