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。