>### A.今天学什么？
#### 1.盒子模型如何传参
```
不像之前使用 margin-top padding-button 这样针对传参
而是使用 margin: ;来进行传参
// html
<div></div>
// css pdding 与 margin 传参方式相同
div{
width: 100px;
height: 100px;
background-color: red;
/* margin: 100px;
只传一个参数，四个方向都发生改变
*/
/*margin: 100px;*/
/* margin: 100px 200px;
只传2个参数，第一个参数为上下，第二个参数为左右
*/
/*margin: 100px 200px;*/
/* margin: 100px 200px 300px;
传三个参数 则 第一个为 上，第二个为左右，第三个为下
*/
/*margin: 100px 200px 300px;*/
/* margin: 100px 200px 300px 400px;
传4个参数，则按照顺时针方向，依次为 上 右 下 左
*/
margin: 100px 200px 300px 400px;
}
```
#### 2.`html`标签分类
- ##### 2.1块元素 -- `block`
```
// html
<!-- 块元素
特点：
1.独占一行
2.能设置width，height
3.盒子模型--可以设置margin、padding
-->
<div>div</div>
<p>p</p>
<h1>h1</h1>
<ul>
<li>li</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
// css
div{
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
```
- ##### 2.2内联元素 -- `inline`
```
// html
<!-- 内联元素
特点：
1.并排显示
2.不能设置width，height
3.盒子模型--不能设置margin-top、margin-bottom，可以设置padding
并且，padding不会影响内联块元素的高度，但是会影响其背景高度
也就是说 与padding-top、padding-bottom有关
也就造成了，设置背景色后，padding导致隐藏上方的其他元素 --- 下方的会覆盖其背景色
但是padding-left、padding-right 不会导致这种情况，而相当于是设置的内联块元素的宽度
甚至会出现超出父元素范围的情况，这时候需要 overflow: hidden;
-->
<a href="">a</a> <span>span</span> <strong>strong</strong> <i>i</i> <em>em</em>
//css
a{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
margin-left: 50px;
padding: 100px;
}
```
- ##### 2.3内联块元素 -- `inline-block`
```
// html
<!-- br 换行标签 -->
<br />
<br />
<!-- 内联块标签
特点：
1.并排显示
2.能够设置width，height
3.能够设置 margin、padding，但是高度的改变会影响同行内联元素
-->
<img src="images/logo2.png" alt=""> <button>按钮</button> <input type="text" />
// css
button{
width: 100px;
height: 100px;
padding: 50px 0 0 50px;
margin: 50px;
}
```
#### 3.几种类型元素的水平居中
- ##### 3.1块元素居中 -- `block`
```
// HTML
<div>div</div>
```
```
// css
div{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
/* 默认display: block; */
}
```
- ##### 3.2内联元素居中 -- `inline`
```
//HTML
<a href="">a标签</a>
```
```
a{
background-color: yellow;
width: 100px;
height: 100px;
margin: 0 auto;
/* a标签中文字水平居中 */
text-align: center;
/* a标签中文字垂直居中 */
line-height: 100px;
/* 去下划线 */
text-decoration: none;
display: block;
/* 默认display: inline; */
}
```
- ##### 3.3内联块元素居中 -- `inline-block`
```
// html
<button>按钮</button>
// css
button{
background-color: pink;
width: 100px;
height: 100px;
/* 内联块元素也无法用margin水平居中，因为其不是独占一行 */
margin: 0 auto;
/* 默认display: inline-block; */
}
```
- ##### 3.4不改变display属性来达到水平居中效果 -- 给父级元素加上属性 text-align: center;
```
// html
<div class="parent">
<img src="images/logo2.png" alt="">
<br />
<a href="">hello world</a>
</div>
// css
/* 给它的父级元素加text-align: center; */
.parent{
text-align: center;
}
```
#### 4.几种选择器补充
- ##### 4.1分组选择器 -- 选中的元素都使用该属性
```
// html
<div>div</div>
<p>hello world</p>
<h1>h1</h1>
// css
/* 分组选择器
代表这些元素都使用这个属性
*/
div,p,h1{
color: pink;
}
```
- ##### 4.2后代选择器 -- 指定某元素的某后代元素使用该属性
```
// html
<div class="parent">
<p>hello my friend</p>
</div>
// css
/* 后代选择器
class为parent的元素的后代p使用这个属性
*/
.parent p{
color: deepskyblue;
}
```
- ##### 4.3兄弟选择器
- 1. div+p 可选择紧接在另一元素后的元素，且二者有相同父元素。
```
// html
<div class="parent2">hello my sister</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
// css
/* 兄弟选择器-1
选中class为parent2的元素后的第一个p元素，
而不是该元素和这个p元素都使用该属性
两者要拥有相同的父元素
*/
.parent2+p{
color: red;
}
```
- 2. div~p 可选中紧接在另一元素后的所有该元素，且二者有相同父元素。
```
// html
<div class="parent3">hello my sisters</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
// css
/* 兄弟选择器-2
可选中紧接在另一元素后的所有该元素，且二者有相同父元素。
*/
.parent3~p{
color: blue;
}
```
- ##### 4.4伪类选择器
```
// html
<input class="input1" type="text" />
// css
/* 伪类选择器 */
/* focus 聚焦，鼠标点击输入框后，输入框背景变为红色 */
/* hover 鼠标放上去，不需要点击就会变色 */
.input1:focus{
background-color: red;
}
```
- ##### 4.5伪元素选择器
```
// html
<div class="fake_class">hello world</div>
// css
/* 伪元素选择器 */
/* 用选择器生成一个元素，内容为 "前面"
设置display为块元素，所以独占一行
这个元素具有一切元素的特征，可以设置宽高等
*/
/* before 在 .fake_class 的这个元素的前面 */
/* after 在 .fake_class 这个元素的后面 */
.fake_class:before{
content: "前面";
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: deepskyblue;
color: #333;
display: block;
}
```
- ##### 4.6属性选择器
```
// html
<p class="one"> hello property</p>
// css
/* 属性选择器 */
/* 选择属性为 one 的p元素 */
p[class=one]{
width: 100px;
height: 100px;
background-color: deeppink;
color: #333;
}
```
#### 5.选择器的优先级别排序
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
##### 权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
- 1、!important，加在样式属性值后，权重值为 10000
- 2、内联样式，如：style=””，权重值为1000
- 3、ID选择器，如：#content，权重值为100
- 4、类，伪类和属性选择器，如： content、:hover 权重值为10
- 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
- 权重相同时，后面的覆盖前面的
```
// html
<p class="one" id="two">hello world</p>
// css
/* 这里id选择器权重最高，为100，所以颜色为绿色
权重相同时，后面的会覆盖前面的
*/
p{
color: red;
}
.one{
color: yellow;
}
#two{
color: green;
}
/* 这里可以看到，两个id选择器相同，后面的覆盖了前面的 */
#two{
color: brown;
}
```
#### 6.`css`背景
- ##### 6.1 背景一些常用属性
- background-color 背景颜色
- background-image 背景图片 ./ 当前目录路径 ../上级目录路径
- background-repeat 设计图片重复
- background-position 图片位置 可以用来设置雪碧图 x y
```
// html
<div class="one"></div>
// css
.one{
width: 100px;
height: 100px;
/* background-color 背景颜色 */
background-color: #eee;
/* background-image 背景图片 */
background-image: url("images/icon1.png");
/* background-repeat 设置图片重复几次
no-repeat 不重复
repeat-x x轴上重复
repeat-y y轴上重复
repeat 重复，默认值
inherit 指定background-repea属性设置应该从父元素继承
*/
background-repeat: no-repeat;
/* background-position: x y; 设置图片位置
background-position-x x方向偏移量
background-position-y y方向偏移量
*/
background-position-x: 30px;
background-position-y: 30px;
/* 第一个参数为水平方向 第二个为垂直方向，不同于margin等 */
background-position: center center;
}
```
- ##### 6.2背景吸附
- background-attachment 背景是否相对浏览器固定
```
// html
<div class="two"></div>
<div class="three"></div>
// css
/* 背景吸附 */
.two{
/* 子元素不给width，它会继承父元素的宽度
只发生在块元素之间
*/
/* width: 100%; */
height: 468px;
background-color: #eee;
background-image: url("images/banner.jpg");
/* background-attachment:scroll|fixed
默认值为scroll
fixed背景图片不会随鼠标的滚动而滚动，相当于固定定位
而且如果设置为平铺重复的话，鼠标滚动可以看到整张图都是页面的背景
可以翻到更多的地方
*/
background-attachment: fixed;
}
.three{
height: 800px;
background-color: pink;
}
```
- ##### 6.3背景大小
- background-size 设置背景大小 x y
```
// html
<div class="four"></div>
// css
/* 背景大小 */
.four{
width: 800px;
height: 400px;
background-image: url("images/down.jpg");
background-repeat: no-repeat;
background-color: red;
/* background-size: x y;
注意，如果不是等比大小，容易造成图片拉伸 慎用
*/
background-size: 100% 100%;
}
```
- ##### 6.4雪碧图、背景简写
- 利用background-position 来达到一图多用的效果，因为图片加载需要时间，多次使用一张图可以优化网页浏览体验
- 背景简写 使用 background: ;
```
// html
<div class="one"></div>
// css
.one{
width: 18px;
height: 18px;
/*background-color: #333;
background-image: url("images/icons_type.png");
background-repeat: no-repeat;
background-position: -19px 0;*/
/* 背景简写 */
background: #333 url("images/icons_type.png") no-repeat -19px 0;
}
```
