黑马程序员技术交流社区
标题:
css的继承性和浮动的书写
[打印本页]
作者:
刘笑笑
时间:
2019-10-12 16:17
标题:
css的继承性和浮动的书写
Css的三大特性：
层叠性（覆盖性）
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
遵循就近原则
实际开发中导航的书写（超级重要）
实际开发中导航布局使用ul嵌套li，li嵌套a实现
html结构：一个大的div盒子类名称命名为nav,里面嵌套ul,然后ul里面嵌套li，，li里面嵌套a，，a里面放文字；
css书写：
01、 设置大的div的实体化宽高
02、 设置li的样式：左浮动float:left;，设置li的固定高度，宽度分为两种情况：
情况1：如果导航里面的文字个数一致，我们就直接将li的宽度固定死；
情况2：如果导航里面的文字不一样多，那么就不要给li设置宽度，后面用a来撑开；
03、设置a的样式： 首先将a的显示模式用display:block;转化为块元素,然后设置a的宽和高，高和li的高度一致，宽度如果文字一样多我们就设置为固定的宽度，如果文字不一样多，宽度就不设置，用padding：0 20px;撑开，意思就是上下内边距为0，左右设置一个固定的值就可以撑开a；
继承性
有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承比如text-开头的，line-开头的，font-开头，还有color会被继承，但是color在继承的时候超链接a标签是不会去继承父级的，我们需要单独设置；
.box {
font-size: 60px;
font-family: '宋体';
color: red;
}
.box a {
color: red;
}
<div class="box">
<p>我是老王</p>
<p><span>我是span标签呀</span></p>
<p><a href="#">我是超链接a呀</a></p>
</div>
注意：实体化三属性宽width、高height、背景background是绝对不能继承的,都是需要自己设置；
优先级；
如果是同类型的我们就遵循就近原则覆盖就可以，如果不是同一种选择器就会遵循下面的计算公式：
第一等：代表行内样式，如: style=””，权值为1000。 == 1,0,0,0
第二等：代表ID选择器，如：#content，权值为100。 == 0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为10。 == 0,0,1,0
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 == 0,0,0,1
第五等：通配符*和继承性的权重为0，== 0,0,0,0
特等权重：!important 提高权重，有提权的效果，有了样式优先生效；
继承的权重为0
如果子级盒子自己没有样式，就会去继承父级盒子的样式，如果子级盒子自己有样式就不会去继承父级盒子的样式，当然如果我们用了后代选择器将子级盒子选中就会生效；
所以在实际开发中强烈要求大家用后代选择器；
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2