前端复习——CSS

Arequitae
147 阅读7分钟

CSS

样式引入

内联样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

内部样式表

<style type="text/css">
p{
    color:green; 
    font-size:50px;
}
</style>

外部样式表

<link rel="stylesheet" href="./style.css">

单位

像素px 基本布局单位
百分比% ，相对于父元素的百分比，从而实现响应式的效果。
em 相对于父元素的文本的倍数。如果父元素未设置 font-size，则相对于浏览器的默认字体尺寸(默认 16px)。
rem 相对于根元素 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布局，可以利用 html元素 中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变化时让元素也随之变化。

vw： 相对于视窗的宽度，视窗宽度是 100vw；
vh： 相对于视窗的高度，视窗高度是 100vh；
vmin： vw 和 vh 中的较小值；
vmax： vw 和 vh 中的较大值；

vw 和百分比的区别是: vw 相对于视窗, % 相对于父元素

选择器优先级

选择器格式优先级
id 选择器#id100
class 选择器.class10
属性选择器a[href] (只对有 href 属性的锚（a 元素）应用样式)10
伪类选择器li:last-child10
标签选择器选择器div1
伪元素选择器li::after1
相邻兄弟选择器h1+p0
子选择器ul>li 只能选择自己的子类0
后代选择器li a 只要是元素下面的元素，无论几级，都能选0
通配符*0

!important与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

p { background-color: red !important; }
  • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
  • 如果优先级相同，则最后出现的样式生效
  • 继承得到的样式的优先级最低
  • 一个复杂的选择器的权重等于所有选择器的权重之和。

伪类与伪元素的区别

(m.php.cn/article/486…

  • 伪元素： 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素
  • 伪类：  将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素

属性继承

可继承：

字体系列 font-family font-weight font-size font-style

文本系列 color text-align line-height

可见系列 如 visibility

不可继承属性：

display

文本属性 vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理

盒子模型属性 width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left 背景属性 background、background-color、background-image、background-repeat、background-position、background-attachment 5.定位属性 float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

display

  • block：占一行，width、height、margin 和 padding可设置
  • inline：width height无效，可以设置水平方向的margin 和 padding
  • inline-block：既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性

元素隐藏方法

display: none: 渲染树不会渲染对象，不可继承，修改将导致整个文档重排
visibility: hidden: 任渲染元素，元素在页面中仍占据空间，但是不会响应绑定的监听事件，可继承，只会进行重绘
opacity: 0: 元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值:来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path: 元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0): 将元素缩放为 0，元素仍在页面中占据位置，但是不会响应绑定的监听事件

link 和 @import

@import 'a.css'; /* 或者 @import url('a.css'); */
  1. link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 只能加载 CSS。
  2. link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
  3. link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
  4. link 支持使用 Javascript 控制 DOM 去改变样式； @import 不支持。

动画

  • animation： 不需要触发事件，用@keyframe 定义 www.w3school.com.cn/css/css3_an…
  • transition: 需要触发一个事件 transition-property 规定设置过渡效果的 CSS 属性的名称。
    transition-duration 规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function 规定速度效果的速度曲线。
    transition-delay 定义过渡效果何时开始。
transition: property duration timing-function delay;

div
{
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
}

div:hover
{
    width:300px;
}

transform

  • translate 位移
  • rotate 旋转
  • scale 缩放
  • skew 斜切

使用translate来改变位置的优点

translate 不会触发浏览器重排和重绘,只会触发复合, 利用GPU效率高
绝对定位会导致重排, 进而触发重绘, 利用CPU效率低

盒模型

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同：
标准盒模型的 width 和 height 属性的范围只包含了 content，
IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：
box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示 IE 盒模型（怪异盒模型）\

BFC

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

设置方式：

  1. body根元素
  2. 设置浮动，不包括none
  3. 设置定位，absoulte或者fixed
  4. 行内块显示模式，inline-block
  5. 设置overflow，即hidden，auto，scroll
  6. 表格单元格，table-cell
  7. 弹性布局，flex

BFC 的特点：

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

塌陷问题

image.png

重排、重绘、合成以及如何优化

—————————————————————

媒体查询

判断元素是否到达可视区域

  • window.innerHeight 是浏览器可视区的高度；
  • document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
  • imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
  • 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

image.png

z-index

通常 z-index 的使用是在有两个重叠的标签，z-index 值越大就越是在上层。z-index 元素的 position 属性需要是 relative，absolute 或是 fixed。

参考文章

juejin.cn/post/708088…

avatar
文章
阅读
粉丝