前端三件套之CSS（五）

一、Display

display 可以修改元素的类型，让块级元素和内联元素相互转换

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素
inline	此元素会被显示为内联元素
inline-block	行内块元素
flex	弹性盒模型

元素隐藏属性对比

属性	描述
display:none;	隐藏自己，隐藏后原位置不保留
visibility:hidden;	隐藏自己，隐藏后原位置保留
opacity:0;	隐藏自己，隐藏后原位置保留
overflow:hidden;	溢出部分隐藏

二、文档流

文档流是文档中可显示对象在排列时所占用的位置 / 空间例如：块元素自上而下摆放，内联元素，从左到右摆放标准流里面的限制非常多，导致很多页面效果无法实现

1

高矮不齐，底边对齐

2

空白折叠现象

1 无论多少个空格、换行、 tab ，都会折叠为一个空格

2 如果我们想让 img 标签之间没有空隙，必须紧密连接

文档流产生的问题

高矮不齐，底边对齐

<span>我是文本内容</span>
<img src="1.jpg" alt="">

img{
    width: 200px;
}

空格折叠

<span>我是文本       内容</span>
<img src="1.jpg" alt="">

img{
    width: 200px;
}

元素无空隙

<span>我是文本内容</span>
<img src="1.jpg" alt=""><img src="1.jpg"alt="">
img{
    width: 200px;
}

如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！ 脱离标准流！

脱离文档流

使⼀个元素脱离标准文档流有三种方式

1 浮动

2 绝对定位

3 固定定位

三、浮动

浮动的定义

float 属性定义元素在哪个方向浮动，任何元素都可以浮动

值	描述
left	元素向左浮动
right	元素向右浮动

浮动的原理

1 浮动以后使元素脱离了文档流

2 浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

<div class="box"></div>
<div class="container"></div>
.container{
    width: 200px;
    height: 200px;
    background-color: #81c784;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
}

元素向右浮动

<div class="box"></div>
<div class="container"></div>

.container{
    width: 200px;
    height: 200px;
    background-color: #81c784;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: right;
}

所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 0 5px;
}

当容器不足时

当容器不足以横向摆放内容时候，会在下一行摆放

<div class="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
 </div>

.container{
    width: 250px;
    height: 300px;
    border: 1px solid red;
 }
 .box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }

四、清除浮动

浮动副作用

当元素设置 float 浮动后，该元素就会脱离文档流并向左 / 向右浮动，

1 浮动元素会造成父元素高度塌陷

2 后续元素会受到影响

<div class="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

.container{
    border: 1px solid red;
 }
 .box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

清除浮动

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副

作用

解决方案有很多种

1 父元素设置高度

2 受影响的元素增加 clear 属性

3 overflow 清除浮动

4 伪对象方式

父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    height: 300px;
    width: 350px;
    border: 1px solid red;
 }
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }

受影响的元素增加 clear 属性

如果同级元素受到影响，直接给收到影响的元素增加 clear 属性

值	描述
left	清除左浮动
right	清除右浮动
both	同时清除左右浮动

 

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
    clear: both;
}

overflow 清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清除浮动

这种情况下，父布局不能设置高度父级标签的样式里面加: overflow:hidden ;

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

伪对象方式

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理

为父标签添加伪类 after , 设置空的内容，并且使用 clear:both ;

这种情况下，父布局不能设置高度

 

 

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
 </div>
<div class="nav"></div>
.container {
   width: 350px;
   border: 1px solid red;
}
 .container::after {
    content: "";
    display: block;
    clear: both;
 }
 .box {
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }
.nav {
    width: 100px;
    height: 100px;
    background-color: red;
}

五、浮动实操

 

<div class="container">
   <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">服务</a></li>
   </ul>
</div>
<p>内容</p>

 *{
   margin: 0;
    padding: 0;
 }
.container{
    width: 100%;
    height: 50px;
    background-color: #666;
 }
.nav{
    width: 80%;
    margin: 0 auto;
 }
.nav::after{
   content:"";
   display: block;
   clear: both;
}
.nav li{
    float: left;
    padding: 0 20px;
    list-style: none;
    height: 50px;
    line-height: 50px;
}
.nav li a{
    color: #fff;
    text-decoration: none;
}
.nav li:hover{
    background-color: #333;
}

六、定义

position 属性指定了元素的定位类型

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向值进行调整位置： left、top、right、bottom

相对定位

<div class="box"></div>
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 100px;
}

绝对定位

<div class="box1"></div>
<div class="box2"></div>
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

固定定位

<div class="box1"></div>
<div class="box2"></div>
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:fixed;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父 级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

<div class="container">
    <div class="box"></div>
</div>

.container{
    width: 300px;
    height: 300px;
    background-color: #666;
    position: relative;
    left: 200px;
}
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
}

Z-index

z - index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处

于堆叠顺序较低的元素的前面

<div class="box1"></div>
<div class="box2"></div>
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2;
 }
 .box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1;
 }