CSS----4
目录
浮动
1.标准文档流
块级元素：独占一行
h1~h6 p div 列表...
行内元素：不独占一行
span a img strong
行内元素可以包在块级元素中，反之不可以
2.display
div{
width: 100px;
height: 100px;
border:1px solid #C850C0;
display: inline-block;
}
/*
block 块元素
inline 行内元素
inline-block 是块元素，但可以内联在一行；
none 让标签消失
*/
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}这也是实现行内元素排列的方式，但一般用float
3.float
左右浮动
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000000 solid;
}
.n01{
border: 1px #C850C0 dashed;
display: inline-block;
float: left;
}
.n02{
border: 1px #5c3737 dashed;
display: inline-block;
float: left;
}
.n03{
border: 1px #FFCC70 dashed;
display: inline-block;
float: right;
}
.n04{
border: 1px #4158D0 dashed;
font-size: 15px;
line-height: 23px;
display: inline-block;
float: right;
}4.父级边框塌陷问题
clear
解决方案：
1.增加父级元素高度。
#father{
border: 1px #000000 solid;
height: 500px;
}2.增加一个空div标签，清除浮动。
.clear{
clear: both;
margin: 0;
padding: 0;
}3.overflow
在父级元素中增加 overflow: hidden;
4.在父类加一个伪类：after
#father:after{
content: '';
display: block;
clear: both;
}小结：
- 浮动元素后面增加空div，简单，但代码中尽量避免空div。
- 设置父级元素的高度，简单，元素假设有了固定的高度，就会被限制。
- overflow 简单，下拉场景避免使用。
- 父类添加一个伪类：after 写法稍微复杂，但没有副作用，推荐使用。
5.对比
- display 方向不可控
方向不可控
- float
浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题。
定位
默认情况：
1.相对定位
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 15px;
line-height: 25px;
}
#father{
border: 1px #11ecd2 solid;
padding: 0;
}
#first{
background: aquamarine;
border: 1px dashed #C850C0 ;
position: relative;/*相对定位 上下左右*/
top: -10px;/*距离上边多少*/
left: 20px;/*距离左边多少*/
}
#second{
background: cornsilk;
border: 1px #d41212 dashed;
position: relative;/*相对定位 上下左右*/
bottom: -10px;
right: 20px;
}
#third{
background: rgba(127, 255, 212, 0.58);
border: 1px #42b448 dashed;
}
相对定位：position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中。
top: -10px;/*距离上边多少*/ left: 20px;/*距离左边多少*/ bottom: -10px;/*距离下边多少*/ right: 20px;/*距离右边多少*/
2.绝对定位
基于xxx定位，上下左右。
1.没有父级元素定位的前提下，相对于浏览器定位。
2..假设父级元素存在定位，我们通常情况下会相对于父级元素进行偏移。
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 15px;
line-height: 25px;
}
#father{
border: 1px #11ecd2 solid;
padding: 0;
position: relative;
}
#first{
background: aquamarine;
border: 1px dashed #C850C0 ;
}
#second{
background: cornsilk;
border: 1px #d41212 dashed;
position: absolute;
right: 200px;
}
#third{
background: rgba(127, 255, 212, 0.58);
border: 1px #42b448 dashed;
}
</style>3.固定定位fixed
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background: #d41212;
position: absolute;/*绝对定位 相对于浏览器位置*/
right: 0;
bottom: 0;
}
div:nth-of-type(2){
height: 50px;
width: 50px;
background: #119aec;
position: fixed;/*固定定位 死位置*/
right: 0;
bottom: 0;
}
</style>4.z-index
图层........
z-index:默认是0，最高无限制
opacity: 0.5;/*背景透明度*/
#conter{
width: 200px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000000 solid;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#conter ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 200px;
height: 25px;
top:140px
}
.tipText{
color: black;
z-index: 999;
}
.tipBg{
background: #11ecd2;
opacity: 0.5;/*背景透明度*/
}
CSS总结
