### CSS 属性
####文字属性
```css
1.样式
fs font-style: italic;倾斜的
fsn font-style: normal;
2.粗细
格式： font-weight: bold;
单词取值:bold 加粗 bolder 比加粗还要粗 lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字
3.大小
格式：font-size: 30px;
单位：px（像素 pixel
fz30 font-size: 30px;
4.字体
格式：font-family:"楷体";
注意点：
1.如果取值是中文， 需要用双引号或者单引号括起来
2.设置的字体必须是用户电脑里面已经安装的字体
ff font-family:;
/*1.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案
格式:font-family:"字体1", "备选方案1", ...;
2.如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文
**注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文前面
3.补充在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: "Times New Roman"/Arial
*/
5.缩写格式:
font: style weight size family;
font:italic bold 10px "楷体";
注意点:
1.在这种缩写格式中有的属性值可以省略
sytle可以省略 weight可以省略
size不能省略 family不能省略
size一定要写在family的前面, 而且size和family必须写在所有属性的最后
```
#### 文本属性
```css
1.文本装饰的属性
格式:text-decoration: underline;
快捷键:
td text-decoration: none;去掉
tdu text-decoration: underline;下划线
tdl text-decoration: line-through;删除线
tdo text-decoration: overline;上划线
2.文本水平对齐的属性
格式: text-align: right;
取值:
left 左 right 右 center 中
3.文本缩进的属性
格式: text-indent: 2em; ti2e
取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽度
4.颜色属性--在CSS中如何通过color属性来修改文字颜色?
格式: color: 值;
5.颜色取值: 英文单词 rgb rgba 16进制
5.1 rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)
第一个数字就是用来设置三原色的光源元件红色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
只要让红色/绿色/蓝色的值都一样就是灰色，而且如果这三个值越小那么就越偏黑色, 越大就越偏白色
例如: color: rgb(200,200,200);
5.2 rgba
rgba中a呢代表透明度, 取值是0-1, 取值越小就越透明
例如: color: rgba(255,0,0,0.2);
5.3 十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如: #FFEE00 FF表示R EE表示G 00表示B
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位，例如:
#FFEE00 == #FE0
/*
什么是十六进制?
十六进制和十进制一样都是一种计数的方式
在十进制中取值范围0-9, 逢十进一
在十六进制中取值范围0-F, 逢十六进一
9
a 10
b 11
c 12
d 13
e 14
f 15
10 16
11 17
12 18
十六进制和十进制转换的公式
用十六进制的第一位*16 + 十六进制的第二位 = 十进制
15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0
*/
```
### CSS 选择器
#### 标签选择器
```css
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:
标签名称 {
属性: 值;
}
```
#### id 选择器
```css
作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:
#id名称{
属性:值;
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
```
#### 类选择器
```css
作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:
.类名{
属性:值;
}
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
```
#### 后代选择器
```css
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:
标签名称1 标签名称2 {
属性: 值;
}
先找到所有名称叫做"标签名称1"的标签,
然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签,
然后在设置属性 div p {
}
注意点: 1后代选择器必须用空格隔开 2后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3后代选择器不仅仅可以使用标签名称,
还可以使用其它选择器 4后代选择器可以通过空格一直延续下去 --> <!--div ul li
p-->;
```
#### 子元素选择器
```css
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有<u>直接子元素</u>名称叫做"标签名称2"的元素
注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
> <!--
> 1.后代选择器和子元素选择器之间的区别?
> 1.1
> 后代选择器使用空格作为连接符号
> 子元素选择器使用>作为连接符号
> 1.2
> 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
> 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
>
> 2.后代选择器和子元素选择器之间的共同点
> 2.1
> 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
> 2.2
> 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
> 选择器1>选择器2>选择器3>选择器4{}
>
> 3.在企业开发中如何选择
> 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
> 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
```
#### 交集选择器
```css
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:
选择器1选择器2 {
属性: 值;
}
注意点: 1选择器和选择器之间 * * * 没有任何的连接符 * * 号 *
2选择器可以使用标签名称 / id名称/class名称 3交集选择器仅仅作为了解, 企业开发中用的并不多;
```
#### 并集选择器
```css
作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2 {
属性: 值;
}
注意点: 1并集选择器必须使用, 来连接 2选择器可以使用标签名称 / id名称/class名称;
```
#### 兄弟选择器
```css
1.相邻兄弟选择器 CSS2 h1 + p {
}
紧跟h1后面的p标签
作用: 给指定选择器***后面紧跟***的那个选择器选中的标签设置属性
格式:
选择器1+选择器2 {
属性: 值;
}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
2.通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
h1~p {
}
h1后面的所有p
格式:
选择器1~选择器2 {
属性: 值;
}
注意点: 1.通用兄弟选择器必须用~连接
2通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中;
```
#### 序选择器
```css
1.同级别的第几个
:first-child 选中同级别中的第一个标签 p:first-child选中同级别中第一个p标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增
```
#### 属性选择器
```css
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
p[id]找到p标签中有id属性的
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
`1.属性的取值是以什么开头的`
`[attribute^=value] CSS3`
`2.属性的取值是以什么结尾的`
`[attribute$=value] CSS3`
`3.属性的取值是否包含某个特定的值得`
`[attribute*=value] CSS3`
```
#### 通配符选择器
```css
作用: 给当前界面上所有的标签设置属性
格式:
* {
属性: 值;
}
注意点: 由于通配符选择器是设置界面上所有的标签的属性,
所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多,
那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器;
```
### CSS 三大特性
#### 继承性
```css
作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
body {
}
```
#### 层叠性
```css
作用: 层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
CSS全称 Cascading StyleSheet
```
#### 优先级
```css
作用: 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时,
如何层叠就由优先级来确定 2优先级判断的三种方式 2.1间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的 2.2相同选择器 (直接选中)
如果都是直接选中, 并且都是同类型的选择器,
那么就是谁写在后面就听谁的 2.3不同选择器 (直接选中) 如果都是直接选中, 并且不是相同类型的选择器,
那么就会按照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认;
```
**!important**
```css
作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
* {
color: blue !important;
font-size: 10px;
}
注意点: 1.!important只能用于直接选中 2通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值得分号前面;
```
**优先级的权重**
```css
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
2.权重的计算规则
2.1首先先计算选择器中有多少个id, id多的选择器优先级最高
2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
也就是说优先级如果一样, 那么谁写在后面听谁的
注意点:
1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
```
### div 和 span
```css
1.什么是div?
作用: 一般用于配合css完成网页的基本布局
2.什么是span?
作用: 一般用于配合css修改网页中的一些局部信息
3.div和span有什么区别?
1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签
4.容器级的标签和文本级的标签的区别?
容器级的标签中可以嵌套其它所有的标签
文本级的标签中只能嵌套文字/图片/超链接
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis strong em ins del ...
注意点:
哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套
```
```html
<style>
.header {
width: 980px;
height: 100px;
background: red;
margin: auto;
margin-bottom: 10px;
}
.content {
width: 980px;
height: 500px;
background: green;
margin: auto;
margin-bottom: 10px;
}
.footer {
width: 980px;
height: 100px;
background: blue;
margin: auto;
}
.logo {
width: 200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.nav {
width: 600px;
height: 50px;
background: yellow;
float: right;
margin: 20px;
}
.aside {
width: 250px;
height: 460px;
background: purple;
float: left;
margin: 20px;
}
.article {
width: 650px;
height: 460px;
background: deepskyblue;
float: right;
margin: 20px;
}
span {
color: red;
}
</style>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
```
### CSS 元素的显示模式
```css
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素
1.什么是块级元素, 什么是行内元素?
块级元素会独占一行
行内元素不会独占一行
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis stong <u>em</u> ins del ...
块级元素
p div h ul ol dl li dt dd
行内元素
span buis strong em ins del
2.块级元素和行内元素的区别?
2.1块级元素
<u>*独占一行</u>
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示
2.2行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
**行内元素是不可以设置宽度和高度的**
2.3行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
### 转换CSS元素的显示模式
设置元素的display属性
2.display取值
block 块级
inline 行内
inline-block 行内块级
3.快捷键
di display: inline;
db display: block;
dib display: inline-block;
**
```
**再看视频百度首页项目**
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>32-百度首页</title>
<style>
body{
font-size: 14px;
color: #666;
}
div{
text-align: center;
}
/*.header{*/
/*height: 200px;*/
/*}*/
.content{
height: 250px;
}
/*.footer{*/
/*height: 200px;*/
/*}*/
.header,.footer{
height: 200px;
}
.logo{
height: 150px;
}
input[type=text]{
width: 400px;
height: 30px;
}
input[type=submit]{
width: 100px;
height: 30px;
}
.search{
height: 60px;
}
.bk{
height: 120px;
}
.aq{
height: 40px;
}
.tk{
height: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/bdlogo.gif" alt="">
</div>
<div class="nav">
<a href="#">新 闻</a>
<strong>网 页</strong>
<a href="#">贴 吧</a>
<a href="#">知 道</a>
<a href="#">音 乐</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">地 图</a>
</div>
</div>
<div class="content">
<div class="search">
<form action="http://www.baidu.com">
<input type="text" name="" id="">
<!--注意: 没有默认标题的原因是value=""-->
<input type="submit" value="百度一下">
</form>
</div>
<div class="bk">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a>
|
<a href="#">更多>></a>
</div>
<div>
<img src="images/ic.jpg" alt="">
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
</div>
<div class="footer">
<div class="aq">
<a href="#">把百度设为主页</a>
<a href="#">安装百度卫士</a>
</div>
<div class="tk">
<a href="#">加入百度推广</a>
|
<a href="#">搜索风云榜</a>
|
<a href="#">关于百度</a>
|
<a href="#">About Baidu</a>
</div>
<div>
©2016 Baidu 使用百度前必读 京ICP证666号
</div>
</div>
</body>
</html>
```
### 背景
CSS 背景属性用于定义 HTML 元素的背景。
**标签的背景颜色**
```css
在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的
bc background-color: #fff;
```
**设置背景图片**
```css
在CSS中有一个叫做background-image: url();的属性, 就是专门用于设置背景图片的
快捷键:
bi background-image: url();
注意点:
1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
```
**背景图片的平铺方式**
```css
在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
快捷键
bgr background-repeat:
应用场景:
可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
```
**背景图片的位置**
```css
在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
1.格式:
background-position: 水平方向 垂直方向;
background-position：center top;/*可以让最重要的部分位于网站中间，不随窗口变化而变化*/
2.取值
2.1具体的方位名词
水平方向: left center right
垂直方向: top center bottom
2.2具体的像素
例如: background-position: 100px 200px;
快捷键:
bp background-position: 0 0;
注意点:
同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色
```
**背景关联方式**
```css
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式
在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的
格式
background-attachment：scroll;
取值：
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
快捷键:
ba background-attachment:;
```
**背景属性缩写的格式**
```css
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
background: red url(images/girl.jpg) no-repeat left bottom;
快捷键:
bg+ background: #fff url() 0 0 no-repeat;
注意点：
background属性中， 任何一个属性都可以被省略
```
**背景图片和插入图片区别**
```css
1.1背景图片仅仅是一个装饰, 不会占用位置，插入图片会占用位置
1.2背景图片有定位属性, 所以可以很方便的控制图片的位置，插入图片没有定位属性, 所有控制图片的位置不太方便
1.3插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
```
**背景图片拼接**
div 嵌套----设置两个 div，把大的图片的 div 里面嵌入小的 div，然后给小图片定位
背景定位--小的 div 设置与大 div 一样的宽高，然后给小的 div 设置背景图片定位
```html+JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>39-背景图片练习</title>
<style>
.box1 {
width: 1024px;
height: 768px;
background-image: url(images/bybg.jpg);
}
.box2 {
/*background-color: red;*/
width: 1024px;
height: 768px;
background-image: url(images/bybottom.png);
background-position: center bottom;
background-repeat: no-repeat;
/*background-position: 100px 200px;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
```
**CSS 精灵图** （再看视频，多练）
```css
CSS精灵图是一种图像合成技术
2.CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
```
### 盒模型
#### 边框
边框就是环绕在标签宽度和高度周围的线条,围绕在内边距和内容外的边框
**边框属性的格式**
```css
连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;
border: 1px solid #000; bd+
连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
连写(分别设置四条边的边框)
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
3非连写(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
```
#### 内边距
边框和内容之间的距离就是内边距
```css
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2连写
padding: 上 右 下 左;
注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色
```
#### 外边距
标签和标签之间的距离就是外边距
```css
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
margin: 上 右 下 左;
注意点:
外边距的那一部分是没有背景颜色的
span和span之间的间隙不是外边距，是回车效果
*{
padding:0;
margin:0;
}
外边距合并现象;默认布局的垂直方向上, 默认情况下外边距会出现合并现象, 谁的外边距比较大就听谁的
```
### CSS 盒子模型
CSS 盒子模型仅仅是一个形象的比喻, HTML 中所有的标签都是盒子
结论 1.在 HTML 中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
**宽度/高度**
```css
1.内容的宽度和高度
就是通过 width/height 属性设置的宽度和高度
2.元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证
3.元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
规律:
1.增加了 padding 之后元素的宽高也会发生变化
2.如果增加了 padding 之后还想保持元素的宽高, 那么就必须减去内容的宽高
1.增加了 border 之后元素的宽高也会发生变化
2.如果增加了 border 之后还想保持元素的宽高, 那么就必须减去内容的宽高
```
**盒子的 box-sizing 属性**
```css
CSS3 中新增了一个 box-sizing 属性, 这个属性可以保证我们给盒子新增 padding 和 border 之后, 盒子元素的宽度和高度不变
box-sizing 属性是如何保证增加 padding 和 border 之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加 padding 和 border 之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
box-sizing :content-box;
元素的宽高 = 边框 + 内边距 + 内容宽高
box-sizing :border-box;
元素的宽高 = width/height 的宽高
```
注意点: 1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来 2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑 padding, 其次再考虑 margin
margin 本质上是用于控制兄弟关系之间的间隙的
注意点: 1.在嵌套关系的盒子中, 我们可以利用 margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效
**清空默认的边距**
```
*{
margin: 0;
padding: 0;
}
```
通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
#### 盒子居中和内容居中
```css
text-align: center;设置盒子中存储的文字/图片水平居中
margin:0 auto;让盒子自己水平居中
**行高**-----行高指的是每行内容的高度（盒子高指的是元素的高度）
line-height: 20px;
规律: 1.文字在行高中默认是垂直居中的
一行文字在盒子的高度中是垂直居中，只需要设置这行文字的"行高等于盒子的高"即可
盒子中有多行文字垂直居中， 只能通过设置 padding 来让文字居中
<!--开发小知识-->：利用firework还原设计图上的字体和字号(**看视频**G:\知播鱼\1.从零玩转HTML5＋CSS3精讲上(一)\第13章：盒模型/118)
注意点:
1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差
2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差
3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离
-->
**还原设计稿项目（视频）**G:\知播鱼\1.从零玩转 HTML5 ＋ CSS3 精讲上(一)\第 13 章：盒模型
```
### 网页的布局方式
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
#### 1.标准流排版方式
```css
1.1 浏览器默认的排版方式
1.2 在 CSS 中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
1.3 在标准流中有两种排版方式, 如果元素是块级元素, 那么就会垂直排版；如果元素是行内元素/行内块级元素, 那么就会水平排版
```
#### 2.浮动流排版方式
```css
2.1 浮动流是一种"半脱离标准流"的排版方式
2.2 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
float: left;
float: right;
特点: 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的，都可以水平排版 2.都可以设置宽高
**浮动元素脱标: 脱离标准流**
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
**浮动元素排序规则**
1.1 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
1.2 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
1.3 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
**字围**--浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
**贴靠现象** 1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示 2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠 3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
**网页布局小练习**
```
#### 清除浮动
**1.清除浮动的第一种方式**
```css
给前面一个父元素设置高度注意点: 在企业开发中, 我们能不写高度就不写高度,
所以这种方式用得很少;
```
**2.清除浮动的第二种方式**
```css
给后面的盒子添加 clear 属性
clear 属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加 clear 属性之后, 那么这个属性的 margin 属性就会失效
```
**3.清除浮动的第三种方式**
```css
隔墙法
2.外墙法
2.1 在两个盒子中间添加一个额外的块级元素<div class="wall h20"></div>
2.2 给这个额外添加的块级元素设置 clear: both;属性
.wall{
clear: both;
}
.h20{
height: 20px;
background-color: skyblue;
}
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<div class="wall h20"></div>/*内墙法位置*/
</div>
<!--<div class="wall h20"></div>-->/*外墙法位置*/
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
注意点:
外墙法它可以让第二个盒子使用 margin-top 属性
外墙法不可以让第一个盒子使用 margin-bottom 属性
3.内墙法
3.1 在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2 给这个额外添加的块级元素设置 clear: both;属性
注意点:
内墙法它可以让第二个盒子使用 margin-top 属性
内墙法它可以让第一个盒子使用 margin-bottom 属性
4.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
5.在企业开发中不常用隔墙法来清除浮动，违背了结构与样式分离原则
```
**4.清除浮动的第四种方式**
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过 CSS 代码添加了内墙, 其它特性和内墙法都一样
```css
.box1::after{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
```
注意点:
IE6 中不支持这种方式, 为了兼容 IE6 必须给前面的盒子添加\*zoom:1;属性
```css
.box1{
/*兼容IE6*/
*zoom:1;
```
**5.清除浮动的第五种方式**
```css
1.overflow: hidden;作用
1.1 可以将超出标签范围的内容裁剪掉
1.2 清除浮动--找到第一个盒子添加 overflow: hidden;属性，也不兼容，
1.3 可以通过给外面的盒子设置 overflow: hidden;让里面的盒子设置 margin-top 之后, 外面的盒子不被顶下来
3.定位流排版方式
```
**伪元素选择器**
```css
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
2.格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素
标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素
div::after {
/*指定添加的子元素中存储的内容*/
content: "么么哒";
/*指定添加的子元素的宽度和高度*/
width: 50px;
/*height: 50px;*/
/*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/
height: 0;
background-color: pink;
/*指定添加的子元素的显示模式*/
display: block;
/*隐藏添加的子元素*/
visibility: hidden;
}
<div>
<!--<p>爱你</p>-->
我是文字
<!--<p>么么哒</p>-->
</div>
```
