1.元素浮动：#

对于块级元素，可以通过设置元素的float形式让其进行浮动，将其排放在一行，方便布局，但是同样的会造成父级元素的塌陷。采用下面的代码进行清除浮动。

1
.clearFixed::after {
2
    content: "";
3
    display: block;
4
    clear: both;
5
}

通过一个伪类选择器来进行元素的添加，谁需要清除浮动就给它设置这个属性

解释：after表示放在元素的后面，并且必须要写内容，这个是通过伪类选择的，默认是行元素，只有block的元素进行clear才会有效，clear:both是将左右两边的浮动都清除掉

2. display#

• :none ->隐藏。
• :inline ->设置为行级元素
• :block->设置为块级元素
• :inline-block设置行级块元素

1. 行级元素

• 多个元素占一行
• 不能设置宽高
• eg.span``a

2. 块级元素(p)

• 自己占一行
• 可以设置宽高
• eg.div``p``h1-h6``ul li``table

3. 行级块元素

• 多个元素占一行
• 可以设置宽高
• eg.img``input``button

visibility:hidden->元素不可见，但是占据宽高

3.选择器#

1. 子代选择器

语法 ：选择器 > 选择器 表示第一个选择器的第一个子代，再往后面就选不了

2. 相邻兄弟选择器

语法 ：选择器 + 选择器表示只选择第一个选择器的下面一个紧邻的选择器

3. 伪类选择器

• :hover 当鼠标滑入的时候有效果(最常用)
• :link 当没有访问过的时候产生效果
• :visited 点击了后访问过产生效果
• :active 激活，当你鼠标点在这个标签上，没有离开时候的效果

4. 伪元素选择器

• ::after 在选择的标签的最后插上新的内容(行级元素)
• ::before 在选择的标签的最前面插上新的内容(行级元素)

注：但是after和before元素是必须要加上content属性，可以给空

5. 属性选择器

语法： 标签/属性 [属性名] \[属性名 == '某属性值'] 表示选择标签/属性下的属性为什么的

1
<div class="a">
2
    <div id="id">
3
        你好
4
    </div>
5
</div>

1
div[id] {
2
    background: pink;
3
}
4
div[id ='id'] {
5
    background: pink;
6
}

4.img三像素问题#

导致原因：img的display默认值inline-block导致

解决：设置display：block;

5.盒子模型#

Css 盒子模型： 内容+padding+border +margin

层级：内容->padding ->border -> margin

width 属性：就是内容的宽度

对于属性的设置：

• 可以单独对每个top left right bottom设置
• 给一个值：每个边的都是等距的
• 给两个值：垂直 水平分别设置
• 给四个值：上右下左，顺时针方向

6.定位#

position字段

1. relative

• 相对于自己初始的位置
• 定位后空间不释放

2. absolute

• 位置相对于自己已经定位的祖先元素，一直找到最上层body
• 定位空间释放

3. fixed固定定位(一般的广告就是)

• 位置相对可视页面
• 定位后空间释放

7.实现文字的省略号效果#

1
.选择器 {
2
    overflow: hidden;
3
    text-overflow:ellipsis;
4
    white-space: nowrap;
5
}

8.nth-of-type#

正常选用nth-of-type不用nth-of-child

并且可以通过公式来全选

1
#使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

9.首行缩进#

text-indent:缩进段落的第一行