1.继承性和层叠性:继承性:像一些文本的属性,color,text-*,line-*,font-*这些属性是可以继承下来的,text-decoration:underline(下划线)也可以继承;
<style>
a{
text-decoration:none;
}
.father{
/*100px;*/
height:100px;
color:red;
font-size:40px;
background-color:yellow;
line-height:100px;
text-align:center;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
<span>我是大赢家</span>
<a href="#">alexsb</a>
</div>
</div>
</body>
在这段代码中span就继承了 .father的文本设置,例如:color , font-size, text-decoration:underline;等
2.层叠性就是权重,谁的权重大就显示谁的属性;
如何看权重?
就是数数,数(选择器的个数):优先id 然后是class 最后是 标签 ;
1.针对于选中的标签(谁的权重大,就会显示谁的属性);
2.如果权重一样大,以 后设置的为准;
3.如果是继承下来的属性,它权重为0,跟选中的标签没有可比性;
4.如果权重都为0,那么谁描述的近(就近原则),就显示谁;
5.如果权重为0,描述的一样近的时候,回到原始状态(数权重);
<style>
因为是继承下来的权重为零
//按照 优先 id 然后class 最后 标签;数数 111
.wrap1 #box2 div{
color:yellow;
}
因为是继承下来的权重为零
//按照 优先 id 然后class 最后 标签;数数 111
最后按照谁后设置,就显示谁的原则;
#box1 .wrap2 div{
color:red;
}
</style>
</head>
<body>
<div class="wrap1" id="box1">
<div class="wrap2" id='box2'>
<div class="wrap3" id="box3">
<p>猜猜我的颜色</p>
</div>
</div>
</div>
</body>
按照上面讲述的方式来看权重
三 . 盒模型
属性: width : 内容的宽度;
height: 内容的高度;
padding : 内容到border的区域;
border : 边框;
<!--border:1px solid red;-->
<!--一个值:上下左右-->
<!--padding:10px;-->
<!--/*两个值:上下 左右*/-->
<!--padding:10px 20px;-->
<!--/*三个值:上 左右 下*/-->
<!--padding:10px 20px 30px;-->
<!--/*四个值:上 右 下 左*/-->
<!--padding:10px 20px 30px 40px;-->
一,二,三,四个值得设置,只有border可以, margin,padding都没有,而且border可以做出三角形的状态
margin : 标准流的标签, margin的使用通常是用在兄弟之间的标签;
坑 : margin水平方向是没有任何问题;
垂直方向会出现"坍塌问题",以设置的最大值为基准;
以后在写网站标准流的盒子,垂直方向只设置一个方向即可;
在两个块中,一个包含另一个,如果儿子踹他爹,可以踹,那么只需要给他爹加border,那么问题来了,页面冗余,可能会影响页面的布局;
记住 : 前提是标准流下的盒子;
如果是父子之间调整位置,那么使用padding , margin的坍塌要避免,只设置一个方向;
浮动元素 : 对行内元素和块元素的影响;
1.如果标准流下的标签浮动,定位(绝对固定,相对固定)了,不区分是行内还是块级元素,可以任意设置宽高;
2.浮动对块元素的影响,像把块元素转化成行内元素;
切记 : 浮动不做压盖现象;
<style>
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
/*去除a中的下划线*/
a{
text-decoration:none;
}
.box{
/*420px;*/
height:100px;
background-color:purple;
}
.box ul{
/*100%;*/
height:50px;
}
.box ul li{
/*浮动的标签不区分块还是行内标签,浮动的标签可以任意设置宽高*/
/**/
float:left; //float就是浮动 ,参数有两个, left(左浮动) ,right(右浮动)
/*70px;*/
height:100px;
/*像一些字体属性是可以继承下来:text-*,color,font-**/
font-size:14px;
color:green;
/*文本水平居中*/
text-align:center;
/*盒子水平居中*/
/*margin:0 auto;*/
/*行高==盒子的高度 实现文本垂直居中*/
line-height:100px;
margin:0 10px;
/*cursor:pointer;*/
}
.box ul li a{
color:yellow;
/*height:50px;*/
display:block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span>秒杀</span>
</li>
<li>
<a href="#">
砥砺奋进考虑
</a>
</li>
<li>
<a href="#">PLUS闪购</a>
</li>
<li>
<a href="#top">
海外代购
</a>
</li>
<li>
<a href="https://www.baidu.com">京东服饰</a>
</li>
<li>
<a href="#">京东金融</a>
</li>
</ul>
</div>
</body>
</html>