CSS（二）

高度塌陷的问题:

在浮动布局中，父元素的高度默认是被子元素撑开的，

当子元素浮动后，其会完全脱高文档流，子元素从文档流中脱高

将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理!

BFC(Block Formatting Context) 块级格式化环境

BFC是一个CSs中的一个隐含的属性，可以为一个元素开启BFC

开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点:

1.开启BFC的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC:

1、设置元素的浮动（不推荐）

2、将元素设置为行内块元素（不推荐）

3、将元素的overflow设置为一个非visible的值

常用的方式为元素设置overflow:hidden 开启其BFC以使其可以包含浮动元素

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，

可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear

作用:清除浮动元素对当前元素所产生的影响

可选值:

left清除左侧浮动元素对当前元素的影响

right清除右侧浮动元素对当前元素的影响

both清除两侧中最大影响的那侧

原理:

设置清除浮动以后。浏览器会自动为元素添加一个上外边距，

以使其位置不受其他元素的影响

用CSS清除高度塌陷

在标签最后添加：：after伪元素

：：after{

Content：” ”;添加空串

Display:block;让空串编程块元素

Clear:both;清除浮动影响

}

用HTML清除高度塌陷是在最后添加一个空div，让其撑开父元素的高度

解决外边距重叠

:before{content:” ”;display: table;}

clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题。当你在遇到这些问题时，直接使用clearfix;

table既能解决外边距重叠，又能解决高度塌陷；

.clearfix: :before;

clearfix: :after{

content :” ”’;

display: table;

clear: both;}

定位(position)

定位是种更加高级的布局手段

通过定位可以将元素摆放到页面的任意位置

使用position属性来设置定位

可选值:

static默认值，元素是静止的没有开启定位

relative开启元素的相对定位

absolute开启元素的绝对定位

fixed开启元素的固定定位

sticky开启元素的粘滞定位

相对定位:

当元素的position属性值设置为relative时则开启 了元素的相对定位

相对正位的特点

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

2.相对定位是参照于元素在文档流中的位置进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱高文档流

5.相对定位不改变元素的性质块还是块，行内元素还是行内元素

偏移量(offset)

当元素开启了定位以后，可以通过偏移量来设置元素的位置

top定位元素和定位位置上边的距高

bottom定位元素和定位位置下边的距离

定位元素垂直方向的位置由top和bottom两个属性来控制

通常情况下我们只会使用其中一个

top值越大，定位元素越向下移动

bottom值越大，定位元素越向上移动

left定位元素和定位位置的左侧距离

right 定位元素和定位位置的右侧距离

定位元素水平方向的位置由left和right两个属性控制

通常情况下只会使用一个

left越大元素越靠右

right越大元素越靠左

绝对定位

当元素的posit ion属性值设置为absolute时，则开启了元素的绝对定位

绝对定位的特点:

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2.开启绝对定位后，元素会从文档流中脱高

3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4.绝对定位会使元素提升一个层级

5.绝对定位元素是相对于其包含块进行定位的

包含块( containing block )

正常情况下:

包含块就是离当前元素最近的祖先块元素

绝对定位的包含块:

包含块就是离它最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位则根元素就是它的包含块

Html (根元素.初始包含块)

固定定位:

将元素的position属性设置为fixed则开启了元素的固定定位

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样

唯一不同的是固定定位永远参照于浏览器的视口进行定位

固定定位的元素不会随网页的滚动条滚动

粘滞定位

当元素的position属性设置为sticky时则开启了元素的粘滞定位

粘滞定位和相对定位的特点基本一致，

不同的是粘滞定位可以在元素到达某个位置时将其固定

水平布局

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right =包含块的内容区的宽度

对于开启了定位元素，可以通过z- index属性来指定元素的层级

z-index需要一个整数作为参数， 值越大元素的层级越高

元素的层级越高越优先显示

如果元素的层级一样，则优先显示靠下的元素

祖先的元素的层级再高也不会盖住后代元素

字体相关的样式

color用来设置字体颜色

font-size字体的大小和font-size相关的单位

em相当于当前元素的一个font-size

rem相对于根元素的一个font-size

font- family字体族(字体的格式)

可选值:

serif衬线字体

sans -serif非衬线字体

monospace等宽字体

指定字体的类别，浏览器会自动使用该类别下的字体

font- family可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推

图标字体(iconfont)

在网页中经常需要使用一些图标，可以通过图片来引入图标

但是图片大小本 身比较大，并且非常的不灵活

所以在使用图标时，我们还可以将图标直接设置为字体，

然后通过font- face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

图标字体(iconfont)

在网页中经常需要使用些图标， 可以通过图片来引入

但是图片大小本身比较大，并且非常的不灵活

所以在使用图标时，我们还可以将图标直接设置为字字体然后通过font- face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标

font awesome使用步骤

1.下载https 😕/fontawesome : com/

2.解压

3 ,将cssIDwebfont s移动到项目中

4.将all.css引入到网页中

5.使用图标字体

直接通过类名来使用图标字体

classe"fas fa-bel1"

classe"fab fa- access ible icon"

可以将行高设置为和高度一样的值，使单行文字在一个 元素中垂直居中

行高(line height)

行高经常还用来设置文字的行间距

行间距.行高”字体大小

行高指的是文字占有的实际高度

可以通过line -hei ght来设置行高

行高可以直接指定一个大小 (px em)

也可以直接为行高设置一个整数

如果是一个整数的话，行高将会是字体的指定的倍数

字体框

字体框就是字体存在的格子，设置font -size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

font可以设置字体相关的所有属性

语法:

font:字体大小/行高字体族

行高可以省略不写如果不写使用默认值

font weight字体的加粗

可选值

noreal默认值不加粗

bold加粗

100- 900九个级别

font-style字体的风格

noreal正常的

italic斜体

text-align文本的水平对齐

可选值，

left 左侧对齐

right 右对齐

center居中对齐

justify两端对齐

vertical-align设置元素垂直对齐的方式

可选值

baseline默认值基线对齐

top顶部对齐

bottom底部对齐

middle居中对齐

text-decoration 设置文本修饰

可选值:

none什么都没有

underline下划线

line - through删除线

overline上划线

white-space设置网页如何处理空白

可选值:

normal正常

nowrap不换行

pre保留空白

background- image设置背景图片

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满

如果背景的图片大于元素，将会一个 部分背景无法完全显示