系列文章目录
目录
前言
已经学习了html，css，vue，但是囫囵吞枣，不求甚解，于是准备重新学习了！
重新学习，发布一次，每日更新。
一、CSS
1.CSS出现的位置
（1）行间样式表：给单独的标签添加样式
语法：
<div style="width:100px;height:100px;background:blue;">div1</div>
<div>DIV2</div>缺点：不利于修改
- (2)内部样式表：样式表写在html的style标签对里面
语法：
<style>
div{
width:100px;
height:100px;
background:blue;
}
</style>
注意：div后面为英文大括号
缺点：只作用于当前div页面
(3)外部样式表：单独写一个样式文件（.css)用地址引入到当前html文件中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div></div>
</body>
</html>
div{ width:100px;
height:100px;
background:blue;
}
二、边框
1.设置边框的方式
- 边框的复合样式
如图的代码在页面中无显示
显示的两种方法：加背景，加边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> div{
width: 300px;
height: 300px;
border: 1px solid pink;
}知识点：
border的组成：
1.边框的粗细
2.边框的样子
solid 实线
dashed 虚线
dotted 点划线（不同浏览器显示不同，不兼容）
3.边框的颜色
| red | 英文颜色 |
| #f00 | 颜色的16进制表示法 |
| rgb（255，0，0） | 颜色的rgb表示方法 |
| rgba（255，0，0，0.5） | 0.5是透明度（css3） |
- 边框的单一样式
div{
/* 单一样式 (属性值顺序：上右下左）*/
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted solid;
border-color: pink green blue purple;
} div{
/* 单一样式 (属性值顺序：上/下 右/左）*/
border-width: 1px 2px ;
border-style: solid dashed dotted solid;
border-color: pink green blue purple;
} div{
/* 单一样式 (属性值顺序：上 右/左 下）*/
border-width: 1px 2px 3px ;
border-style: solid dashed dotted ;
border-color: pink green blue ;
}- 单独设置某一边框
div{
width: 300px;
height: 300px;
border: 1px dotted rgba(255, 0, 0, 0.6);
border-top: 1px solid #000;
}border-bottom-width: 2px;2.边框的特征
边框的形状：边框是一个非矩形。
div{
width: 0;
height: 0;
border: 20px dotted rgba(255, 0, 0, 0.6);
border-top-color: black;
}
三、背景
1.背景
| background | 背景 |
| background-color | 背景色 |
| background-image | 背景图片 |
| background-repeat | 背景图是否重复 |
| background-position | 背景图片的位置 |
| background-attachment | 背景图片是否滚动 |
| transparent | 背景透明（默认） |
内容可以把容器的宽高撑开
背景不会占用容器的宽高，不能选中，不能撑开宽高，背景色会铺满整个容器
连续写同一样式后面的会覆盖前面的
2. 背景图片
background-image背景图片
url(图片的地址)
none 没有背景图（默认）
3.背景图平铺
background-repeat：no-repeat;背景图默认会铺满整个容器
页面坐标轴：左上角为原点，右x轴，下y轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200;
height: 200;
border: 20px dotted rgba(255, 0, 0, 0.6);
background-image: url(../图片/example.jpg);
background-repeat: no-repeat; /*不重复平铺 */
background-repeat: repeat-x; /* 横向平铺 */
background-repeat: repeat-y; /* 纵向平铺 */
background-repeat: repeat; /*全部平铺 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>4. 背景图的位置
background-position: 5px 10px;传数值：
x轴5px y轴10px
传关键字：
x轴：
| left | 图片在容器的左边 |
| center | 图片在容器的中间 |
| right | 图片在容器的右边 |
y轴：
| top | 图片在容器上边 |
| center | 图片在容器中间 |
| bottom | 图片在容器下边 |
如果只传一个值，另一个值默认为center。
如果两个值都不写的话，默认为0，0点，左上角。
5.背景滚动
| background-attachment | 背景图片是否滚动 |
| scroll | 背景图片跟随滚动条滚动（默认） |
| fixed | 背景图片不会跟随滚动条而滚动 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200;
height: 200;
border: 20px dotted rgba(255, 0, 0, 0.6);
/* background-image: url(../图片/example.jpg);
background-position: left top;
background-repeat: no-repeat;
background-attachment: scroll; */
background: green url(../图片/example.jpg) no-repeat center top;
/*顺序不受影响，但是center top要在一起，代码顺序为标准顺序 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>四、文字
1.文字样式
| font | 文字 |
| font-weight | 文字着重（加粗） |
| font-style | 文字倾斜 |
| font-size | 文字大小（一般为偶数） |
| line-height | 文字行高 |
| font-family | 字体（中字默认宋体） |
font-weight文字加粗
weight加粗
normal正常
font-style：italic倾斜 normal正常
font-family:文字字体
font-family: serif,"微软雅黑","宋体";
/* 主要字体，备选字体1，备选字体2 */注意：写文字样式红色样式是必需的
文字样式应该按照表格中的顺序写，红色样式是必需的，注意字号和行高之间用斜杠
font: bold italic 25px/52px "微软雅黑";font: 25px/52px "微软雅黑";2.文本
-
文本样式
| color | 颜色 |
| text-align | 文本的对齐方式（左右对齐，居中对齐） |
| text-indent | 首行缩进（em缩进字符） 1em=一个字体 |
| text-decoration | 文本修饰 |
| letter-spacing | 字母间距 |
| word-spacing | 单词间距（以空格来解析） |
| white-space | 强制不换行 |
text-decoration:文本修饰
underline下划线
overline上划线
line-through中划线
none无
图片解释1em=一个字体
-
文本换行
英文与数字如果没有结束的话是不会换行的
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
此表格内容来w3school
加一个break-word 先另起一行，单词放不开切断
break-all暴力切分单词
-
空格的大小
宋体情况下，空格的大小是一个字体大小的一半
测试字体大小上下测量
-
行高
行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。即行高代表了一行文字在容器中所占的高度。
line-height行高 单位px
如果行高的值与容器的高度相等，那么文字垂直居中。
测量多种文字行高的方法：
1.首先要知道文字的大小
2.量下两行文字之间的距离
3.拿上面量出来的距离除2
如果行高为奇数的话，文字的上边距会小一像素，下边距会多一像素
比如line-height：21px 上边距2px 下边距3px
3.padding内填充
解释：元素最外面和内容之间的距离，不能取负值和auto
所以就存在
padding-top: 10px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 30px;四个数值就是上右下左
两个值就是上下，左右
三个值就是上，左右，下
注意：设置padding后会把原来的容器撑大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: pink;
padding: 100px;
}
</style>
</head>
<body>
<div>我是无敌小菜鸟</div>
</body>
</html>大家注意
padding前
padding后
4.margin外边距
解释：标签与标签之间的距离
解释不多说，上图
-
padding和margin的区别
padding作用在元素里面，拉开的距离会显示元素的背景
margin作用在元素外按，拉开的距离不会显示元素的背景
padding设置会撑大背景的面积，margin会撑大背景的外围
- 运用：
父子级元素之间的距离，通过给父级padding来设置
同级元素之间的距离，margin设置
- margin存在的问题
1.margin传递（只有上下会传递，左右不会传递）
margin： 0 100px，左右100px无显示。
子级会把自己的margin-top与margin-bottom传递给父级
解决办法：给父级加上一个边框 （方法一）
2.margin上下叠压（只有上下会叠压，左右不会叠压）
上边元素的margin-bottom和下边元素的margin-top叠在了一起（它会取大的正数值）
解决办法：只给一个元素设置margin就可以
auto自动
margin-left：auto；元素居右显示
margin-right：auto ；元素居左显示
元素居中显示：margin：0 auto；
5.盒模型
- 盒模型大小
宽度：border（左右）+width+padding（左右）
高度： border（上下）+width+padding（上下）
五、常用标签
| div | 块级元素 |
| a | 超链接 |
| span | 区分样式 |
| h1-h6 | 标题 |
| p | 段落 |
| strong | 强调（粗体） |
| em | 强调（斜体） |
| ul | 无序列表 |
| ol | 有序列表 |
| li | 列表项 |
| dl | 自定义列表 |
| dt | 自定义列表标题 |
| dd | 自定义列表项 |
| mark | 标记 |
| img | 图片 |
| header | 头部 |
| nav | 导航 |
| footer | 底部 |
| section | 板块 |
| article | 内容 |
| aside | 附属信息 |
| time | 时间 |
1.html，xml，xhtml，html5的区别
XML 被设计用来传输和存储数据。
HTML 被设计用来显示数据。
xhtml可以认为是语法要求更加严格的html
html5：HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。
2.部分标签详解
-
超链接标签a
特点：
1.默认有一个下划线
2.不会继承父级的颜色样式
功能
1.跳转页面
href 要跳转页面的地址，网络地址或者本地地址（没地址的话可以写一个#）
target 目标点
_blank在新页面打开
_self在本页面打开（默认的）
base 设置页面中所有的连接的打开方式以及连接地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<base target="_blank" href="http:www.baidu.com/">
<!-- base 设置页面中所有的连接的打开方式以及连接地址 -->
</head>
<body>
<div id="nav">我是无敌小菜鸟</div>
<div id="first">小菜鸟</div>
<div id="footer">哈哈哈</div>
</body>
</html>2.锚点
在href的值里写上#name，name对应id的值
<body>
<a href="#lightpink">粉色</a>
<a href="#lightblue">蓝色</a>
<a href="#lightyellow">黄色</a>
<div id="lightpink">我是无敌小菜鸟</div>
<div id="lightblue">小菜鸟</div>
<div id="lightyellow">哈哈哈</div>
</body> <style>
#lightpink{
width: 1000px;
height: 1000px;
background: pink;
}
#lightblue{
width: 1000px;
height: 2000px;
background: lightblue;
}
#lightyellow{
width: 1000px;
height: 1000px;
background: lightyellow;
}
</style>图示代码可以实现点击超链接进入颜色区域
3.下载
在href里面写文件的地址就可以了
注意：如果要下载的文件浏览器可以读出来，那么文件不会被下载而是直接打开 。
如果想让浏览器下载所有文件，那就在a标签里添加一个属性download，它的值写上文件的名字加后缀名。
<a href="../HBuilder/001.jpg" download="1001.jpg">下载</a>4.a标签的颜色
伪类：针对元素的某种状态添加的不同样式
| :link | 未访问链接的（颜色）状态 |
| :visited | 访问过的链接的（颜色）状态 |
| :hover | 鼠标移入（悬停）（颜色）状态 |
| :active | 鼠标按下不动时候的（颜色）状态 |
| 顺序从上到下，否则无效 | L V H A的顺序哦 |
常用样式
<style>
a{
color: aqua;
}
a:hover{
color: chartreuse;
}
</style>-
span标签
span 区分样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<a href="https://mp.csdn.net/mp_blog/creation/editor/122750743"><span>无敌小菜鸟</span>的CSDN文章</a>
</body>
</html>显示结果为一句话，其中我的id名称为红色
-
h标签
h标签 标题
h1-h6权重从高到低
-
ul，ol，li标签
ul元素的子元素只能是li
ol有序列表的子元素只能是li
-
dl，dt，dd标签
dt只能出现一次，dd可以出现多次
-
img标签
img 引入图片
src是图片的地址
如果单独给图片一个宽或者高，那图片就会按等比例缩放
宽高一起设置图片可能会变形
img是个单标签，没有一个专门的闭合标签
它的标签类型是一个内联块
3.h5新增标签以及标签语义化
<header>主要用于页面的头部，还可以放板块的头部</header>
<nav>导航</nav>
<footer>页面底部</footer>
<section>页面中的版块，用来区分页面中的不同区域</section>
<article>文章</article>
<aside>附属信息</aside>
<time>用来放时间</time>什么是标签语义化？
根据页面里的不同内容，选择最适合的标签，而不是通篇只用一种标签
（合理运用标签，规范使用）
好处:1、方便后期添加样式
2、提高代码的可读性
3、内容的可读性比较高
六、选择器类型
选择器 ：选择一个元素（标签）的方法
-
id选择器
能通过id选择元素（选择到的是一个元素）
语法 #id名称（要添加的样式）
注意：id具有唯一性，一个页面当中只能出现一个同样的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
}
#box1{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="box">0</div>
<div id="box1">1</div>
</body>
</html>-
标签选择器
通过标签名字选择元素（选择到的是一组元素）
语法 标签名（要添加的样式）
注意：标签选择器会给所有的标签都添加上相同的样式，会影响其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
margin-top: 200px;
}
</style>
</head>
<body>
<div >0</div>
<div >1</div>
<div></div>
</body>
</html>-
类选择器
解释：通过class选择元素（选择到的是一组元素）
语法： .class名称{要添加的样式}
注意：页面中的class可以重名的，一个元素的class可以有多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin-top: 200px;
}
.border{
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="box">0</div>
<p class="box border">1</p>
<section class="box">2</section>
</body>
</html>-
群组选择器
解释：通过逗号的方式选择一组元素
语法：①标签名，标签名{要添加的样式}
②#id名称，id名称{要添加的样式}
③.class名称，.class名称{样式}
④标签名，#id名， .class名称{样式}
只要任意一个元素有相同的样式，都可以用群组选择器放在一起，逗号隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,p,section{
border: 10px solid #000;
}
</style>
</head>
<body>
<div>0</div>
<p>1</p>
<section>2</section>
</body>
</html>- 包含选择器
通过范围选择元素（可能选择一个元素，也可能是多个）
语法：父级 目标元素{样式} //注意父级之后有一个空格
父级和目标元素都可以是用任意一种选择器选择到的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div div{
width: 100px;
height: 100px;
background: red;
/* margin-top: 200px; */
}
</style>
</head>
<body>
<div >0
<div>hahahah</div>
</div>
<div >1</div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#bird ul li{
width: 100px;
height: 100px;
background: red;
/* margin-top: 200px; */
}
#bird ol li{
width: 200px;
height: 200px;
background: blue;
}
/* 样式显示效果为上面两个样式代码，注释上面的样式代码即可显示下面的样式代码 */
#bird li{
width: 300px;
height: 300px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="bird">
<ul>
<li>填坑计划</li>
</ul>
<ol>
<li>菜鸟</li>
</ol>
<ul>
<li>明天会更好</li>
</ul>
</div>
</body>
</html>-
通配符选择器
不是很常用，谨慎使用（性能不好）
用来获取页面中所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
width: 100px;
height: 100px;
background-color:red;
}
/* 选中body下所有的标签 */
body *{
height: 50px;
width: 50px;
border: 2px solid #f00;
}
</style>
<body>
<div>菜鸟逆袭</div>
<p>咸鱼翻身</p>
<h1>好好睡觉</h1>
</body>
</html>关于说通配符选择器性能不好，可以参考知乎文章CSS通配符选择器“ * { } ”真的会影响性能吗？ - 知乎 (zhihu.com)
-
选择器的优先级
优先级：代码执行的顺序
选择器优先级一致的情况下，谁靠后谁的优先级高
行间样式>id选择器>类选择器>标签选择器>通配符选择器
1000 >100 >10 >1 >
包含选择器的计算：累加,和越大优先级越大
-
样式重置
标签样式初始化css reset
原则：清除页面中的会影响其他代码的标签携带的默认样式 ，用不到的标签就不用清除
需要重置的样式：
与盒模型相关的样式
margin
padding
border
标签特有的样式
ul li
ol li
建议：
1.如果网站非常大，内容非常多，建议不用通配符
2.如果小网站，内容不多，不如（单页面），可以用通配符
七.标签类型
-
块元素特征 （block）
1.默认独占一行
2.没有给宽度的时候，宽度是auto，撑满一行（宽度就是父级的宽度）
3.支持所有的css命令（比如span标签不支持宽度和高度)
div是块元素
-
行内元素特征（inline）
1.内容撑开宽高
宽高的值都是auto，只不过显示出来的宽高是内容撑开的
2.不支持设置宽高
3.不支持上下的margin与上下padding（左右支持)
上下的padding是有问题的，虽然把背影撑出来了，这个只是表面现象，
它不会对其它元素有影响
4.代码换行会被解析成一个空格（写在一行或者fontsize设为0解决这个问题）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
span{
background: pink;
width: 200px;
height: 200px;
margin: 50px;
padding: 50px;
}
div{
background-color: green;
}
</style>
<body>
<span>zhang</span><strong>中文</strong>
<div>zhu</div>
</body>
</html>-
块元素与行内元素的区分
通过设置样式来区分
body *{
border: 1px solid #f00;
}观察是否独占一行即可
-
元素类型的转换
块元素转换成行内元素 display：inline
转换后块元素就具有行内元素的特征（只是显示为行内元素，本身还是块元素）
行内元素转换成块元素 display：block
转换后的行内元素就具有块元素的特征（只是显示为块元素，本身还是行内元素）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: green;
color: #fff;
display: inline;
}
span{
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<span>3</span>
<span>4</span>
</body>
</html>display：inline-block行内块元素
特征：1.行内块元素支持宽高
2.块元素可以在行中显示
3.不给宽高的话，宽度会由内容撑开
4.代码换行会被解析成一个空格
5.IE6、7不支持块元素的inline-block
IE6、7不认识inline-block，但是给行内元素加上这个属性后会触发IE的haslayout特点，
会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block，现象上支持，实际上是被动支持的
-
标签嵌套规则
1.行内标签不能嵌套块标签，块标签可以嵌套行内标签
<!-- 错误举例 -->
<span style="border: 1px solid #f00;"><div>123</div></span>2.a标签不能嵌套a标签
3.h1-h6，dt这些标签的性质是标题，那里面就不能嵌套块级元素（可以嵌套行内）
4. p标签不能嵌套块标签（可以嵌套行内标签）
5.ul和li，ol和li，dl和dt，dd她们是固定的嵌套规则
1）ul和ol的下边只能跟li，li的父级只能是ul或者ol
2）li中可以嵌套任何标签，甚至可以再放一个ul或者ol
3）dl和dt、dd可以参考ul和li（注意3）
百度翻页例子练习
分析：整体有宽度和高度，独占一行（整体设置div块级元素）
字体有字号，宽度，高度，边框，位置居中（如果行高的值与容器的高度相等，那么文字垂直居中。text-align：center），没有下划线（text-decoration：none）
点击数字可以进入下一页面，所以数字是超链接a
标签类型与浮动
浮动 float
定义：使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
文档流：文档中可显示对象在排列时所占用的位置/空间
脱离文档流：在页面中不占位置了。
值：left right none
特征：
1.块元素可以在一行显示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
width: 100px;
height: 200px;
background: green;
color: #fff;
float: left;
}
</style>
</head>
<body>
<div>div1</div>
<div style="background: red;">div2</div>
</body>
</html>2.按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
3.行内元素支持宽高
4.脱离文档流
浮动后面跟的元素（没有浮动）的位置是从前面的浮动元素的位置开始的
注意：非浮动元素里的内容余留出前面浮动元素的位置（盒模型的位置）
5、块元素默认宽度会被改变（包裹性）
块元素不设置宽度，那宽度就会自动变成内容所撑开的宽度
6、父级高度塌陷（破坏性）
子元素有浮动后，父级元素的高度不会自动撑开了
理解：房屋的居住人离开以后，居住人就不占位置了，父级失去子级（失去内容）就撑不起来了
7.换行不会被解析成空格
浮动后的元素就会脱离文档流，就不属于文档流的结构了，所以换行，空格跟父级没关系
文档流：文档中可显示的元素在排列时候的开始位置以及她们所占的区域
因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容
如果没有加入浮动两个div会一上一下，下面div的起始位置在第一个下面，如果加入浮动左，第二个的起始位置和第一个起始位置是一样的
脱离文档流:
指的是元素不在页面当中占位置了
定位是完全脱离文档流
浮动不是完全脱离文档流
inline-block 与float的区别
如果高度不一致的情况下，想让他们按照顺序排列可以选择inline-block
清除浮动
清除浮动的方法
1.clear
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
.div1{
float: left;
}
.div2{
clear: left;
}
</style>
<body>
<div class="div1">张</div>
<div class="div2">ying</div>
</body>
</html>clear 元素的某个方向上不能有浮动的元素
left元素的左边不能有浮动的元素 right，both与之类似。
2.给父级添加高度
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
.parent{
border: 1px solid #f00;
}
.box{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
<body>
<div class="parent">
<div class="box"></div>
</div>
</body>
</html> .parent{
border: 1px solid #f00;
height: 10px;
}有的时候是不能给父级添加高度的，所以这个方法就就用不了(比如瀑布流）
3.父级加inline-block（触发BFC）
display：inline-block
.parent{
border: 1px solid #f00;
display: inline-block;
margin: 0 auto;
}具有与上一个清除浮动一样的问题，同时加了这个元素之后就没有办法居中了
4.overflow:（触发BFC）
hidden隐藏超出的内容
如果子级有定位的话，并且这个定位超出父级的范围，那样的话就看不到了，所以不能加这个命令。
overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
5.空标签
空标签是没有内容的，但是作用是用来清除浮动的，所以不符合行为，样式，结构相分离的标准。
ie6下标签是有一个最小高度19px、解决后也会有2px的偏差
6.br换行
7.after伪类（现在最主流的方法）
after 代表选择到的元素的最后面（after伪类的内容默认是一个行内元素）
content设置的内容
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
.parent{
border: 1px solid #f00;
display: inline-block;
margin: 0 auto;
}
.box{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="parent clearfix">
<div class="box"></div>
</div>
</body>
</html>overflow
| overflow | 针对超出父级的内容如何显示 |
| visible | 默认值，超出的内容会显示出来 |
| auto | 如果内容超出了父级，那就出现滚动条。如果内容没有超出，就没有滚动条 |
| hidden | 超出的内容隐藏掉 |
| scroll | 不管内容有米有超出，都会出现滚动条 |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
.parent{
width: 100px;
height: 100px;
border: 5px solid #f00;
overflow: visible;
overflow: auto;
overflow: hidden;
overflow: scroll;
}
.parent div{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<body>
<div class="parent">
<div></div>
</div>
</body>
</html>BFC
block formatting contexts 块级元素格式化上下文
决定了块级元素如何让对它的内容布局，以及与其他元素的关系和相互作用
块级元素：父级（是一个块元素）
内容：子元素（是一个块元素）
其他元素：与内容同级别的兄弟元素
相互作用：BFC里的元素与外面的元素不会发生影响
触发BFC的方式（任意一个就可以）：
1.float的值不为none；
2.overflow的值不为visible（默认）
3.display的值为table-cell,table-caption,inline-block之一
4.position的值不为static或者relative中任何一个
| 普通文档流的布局规则 | BFC的布局规则 |
| 浮动的元素不会被父级计算高度 | 浮动的元素会被父级计算高度 |
| 非浮动元素会覆盖浮动元素的位置 | 非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC） |
| margin会传递给父级 | margin不会传递给父级 |
| 两个相邻的元素上下margin会重叠 | 两个相邻的元素上下margin不会重叠（给其中一个元素添加单独的一个父级，然后让他的父级触发BFC） |
流程控制语句
if，if……else，else if；
if有一种情况需要处理
else有两种情况需要处理
else if有多种情况需要处理
if（判断条件）{
判断条件成立的时候，执行此行代码
}else if(判断条件1）{
条件1成立的时候，执行这里的代码
}else if（判断条件2）{
条件2成立时候，执行这里的代码
}else{
以上条件都不成立，执行这里的代码
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
