A:今天学的内容
一、css样式的继承
1、当子级没有宽度,子级继承父级的宽度。(针对块元素)
2、当父级没有高度,父级继承子级的高度。
二、盒子模型(box-sizing:border-box)
如果赋予 box-sizing:border-box;设置 border 和 padding 宽度不会变。
三、浮动(float:left / right)
1.float:left
2.如何清除浮动
①给父级添加(overflow:hidden),给父级添加伪元素(不会让父级失去高度)
②clear:both
ul:after{
content: "";
display: table;
clear: both;
}
【子级浮动,父级没有高度】
四、定位(position)
①,position:fixed(固定不动)
.one{
width: 500px;height: 500px;background: pink;
position: fixed;right: 0 ;bottom: 0;
/*固定右下角*/
}
②,position:relative(相对定位 给父级)
③,position:absolute(绝对定位 给子级)
五、用定位垂直水平居中
<style>
.box{
width: 300px;
height: 300px;
background: pink;
position: relative;
}
.one{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%; left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
六、z-index
z-index 可以设置堆叠,谁的值高谁在上面
<style>
*{margin: 0;padding: 0;}
.box{
width: 300px;height: 300px;
background: red;
position: relative;
}
.one{
z-index: 50;
width: 50px;height: 50px;
background: pink;
position: absolute;
}
.two{
z-index: 100;
width: 100px;height: 50px;
background: blue;
position: absolute;
}
.box:hover .one{
z-index: 200;
}
/*z-index 可以设置堆叠,谁的值高谁在上面*/
</style>
七、CSS样式的引入方式
外部样式表 < 内部样式表 < 内联样式
B:学会了什么
1、css的继承