css知识点总结2超详细

css知识点总结2

文档流

元素在文档流中的特点
1.块元素

• 块元素在文档流中会独占一行，块元素向上向下排列
• 块元素会在文档流中默认宽度是父元素的百分之百
• 块元素在文档流中的高度默认被内容撑开
• 块元素在文档流中默认垂直排列

2.内联元素

• 内联元素在文档流中只占有自身大小，会默认从左向右排列，如果一行不足容纳所有的内联元素，则换到下一行，继续自左向右
• 在文档流中，内联元素的宽度和高度默认都被内容撑开

3.当元素的高度的值为auto时此时指定的内边距不会影响可见框的大小，而是自动修改宽度，好适应内边距。

浮动

使用float控制元素浮动，从而脱离文档流

• none，默认值，元素默认在文档流中排列
• left，元素会立即脱离文档流，向页面中的左侧浮动
• right，同上，向右
• 作为元素设置浮动以后元素会立即脱离文档流，下面的元素立即上移
• 元素浮动以后，会尽量向页面的左上右上浮动，直到遇到父元素的边框或者其它的浮动元素
• 浮动元素不会超过他上边的兄弟元素
• 浮动的元素不会覆盖文字，文字会自动环绕在浮动元素周围，所以我们可以通过浮动设置文字环绕图片的效果
• 当元素设置浮动后，元素会完全脱离文档流，块元素脱离文档流以后，高度和宽度都会被元素内容撑开
• 内联元素脱离文档流以后会变成块元素
• 一旦脱离文档流，就不分块元素和内联元素了，高度和宽度都是被元素内容撑开。

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。当开启元素的BFC以后，元素将会具有如下的特性:1.父元素的垂直外边距不会和子元素重叠2.开启BFC的元素不会被浮动元素所覆盖* 3.开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC1.设置元素浮动- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失而且使用这种方式也会导致下边的元素上移，不能解决问题* 2 .设置元素绝对定位 3.设置元素为inline-block关-可以解决问题，但是会导致宽度丢失，不推荐使用这种方式4.将元素的overflow设置为一个非visible的值*中四推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。

解决高度塌陷方案二:
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高基本没有副作用/

通过after伪类，选中box1的后边//*可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用c:afterl/添加一个内容/ content:"";/转换为一个块元素/ display: block;/清除两侧的浮动/ 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定位元素和定位位置的右侧距高
定位元素水平方向的位置由1eft和right两个属性控制通常情况下只会使用一个

绝对定位

当元素的position设置为absolute时，则开启了元素的绝对定位
绝对定位的特点

• 开启绝对定位后，如果不设置偏移量的位置不会发生变化
• 开启绝对定位后，元素会从文档流中脱离
• 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。
• 绝对定位会使元素提升一个层级
• 绝对定位元素是相对于其包含块进行定位的

包含块：
1.正常情况下。包含块就是离当前元素最近的一个祖先块元素（通常都是父元素）
2.绝对定位的包含块：就是离它最近的开启了定位的祖先元素。如果所有的祖先元素都没开启定位，则相对于根元素（html）定位
3.html（根元素，初始包含块）

固定定位

将元素的position属性设置为fixed则开启了元素的固定定位固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样唯一不同的是固定定位永远参照于浏览器的视口进行定位固定定位的元素不会随网页的滚动条滚动

粘滞定位

-当元素的position属性设置为sticky时则开启了元素的粘滞定位 -粘滞定位和相对定位的特点基本一致，
不同的是粘滞定位可以在元素到达某个位置时将其固定

绝对定位元素的布局

当我们开启了绝对定位后:
水平方向的布局等式就需要添加left 和 right 两个值此时规则和之前一样只是多添加了两个值，当发生过度约束:如果9个值中没有auto则自动调整right值以使等式满足如果有auto，则自动调整auto的值以使等式满足可设置auto的值margin width left right因为left 和 right的值默认是auto，所以如果不知道left和right则等式不满足时，会自动调整这两个值

元素的层级

对于开启了定位元素。可以通过z-indext属性设置元素的层级。
z-indext只能设置整数，数值越大越优先显示

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

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

字体

color 前景色
font-size 字体大小
和font-size相关的单位
em相当于当前元素的指定font-size
rem相当于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体。
font-family 可以同时指定多个字体，多个字体间用逗号隔开，字体生效时优先使用第一个其次第二个，以此类推

font-face可以将服务器中的字体直接提供给用户去使用

图标字体iconfont
在网页中常使用一些图标，图片不灵活，所以我们可以将图标直接设置为字体。然后通过font-face的形式对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。