100字范文 > CSS3day(CSS三大特性行高的继承选择器的权重盒子模型：外边距边框内边距)

CSS3day(CSS三大特性行高的继承选择器的权重盒子模型：外边距边框内边距)

时间：2023-09-29 21:34:01

文章目录

CSS三大特性：层叠性、继承性、优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型：边框（border）表格的细线边框边框会影响盒子的实际大小内边距（padding）padding的复合属性内边距(padding)也会影响盒子的大小新浪导航栏案例内边距(padding)不影响盒子的情况外边距(margin) 其实和内边距使用方法很一样，不做过多描述外边距典型应用(水平居中)外边距合并相邻元素垂直外边距的合并嵌套块元素垂直外边距的塌陷清除内外边距(外边距:不会影响盒子的大小,但会影响盒子的位置) 综合案例(产品模块)：

CSS三大特性：层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠

<style>div {color: pink;font-style: italic;}div {color: skyblue;font-style: normal;}</style><body><div>面对可抗的事情，努力一下</div></body>

如下图文字的样式就近原则呈现蓝色。

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。（子承父业）

恰当的使用继承可以简化代码，降低CSS样式的复杂性子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）不是所有样式都会继承！！后面会学。

<div><p>面对不可抗的事情，笑一下</p></div>

如下图，p标签的文字样式从div那里继承而来。

行高的继承

body {
color: rgb(26, 248, 6);
font: 12px/1.5 ‘Microsoft YaHei’;
/* 字体大小/行高字体系列 */
}

如果子元素div没有设置行高，则会继承父元素body的行高为1.5此时子元素的行高是:当前子元素的font-size(文字大小)*1.5body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同,则执行层叠性选择器不同，则根据权重执行权重有四组数字组成，但是不会有进位。可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推…等级从左到右依次判断，数值相同，则比较下一位数。简单记忆：范围越小的选择器，权重更大，优先级更高继承的权重是0！！，(比如给body的文本样式一个!important，但是子类虽然会继承，但会优先显示自己的选择器样式。)如果元素没有直接选中，不管父元素的选择器权重有多高，子元素得到的权重都是0.

选择器优先级示例1：

<style>.test {color: red;}div {color: pink !important;}#demo {color: green;}</style><body><div class="test" id="demo" style="color: purple">你笑起来真好看</div></body>

最终还是粉色！

继承的权重示例1：

优先级权重的叠加

权重虽然会叠加，但是永远不会进位

ul li 的权重是 0,0,0,1+0,0,0,1=0,0,0,2 =2li的权重是0,0,0,1 a：hover=0,0,0,1+0,0,1,0=0,0,1,1 hover属于伪类选择器。和类选择器同级

盒子模型：

页面布局三大核心：盒子模型，浮动，定位。

先准好相关的网页元素，网页元素基本都是盒子Box.利用CSS设置好盒子样式，然后摆放到相应位置。网页布局的核心：利用CSS摆盒子往盒子里面装内容。

边框（border）

border可以设置元素边框。边框主要有三部分组成：边框宽度（粗细）边框样式边框颜色

语法：

border:border-width || border-style || border-color

border独立写法

div {width: 300px;height: 200px;border-width: 5px;/* border-style (边框样式) solid:实线边框 dashed:虚线边框 dotted:点线边框 */border-style: dashed;border-color: red;}

border复合写法

边框简写：

border: 1px solid red;没有顺序

边框分开写法：

border-top: 1px solid red;没有顺序（只设定上边框）
border-bottom: 5px dashed skyblue;下边框
border-left: 5px solid blue;左边框

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse: collapse;
表示相邻边框合并一起

<style>table {width: 500px;height: 300px;text-align: center;}table,td,th {border: 1px solid skyblue;border-collapse: collapse;}</style>

结果：

边框会影响盒子的实际大小

如图:实际盒子的大小会加上border(边框)的大小。weight和height都变成210px(200+5*2)

内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离

padding的复合属性

内边距(padding)也会影响盒子的大小

添加了内边距，内容和边框有了距离也就是说，如果盒子已经有了宽度和高度，再指定内边距，会撑大盒子

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小（边距*2,因为是两边）即可

新浪导航栏案例

.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {font-size: 16px;color: #4c4c4c;text-decoration: none;display: inline-block;text-align: center;padding: 0px 20px;}.nav a:hover {color: #ff8500;background-color: rgb(238, 238, 238);}

内边距(padding)不影响盒子的情况

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

div {width: 300px;height: 100px;background-color: purple;}div p {padding: 30px;background-color: skyblue;}

这么写，div的子元素p不会超过div的大小。（加上width=100%试试）

外边距(margin) 其实和内边距使用方法很一样，不做过多描述

margin属性用于设置外边距，即控制盒子和盒子之间的距离

外边距典型应用(水平居中)

外边距可以让盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度width盒子左右的外边距都设置了auto.

.header{ width:960px; margin: 0 auto; }

常见块级元素水平居中的写法：

margin-left:auto; margin-right: auto;margin: auto;margin: 0 auto;(常见写法)

行内元素(span等)或者行内块(img等)元素水平居中给其父元素添加text-align:center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距合并。

相邻元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方法:

只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加overflow:hidden。(这个方法不会改变盒子的大小）

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结

示例：

<style>.father {width: 400px;height: 400px;background-color: purple;/* border: 200px solid transparent;*//* padding: 200px; */overflow: hidden;.son {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}</style></head><body><div class="father"><div class="son"></div></div></body>

如下图的结果