自学前端之CSS(三)给元素设置浮动之后，元素会脱离文档流，浮起来。给父元素设置固定高度，应用在网页中固定高度区域。

css布局

浮动float

给元素设置浮动之后，元素会脱离文档流，浮起来。

值

none
left
right
inherit

浮动的现象

脱离文档流
浮动元素相互贴靠
文字环绕
浮动元素会收缩

浮动的破坏性

会使父级元素高度塌陷(height=0)

清除浮动的方式

固定高度法

给父元素设置固定高度，应用在网页中固定高度区域。

缺点： 使用不灵活，后期不易维护。

<style>
    .box{
        width:200px;
        height:200px;/*固定高度*/
    }
    .child{
	width:50px;
        height:50px;
        float:left;
    }
</style>
<div class="box">
   <div class="child">
       盒子
   </div>
</div>

内墙法

在最后一个浮动元素的后面设置一个空的块级元素，设置其属性为clear:both。

缺点： 结构冗余。

<style>
    .box{
        width:100%;
    }
    .box1{
	width:100px;
        height:100px;
        float:left
    }
    .clear{
        clear:both;
    }
</style>
<div class="box">
   <div class="box1"></div>
   <div class="clear"></div>
</div>

伪元素清除法

<style>
    .box{
        width:100%;
    }
    .box1{
        width:100px;
        height:100px;
        float:left;
    }
    .box::after{
	content:'';
        display:block;
        clear:both;
    }
</style>
<div class="box">
   <div class="box1">
   </div>
</div>

overflow:hidden

overflow控制内容超出之后的行为

值

visible(默认)
hidden
scroll
auto
inherit

只要给父级元素设置overflow:hidden就可以清除浮动。非常适用

<style>
    .box{
        width:100%;
        overflow:hidden;
    }
    .box1{
        width:100px;
        height:100px;
        float:left;
    }
</style>
<div class="box">
   <div class="box1">
   </div>
</div>

深入挖掘BFC是什么

BFC:block formatting context，块级格式上下文。

B：BOX 即盒子，页面内的基本构成元素。分为inline、block、inline-block三种类型的盒子

FC：formatting context 是页面中的一块渲染区域，并且拥有自己的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见的formatting context有

block formatting context(BFC)
inline formatting context(IFC)

定义

块级格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外毫不相关。

BFC布局规则

内部的box会在垂直方向上，一个接一个的放置。
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠(margin塌陷)。
每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左到右的格式化，否则相反)。即使存在浮动也如此。
bfc的区域不会与float元素重叠。所以可以制造bfc区域，使其与浮动元素贴边，而此时也会撑起父元素的高度。
bfc就是页面上一个隔离的独立的容器，容器内的子元素不会影响到外面的元素，反之亦然。
计算bfc的高度时，浮动元素也参与计算。可以理解为，让父元素形成一个bfc区域时，里面的浮动元素会撑起父元素的高度。

BFC的形成条件

根元素
float属性不为none
position为absolute或fixed
display为inline-block
overflow不为visible

定位position

值

static(默认)
relative
absolute
fixed

相对定位

相对于自身进行定位，以原来的位置为参考点，仍然存在于标准文档流。

绝对定位

相对于最近的非static祖先元素进行定位，如果不存在非static祖先元素，那么以页面根元素左上角进行定位。

特点

脱离文档流，不在页面占据位置
层级提高，压盖现象

固定定位

脱离文档流，一旦设置固定定位，在页面中滚动网页，固定不变。以浏览器的左上角进行定位。

浮动和定位给行内元素带来的影响

只要能使元素脱离文档流，就可以设置他的大小。

float非none
position非relative、static

z-index

只能用在定位的元素上，值为正整数。

从父现象，如果父级的z-index值越大，子级和父亲一样。

<div style="z-index:15">
	<div class="box1"style="z-index:1"></div>
</div>
<div style="z-index:10">
	<div class="box"style="z-index:1000"></div>
</div>

由于box1的父级z-index值大于box2的父级的z-index，所以box1会压盖在box2的上面。

使用雪碧图

它是一种图像拼合技术，将多个小图标和背景图像合并到一张图片上，利用css背景定位来显示需要显示的图片部分。

场景

静态图片，不随用户信息变化而变化。
小图片，图片比较小
加载量比较大

有效减少了http请求数量，加速内容的显示。

制作圆、圆环、半圆

圆

.box{
    width:200px;
    height:200px;
    border-radius:100px;
    background-color:red;
}

圆环

.box{
    width:200px;
    height:200px;
    border-radius:50%;
    /*background-color:red;*/
    border:10px solid green;
}

半圆

