深入理解CSS|青训营笔记

violetBlue
74 阅读5分钟

CSS发展史 ：

  • 解决网页排版布局和装饰问题-有了层叠概念的语言
  • 表现与内容分离
  • 规范模块化发展、样式丰富、炫酷提高网站的可维护性以及性能速度

基础知识

  1. 层叠三大规则
  • 样式表来源 uTools_1682342324106.png
  • 选择器优先级 uTools_1682342382093.png
  • 源码位置 @import的样式 总结：选择器尽量商用id、尽量不要用 ！important、自己的样式加载在引用库样式的后面

  1. 继承——大部分具有继承特性的属性和文本相关 uTools_1682342609888.png

  2. 盒模型——浏览器根据视觉格式化模型，将所有元素表示为盒子模型 uTools_1682342733888.png 只有margin可以设置负值

  3. 常用布局：常规流、浮动流、定位流

  • css3 新增 弹性盒子flex、网格布局Grid、多列布局 Multicol

块级格式化上下文

BFC 块级格式化上下文 独立的渲染区域： 哪些元素会在内部创建BFC

  • 根元素、
  • 浮动和定位元素、
  • overflow不等于visible块盒 创建BFC元素
  • 他的自动高度需要计算浮动元素
  • 他的边框盒不会与浮动重叠
  • 不会和他的子元素进行外边距合并

堆叠上下文 区域由某个元素创建html、设置z-index svg uTools_1682343057473.png

5、变形、动画 uTools_1682343130263.png

6、响应式布局规则：

  • 优先流式布局，如百分比、flex、grid
  • 使用响应式图片，匹配尺寸、节省带宽
  • 使用媒体查询为不同的设备类型做匹配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度rem、em、vw做为长度度量
  1. 媒体查询 uTools_1682343444976.png

8、设备像素

  • 物理像素：像素就是一个小方块，有特定的位置和颜色
  • 分辨率：图像分辨率和屏幕分辨率，点越多越清晰
  • 像素密度： 屏幕密度（PPI）每英寸包括的像素数
  • 设备独立像素： 和设备无关，更好的利用多个物理像素对应一个设备独立像素
  • CSS像素：和设备独立像素相等
  • 设备像素比(dpr):物理像素和设备独立像素的比值 1px 问题，展示效果不一致
  • 伪元素+scale 缩放 图片模糊问题
  • img元素的srcset属性，背景图 -webkit-img-set（url()1x,url() 2x,url()3x)
<div class="one-tab-wrapper" ref="oneTab"> // 计算滑动值 const { oneTab } = this.$refs const itemWidth = e.target.offsetWidth; const itemLeft = e.target.getBoundingClientRect().left const wrapperWidth = oneTab.offsetWidth; oneTab.scrollLeft += itemWidth / 2 + itemLeft - wrapperWidth / 2;

Css 生态

语言增强：预处理器（scss、less、stylus）、后处理器（使用css） 工程架构：CSS 模块化、CSS-In-Js、Atomic CSS 在CSS中，居中包括两个方面：水平居中和垂直居中。

实现单行文字的水平居中使用 text-aligh属性

复合行内元素包括inline-block、inline-table以及inline-flex之类的元素。

对于单行文字来说，我们定义line-height和height这两个属性的值相等就可以实现垂直居中

想要实现小图标效果，比较好的解决方法就是使用icon font图标技术。

iconfont是国内功能很强大且图标内容很丰富的矢量图标库。官方网址为www.iconfont.cn/。

0

icomoon官网地址为icomoon.io/。

（1）包含块containing block——就是可以决定一个元素大小和定位的元素。

根元素（HTML元素），是一个页面中最顶端的元素，它没有父元素。根元素存在的包含块，被称为“初始包含块（initial containing block）。

如果元素的position属性为fixed，那么它的包含块是当前可视窗口，也就是当前浏览器窗口。

如果元素的position属性为static或relative，那么它的包含块是它最近的块级祖先元素创建的。祖先元素必须是block、inline-block或者table-cell类型。

position属性为absolute，那么它的包含块是由最近的position属性不为static的祖先元素。这里的祖先元素可以是块元素，也可以是行内元素。

（1）如果祖先元素是块元素，则包含块的范围为祖先元素的padding edge形成。（2）如果祖先是行内元素，则包含块取决于祖先元素的direction属性。

（2）BFC和IFC。

浮动元素，绝对定位元素（position为absolute或fixed），元素类型（即display属性）为inline-block、table-caption、table-cell，以及overflow属性不为visible的元素将会创建一个新的块级格式上下文（BFC）。

一个元素浮动之后，它的层叠级别（stacking level）比普通文档流的块级盒子的层叠级别要高。

（3）层叠上下文。

一个元素在z轴方向上的堆叠顺序，是由“层叠上下文”和“层叠级别”这两个因素决定的：（1）同一个层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下。（2）同一个层叠上下文中，如果两个元素的层叠级别相同（即z-index值相同），则后面的元素堆叠在前面元素的上面，遵循“后来者居上”原则。（3）不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关。

avatar
文章
阅读
粉丝