第三周周报(考核总结)

选择器的种类

1. ID选择器

2. 元素选择器

3.类选择器

4.通配符选择器

5. 属性选择器

6.伪类选择器

：hover

：link
：visited

：active

“爱恨法则”

权重：

1.千位:如果是内联样式，记1，否则记0

2.百位:等于选择器中所有id选择器的数量

3.十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4.个位：等于选择器中所有元素选择器、伪元素选择器的数量

三栏布局：aside表示侧边栏，main表示主区域，那么给左右两个侧边栏分别左右浮动，而主区域用overflow：hidden    创建一个BFC区域即可

居中方式：

# 居中总结

居中: 盒子在其包含块中居中

## 行盒 (行块盒)

直接设置行盒(行块盒) 父元素    ```text-align:center```

## 常规流块盒水平居中

先定宽，然后设置左右margin为auto

## 绝对定位元素的水平居中

定宽，设置左右的坐标为0，(left:0; right:0;)，将左右margin设置为auto

>实际上，固定定位是绝对定位的特殊情况     固定定位也这样做

## 单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

## 行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果

## 绝对定位的垂直居中

定高，设置上下的坐标为0，将上下margin设置为auto

高度坍塌问题：

.clearfix::after{

content:"";

display:block;

clear:both;

}

然后给浮动元素的父元素设置类样式clearfix

其次，给浮动元素的父元素overflow：hidden也可以解决高度坍塌

图片白边问题：

## 图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往出现空白

1. 设置父元素的字体大小为0

2. 将图片设置为块盒  display:block   **推荐**