css重点知识汇总（一）

引入css的不同方式

link

通过src来获取相应的css资源。
除了获取css之外还可以获取其他资源，例如js
在页面载入是同步下载
可以通过js对dom操作来改变css

@import

css3引入的新方法
只能引入css资源
需要页面完全载入后才能加载
可以通过媒体查询去获取相应的css资源

使用css的不同方式

从外部导入link
直接在style内撰写
上述两种方式都需要通过各种选择器来将样式载入元素
直接写在元素内部，不通过选择器来选择

css选择器的优先级（权值）

！important的优先级最高
内嵌样式：1000
id选择器： 100
类选择器，伪类选择器，属性选择器：100
伪类选择器，标签选择器：1
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
如果优先级相同，则最后出现的样式生效；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

布局（display）

block

块级元素，独占一行
可以设置margin，paddding，width，height

inline

行内元素，可以多个占在一行
不可以设置width，height
只能设置水平的margin，paddding。

inline-block

行内块级元素，可以多个占一行
同时可以设置margin，paddding，width，height

flex

弹性盒子，是现代css设置布局时的首选
属性较上述两个较为复杂，之后会详细叙述

position（定位）

static:

默认值，就是相当于没有特殊定位，归属于正常文档流

relative

相对定位
一般是指相对于自己原先的位置来定位
和其他元素没关系，也不会影响其他元素。
不会脱离文档流

absolute

绝对定位
相对于离自己最近的设置了position的祖先元素（static不算），如果没有是浏览器边缘
会脱离标准流

fix

固定定位
元素的定位是相对于 window （或者 iframe）边界的
具有破坏性，会破坏其他元素的布局
必须设置了left,top等值时才会生效

sticky

粘性定位
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
超出目标区域时会与fixed一致

transform（位移）

二维变换

translate
scale
rorate
skew（倾斜）

三维变换

同上，只不过参数多了一个z轴

其他

不做太多介绍（没怎么用过）

隐藏元素的方式

display: none
- 这样相应元素直接不会出现在渲染树上
- 包括子元素一起全部消失，不会渲染
visibliity: hidden & opacity: 0
- 只是让元素不可见，相应的元素任然占据空间
通过位移或定位将元素移至页面可见范围外
使用z-index负值
clip/clip:path: 裁剪元素来实现隐藏，不过元素会绑定监听事件
使用transform的scale，同时这样元素也不会绑定任何监听事件

CSS3 中有哪些新特性

新增各种 CSS 选择器（: not(.input)：所有 class 不是"input"的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadoweflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
增加了旋转,缩放,定位,倾斜,动画,多背景

伪元素与伪类的区别

伪元素使用 ::
伪类使用 :
伪元素相当于在一个元素附近新增了一个元素，不过这个元素不在dom树中，只会在渲染时出现，也就无法绑定事件
伪类是指给现有元素增添一些新的特性，比如hover是在元素被选中时的特殊状态，可以通过这个来给元素增加特殊效果

替换元素的概念

通过修改某个属性值呈现的内容就可以被替换的元素就称为"替换元素"。类似与image,video这类
替换元素的内容的外观一般不受页面css的影响
对于某些css的规则与一般元素不同，比方说 vertical-align 的默认值的 baseline，很简单的属性值，基线之意，被定义为字符 x 的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。
替换元素一般都是行内元素（一些是inline，一些是inline-block）

对css-prites的理解

又称为精灵图，指的是在网页使用一些图片时不是将每一张图片都存下来，而是使用一张图片来存放多张图片的内容
优点很明显，可以大大增快网络请求的速度，毕竟要传的资源量变少了
缺点是需要对图片进行设计，要让多张图片资源互不影响，当传输的图片变动时则需要对图片进行重新设计，对程序员来说则需要知道所需图片在精灵图上的具体位置才能使用

css样式的单位

cm,mm
px：指的是逻辑像素，一般1px对应一个逻辑像素点
em：根据父元素的font-size大小变化而改变的单位，如父元素的font-size=15px，那么1em = 15px
rem：根据根元素（html）的font-size大小变化而改变的单位
vh,vw：根据移动端设备长宽而改变的单位，视窗高度是 100vh，视窗宽度是 100vw
vmin：vw 和 vh 中的较小值；
vmax：vw 和 vh 中的较大值；
% ：相对于父元素的大小而言，100%表示和父元素一样大

CSS 中可继承与不可继承属性有哪些

一、无继承性的属性

1.display：规定元素应该生成的框的类型

2.文本属性：

vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

1.盒子模型的属性：width、height、margin、border、padding

2.背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

3.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

4.生成内容属性：content、counter-reset、counter-increment

5.轮廓样式属性：outline-style、outline-width、outline-color、outline

6.页面样式属性：size、page-break-before、page-break-after

7.声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1.字体系列属性

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

1.文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是 uppercase、lowercase、capitalize 这三个）
color：文本颜色

1.元素可见性

visibility：控制元素显示隐藏

1.列表布局属性

list-style：列表风格，包括 list-style-type、list-style-image 等

1.光标属性

cursor：光标显示为何种形态

浮动

历史介绍：浮动是在早年网页的样式需求没如今这么大时出现的，当时只是为了做一些简单的文字环绕效果，只不过该功能恰好可以实现一些当时很难实现的一些布局形式，所以很多人用浮动来写样式
但如今在有flex,grid这类专为布局设计的功能下，我们应该尽量少使用浮动，并且浮动还非常消耗渲染的资源
使用：
- float:left(right)：向左（右）浮动
- 浮动的元素会脱离标准流，同时还可能会使父元素的高度塌陷（父元素的高度原先由浮动元素撑起）
取消浮动
- 给父级 div 定义 height属性
- 最后一个浮动元素之后添加一个空的 div 标签，并添加 clear:both样式
- 包含浮动元素的父级标签添加 overflow:hidden或者 overflow:auto
- 使用 :after 伪元素，在伪元素中添加clear。

对 BFC 的理解，如何创建 BFC

先来看两个相关的概念：

Box: Box 是 CSS 布局的对象和基本单位，⼀个页面是由很多个 Box 组成的，这个 Box 就是我们所说的盒模型。
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

创建 BFC 的条件：

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex 等；
overflow 值为：hidden、auto、scroll；

BFC 的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
在 BFC 中上下相邻的两个容器的 margin 会重叠
计算 BFC 的高度时，需要计算浮动元素的高度
BFC 区域不会与浮动的容器发生重叠
BFC 是独立的容器，容器内部元素不会影响外部元素
每个元素的左 margin 值和容器的左 border 相接触

BFC 的作用：

-解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。

-解决高度塌陷的问题 ：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置 overflow:hidden。