学习前端的第五天2020-10-16_当上面的模型的下边距为20px,下面模型的上边距为30px,两个模型之间的边距是()-CSDN博客

本文链接：https://blog.csdn.net/m0_51452172/article/details/109137899

今天是周六，也是难得的一天休息的时间，这几天很累，作为一个小白去接受一个全新的东西，开头的时候总是会很难的，昨天晚上回到宿舍就放飞了自我，博客也不想写，作业也不想做，只想一头扎进被窝睡个昏天地暗！！
但是该做的还是要做的，昨晚没有写的博客今天还是要补上的，没有做的作业今天还是要做完的，昨天没来得及看的预习视频也是不能不看的，总结成一句话就是脑阔痛o(╥﹏╥)o
不写废话了，开始复习一下昨天学的东西~
周五pink老师给我们讲了css的三大特性和盒子模型
CSS的三大特性为层叠性，继承性和优先级。
层叠性指的是在对一个元素多次设置同一个样式的属性值时，会使用最后一次设置的属性值。原则：①样式冲突时，采用就近原则，哪个样式书写的位置离在这个元素最近就用哪个。②样式不冲突时不会层叠。
继承性指的是子标签会继承父标签的某些样式，比如文本的颜色字体类型等。优点是只需要给父标签写属性，子标签中不用再次书写，以达到简化代码的目的。跟文字相关的属性都可以继承。
行高line-height的属性值不写单位px时，表示行高为当前元素文字大小的几倍，例如line-height: 1.5;表示行高是font-size的1.5倍。
优先级指的是当同一个元素被指定了多个选择器时，我们需要知道CSS的优先级才能准确的分析出到底会使用哪个选择器的样式。
选择器相同时，执行层叠性；选择器不同时，执行优先级。
权重如下：

开发中类选择器使用多的原因是①标签选择器不具体②id选择器很少用③类选择器的优先级比标签大，设置样式时不容易出现问题。
注意：①!important要少用。
权重的数字不能进位，类选择器的权重永远大于标签选择器。
继承的权重是0，不管父标签的权重多大，子元素继承的权重永远是0。
看标签具体执行的是哪一种样式，先看它有没有被选出来。
在使用复合选择器的时候要考虑权重叠加的问题，例如

div .class {样式说明}

这个选择器的权重为（0,0,0,1）加上（0,0,1,0）结果为（0，0，1，1），权重可以叠加但是永远不会进位！
盒子模型
页面布局的三大核心是盒子模型，浮动和定位。我们首先学的是盒子模型。盒子模型的组成部分为实际内容content，内边距padding，边框border和外边距margin，如下图
网页布局的过程：①准备好相关的网页元素，网页元素基本上都是盒子②用css设置好盒子样式，然后摆放到相应的位置③往盒子里面装内容。
盒子模型的边框：边框属性有粗细border-width单位px；类型border-style；颜色border-color，默认值为黑色。
边框类型有实线solid、虚线dashed、点线dotted等，我们最常用到的是实线。
边框属性的简写方式：{border: 1px solid red;}没有顺序，每个属性值之间用空格隔开。
边框还可以分开写，上边框border-top，下边框border-bottom，左边框border-left，右边框border-right。
相邻边框还可以合并，但是仅限于表格使用。代码格式如下：

border-collapse: collapse;

边框会影响盒子的大小。
内边距padding
作用是设置边框与内容之间的距离。
padding也分左右上下四种，单位为px。复合写法如下图。
内边距复合写法
padding也会影响盒子的大小，解决方法是用盒子本身的width和height减去相应的内边距。
当盒子没有指定宽高的时候，padding不会影响盒子的大小。
外边距margin
外边距的作用是设置盒子与盒子之间的距离。
写法和padding一样，就不介绍了~
注意：①必须是块级元素②必须有宽度
块级盒子左右外边距改为auto时，盒子能够水平居中。但是一行只有一个盒子的时候才能够居中。
相邻块元素垂直外边距合并时，两个盒子的外边距值取最大的那个外边距，比如上面盒子的下外边距为20px，下面盒子的上外边距为30px，那么两个盒子之间的距离为30px。解决方法是只给其中一个盒子加margin值。
嵌套块元素垂直外边距塌陷的解决方法：①给父元素定义上边框②给父元素定义内边距③为父元素添加属性overflow: hidden;
TIP:行内元素和行内块元素尽量只设置左右内外边距，不要设置上下内外边距。
清除内外边距的方法如下：