.box{
    width:200px;
    height:100px;
    background-color:red;
    border-top-left-radius:100px;
    border-top-right-radius:100px;
    border:10px solid green;
}

元素产生阴影效果

box-shadow

box-shadow:"水平偏移" "垂直偏移" "模糊度" "颜色";

布局

单列布局

小米网站分析

<style>
    html,body{
        margin:0;
        height:100%
    }
    .header{
        width:100%;
        height:40px;
        line-height:60px;
        text-align:center;
        background-color:#000;
    }
    .container{
        width:1200px;
        margin:0 auto;
    }
    .header .container{
	 height:60px;
         background-color:orange;
    }
    
    .main{
		width:100%;
         height:100%;
    }
    .main .container{
         height:100%;
         background-color:red;
    }
    
    .footer{
        width:100%;
        height:100px;
    }
    .footer .container{
        height:100%;
        background-color:green;
    }
</style>


<!--头部-->
<div class="header">
	<div class="container">头部</div>
</div>
<!--主体内容-->
<div class="main">
	<div class="container"></div>
</div>
<!--脚部-->
<div class="footer">
	<div class="container"></div>
</div>

多列布局

两列

<style>
    html,body{
        margin:0;
        height:100%
    }
    .header{
        width:100%;
        height:40px;
        line-height:60px;
        text-align:center;
        background-color:#000;
    }
    .container{
        width:1200px;
        margin:0 auto;
    }
    .header .container{
	 height:60px;
         background-color:orange;
    }
    
    .main{
	 width:100%;
         height:100%;
    }
    .main .container{
         height:100%;
         background-color:red;
    }
    .main .left{
        width:200px;
        height:100%;
        float:left;
        background-color:yellowgreen;
    }
    .main .right{
        width:1000px;
        height:100%;
        float:left;
        background-color:pink;
    }
    
    .footer{
        width:100%;
        height:100px;
    }
    .footer .container{
        height:100%;
        background-color:green;
    }
</style>


<!--头部-->
<div class="header">
	<div class="container">头部</div>
</div>
<!--主体内容-->
<div class="main">
	<div class="container">
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
</div>
<!--脚部-->
<div class="footer">
	<div class="container"></div>
</div>

三列

<style>
    html,body{
        margin:0;
        height:100%
    }
    .header{
        width:100%;
        height:40px;
        line-height:60px;
        text-align:center;
        background-color:#000;
    }
    .container{
        width:1200px;
        margin:0 auto;
    }
    .header .container{
	 height:60px;
         background-color:orange;
    }
    
    .main{
	 width:100%;
         height:100%;
    }
    .main .container{
	 height:100%;
         background-color:red;
    }
    .main .left{
        width:10%;
        height:100%;
        float:left;
        background-color:yellowgreen;
    }
    .main .right{
        width:10%;
        height:100%;
        float:right;
        background-color:pink;
    }
    .main .center{
        height:100%;
        background-color:purple;
        margin:0 130px;
    }
    
    .footer{
        width:100%;
        height:100px;
    }
    .footer .container{
        height:100%;
        background-color:green;
    }
</style>


<!--头部-->
<div class="header">
	<div class="container">头部</div>
</div>
<!--主体内容-->
<div class="main">
	<div class="container">
    	<div class="left"></div>
    	<div class="right"></div>
    	<div class="center">内容</div>
        
    </div>
</div>
<!--脚部-->
<div class="footer">
	<div class="container"></div>
</div>

常见问题

css命名规范

blog.csdn.net/u012436908/…

项目目录规范

确定错误发生位置

可以给某一块添加注释进行排查

行内元素水平垂直居中

<style>
    .box{
        width:200px;
        height:200px;
        background-color:red;
        color:#fff;
        text-align:center;/*水平居中*/
        line-height:200px;/*垂直居中*/
    } 
    .box1{
        width:200px;
        height:200px;
        background-color:blue;
        color:#fff;
        text-align: center;
        /*模拟单元格*/
        display:table-cell;
        vertical-align: middle;
    } 
</style>
<div class = 'box'>
    john
</div>
<div class = 'box1'>
    job
</div>

块级元素水平垂直居中

方法一

position+margin

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 100px;
            margin: auto;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
</style>
<div class="box">
    <div class="child"></div>
</div>

方法二

模拟单元格

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            width: 100px;
            display: inline-block;
            height: 100px;
            background-color: green;
        }
    </style>
<div class="box">
    <div class="child"></div>
</div>

方法三

纯定位

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 100px;
            position: absolute;
            height: 100px;
            background-color: green;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
</style>
<div class="box">
    <div class="child"></div>
</div>