标准流
标准流，也叫文档流
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>标准流</title>
</head>
<body>
标准流，也叫文档流
重点：在页面上，元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，直到碰到父元素的边框换行
<div>块元素1</div>
<p>块元素2</p>
<span>行内元素</span>
<i>行内元素</i>
</body>
</html>
浮动 重点 ***
语法：
在css 中通过 float 属性定义浮动
属性值 描述
none 元素不浮动
left 元素向左浮动
right 元素向右浮动
浮动的特点：
1、浮动的元素脱离标准流，不占据原来的位置
2、浮动的作用就是让块元素在一行显示 ，即使代码换行也不显示缝隙
3、浮动只能浮动到父元素的左面和右面
4、行内元素浮动之后，转换成了行内块的显示模式
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>标准流</title>
<style type="text/css">
.father{
width: 800px;
height: 500px;
background-color: pink;
/*块元素居中*/
margin:0 auto;
}
.father > div{
width: 100px;
height: 100px;
}
.red{
background-color: red;
float: none;
float: left;
/*绿的已经跑到红色下面了因为脱离了标准流*/
}
/*权重问题所以加div*/
div.green{
background-color: green;
float: left;
}
.blue{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</body>
</html>
文本绕图
浮动最开始出现就是为了解决文本绕图，文字不参与浮动
盒子阴影
box-shadow: -10px 10px 10px 3px #444;
盒子阴影：第一个值水平偏移量正直向右，负值向左
盒子阴影：第二个值垂直偏移正直向下，负值向上
盒子阴影：第三个值阴影模糊范围，没有负值
盒子阴影：第四个值阴影大小，没有负值
盒子阴影：第五个阴影颜色
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: pink;
/*
box-shadow: 0px 0px 0px 0px #444;
从后往前来
box-shadow: 0px 0px 0px 3px #444;
阴影的大小
box-shadow: 0px 0px 10px 3px #444;
阴影模糊虚化的范围,模糊越大影子越虚扩散的范围
box-shadow: 0px 10px 10px 3px #444;
阴影的偏移量正直向下负值向上
box-shadow: -10px 10px 10px 3px #444;
阴影水平偏移量 正直向右 负值向左
*/
box-shadow: -10px 10px 10px 3px #444;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
inset 内阴影，也可以添加 多个阴影使用逗号隔开 阴影默认外阴影 可以设置inset
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: pink;
box-shadow: -10px 10px 10px 3px #444, inset 6px -10px 9px 13px yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
实际开发细线 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线案例</title>
<style type="text/css">
div,ul,li{
list-style: none;
padding:0;
margin:0;
}
.wrapper{
width: 1005px;
height: 200px;
background-color: pink;
margin:0 auto;
}
.wrapper li{
width: 200px;
height: 200px;
border:1px solid black;
float: left;
/*这里添加完float 之后你就会发现 有一个边框掉落下来原因是因为 border 的原因，所以需要下面的技巧*/
/*给一个margin 正直右 负值像左 压住左面的线*/
/*margin-left: -1px;*/
margin-right: -1px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 800px;
height: 500px;
background-color: #ccc;
margin:0 auto;
}
.top{
height: 100px;
background-color: blue;
}
.red,.green{
width: 100px;
height:100px;
}
.red{
background-color: red;
/*float: left;*/
/*
所有的浮动都是原地 浮动
浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流
*/
}
.green{
background-color: green;
/*浮动只会影响当前或者后面的盒子，不会影响标准流里的块元素*/
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="top"></div>
<div class="red"></div>
<div class="green"></div>
</div>
</body>
</html>
清除浮动的方法
清除浮动的影响
其实本质叫做闭合浮动更好一些，记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素，在css 中 clear 属性用于清除浮动
属性值 描述
left 不允许左侧有浮动
right 不允许右侧有浮动
both 同时清除左右两侧浮动
第一种方法：额外标签法
在浮动元素末尾添加一个空的标签，在最后一个浮动的元素末尾 优点通俗易懂，缺点增加无意义的代码，实际不使用
<div style="clear:both;"></div>
为什么要清除浮动 ？
浮动的本质揭秘，是用来做一些文字混排效果的,但是被我们拿来做布局用，则会有很多的问题出现，由于浮动元素不在占用原文档流位置，所以他会对后面的元素排班产生影响，为了解决这些问题，此时就需要在元素中清除浮动，准确来说是清除浮动后造成的影响？
第二种方法：使用overflow：hidden；
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 浮动元素的父元素 不设置高度，里边浮动的子元素不能撑开父元素的高度，父元素的高度为0，下边的元素会占据父元素的位置，发生了布局的会乱*/
.father{
width: 600px;
background-color: #ccc;
/*给浮动元素的父元素 overflow：hidden 的属性有 auto scroll
auto 也可以， scroll 是滚动条
*/
overflow: hidden;
}
.son,.red{
width: 200px;
height: 200px;
}
.son{
background-color: pink;
float: left;
}
.red{
background-color: red;
float: left;
}
.green{
width: 600px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="red"></div>
<div class="green"></div>
</div>
</body>
</html>
使用 after伪元素清除浮动 单伪元素
:after方式为空元素额外标签法的升级版，好处是不用单独加标签了
优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1触发haslayout。
.clearfix:after{
content: "";
display:block;
height: 0;
visibility: hidden;
clear:both;
}
.cleafix{
*zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*单伪元素清除浮动 给 浮动元素的父元素使用*/
.clearfix:after{ /*伪元素 是 行内 元素 */
content: "";
/*所以转为块 元素*/
display: block;
/*高度为0 */
height: 0;
/*显示模式为隐藏*/
visibility: hidden;
clear: both;
}
/*兼容ie6-7清除浮动*/
.cleafix{
*zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
</body>
</html>
双伪元素清除法 给浮动元素的父元素
使用befor 和after 双伪元素清除法 双伪元素清除法 给浮动元素的父元素
.clearfix:before,.clearfix:after{
content: "";
display: table;
/*table 默认宽高为0*/
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
使用befor 和after 双伪元素清除法
.clearfix:before,.clearfix:after{
content: "";
display: table;
/*table 默认宽高为0*/
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
</body>
</html>
淘宝圆角案例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 800px;
height: 100px;
background-color: pink;
margin:100px auto;
/*第一个水平半径 第二个是垂直半径
border-top-left-radius: 150px 60px;
border-top-right-radius: 50px;
*/
border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
正圆案例
正圆宽高要一样
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 800px;
height: 100px;
background-color: pink;
margin:100px auto;
border-radius:50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
