css重点知识汇总（一）

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。