【芝士整理】CSS基础图谱

iOS122 发布于2019-08-30 15:54 / 1174人阅读

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。

选择器注意点 属性选择器

[attr^=value] - 开头或全等

[attr$=value] - 结尾或全等

[attr*=value] - 包含值

[attr~=value] - 字符串包含

选择器组

A > B - 直接子节点

A + B - 下一个兄弟节点

A ~ B - 兄弟节点

优先级

!important > 内联样式 > ID选择器 > 属性选择器（类选择器，属性选择器，伪类）> 元素选择器（类型选择器，伪元素）> 继承 > 用户代理样式

通配选择符(*), 关系选择符(+, >, ~, " ") 和 否定伪类(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

块元素/行内元素/行内块元素

block box - 整块，独占一行，可指定宽高

inline box - 包裹内容，行内流动，文本太长会段落行中断开（设置border分行后的显示效果）；无法指定宽高

inline-block box - 行内流动，段落行中不会断开，成块显示，可指定宽高

盒模型

当对一个文档进行布局的时候，浏览器渲染引擎会根据CSS-Box模型将所有元素表示为一个矩形盒子

盒模型由由外边距、边界、内边距、内容块组成

外边距

盒模型的最外层，常用于元素外布局，垂直方向上易出现元素外边距重叠的效果，详细介绍可见CSS深入理解之margin

边界

背景层延伸到边界，默认颜色为字体颜色，可用边界实现一些常用图形效果，详细介绍可见CSS深入理解之border

内边距

内容区和边界之间的距离，背景层渗透，不支持负值，详细可见CSS深入理解之padding

CSS-Box模型

可通过box-sizing属性设置

content-box ，标准盒子模型，width = 内容区宽度

border-box，IE盒子模型，width = 内容区宽度 + 内边框 + 边框

行内框盒模型

行内框盒模型描述内容在元素中的布局结构

行内元素都具有line-height和vertical-align属性，这两个属性影响内容在垂直方向上的分布，详细介绍可见CSS深入理解之line-height以及CSS深入理解之vertical-align

流布局

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动

浮动起源于实现文字环绕效果。

为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生BFC，元素周围的内容转换为inline boxes围绕元素排列。

从浮动的起因和浮动的副作用来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。

关于浮动的具体介绍，可见CSS深入理解之float

定位

相对定位

未脱离文档流，相对于元素在文档流中的位置偏移，不会对其他元素的布局产生影响

绝对定位

脱离文档流，相对于包含块定位

绝对定位元素具有跟随性，在未手动定位时，元素根据原有位置脱离文档流放置

无固定宽/高，设定对立定位方向，产生拉伸效果

关于绝对定位的具体介绍，可以CSS深入理解之absolute

固定定位

脱离文档流，相对于视口

BFC

什么是BFC?

CSS规范的一个特性，产生BFC特性的元素可以理解为一个封闭独立的容器，能够排除一些外界因素的影响

如何产生BFC?

根元素

浮动

绝对定位

display: inline-block/table-cell/table-caption/flex/inline-flex

overflow非visible

BFC的日常应用

解决外边距重叠问题

清除浮动

排除兄弟元素的浮动影响

详细例子可见10 分钟理解 BFC 原理

层叠

详细介绍可见CSS深入理解z-index

度量单位

绝对单位

相对单位

em - 相对父元素的字体大小（font-size而不是计算出的字体高度）

rem - 相对于基础字体大小，支持IE9及以上

vw, vh- 分别是视口宽度的1/100和视口高度的1/100

rem布局使用解说
大体简述

px太过死板，无法实现等比缩放。

使用em需要严格控制各级元素关系，容易出错，不易维护

使用rem的好处在于可通过修改根元素字体大小实现等比缩放，根元素字体大小需要用js计算。如果将屏幕宽度分为一百等分，一单位宽度即clientWidth/100，根元素字体大小设置为该值，50rem即代表50%的宽度。若要方便还原设计图尺寸，使用元素的rem值计算公式：元素宽度 / UE图宽度 * 100

文本 文本溢出处理 介绍几个属性

word-break

normal：默认断行规则，CJK文本自动换行，非CJK不会自动换行（边界遇空白符会换行）

break-all：非CJK文本可在任意字符间断行

keep-all：CJK文本不断行，非CJK保持默认断行

word-wrap

overflow-wrap的别名，当行内没有多余的空间容纳一个单词到结尾，是否允许这个单词中断换行

注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

normal

break-word

white-space

如何处理空白

| | 换行符 | 空格和制表符 | 文字转行 |
| ---------- | ------ | ------------ | -------- |
| normal | 合并 | 合并 | 转行 |
| nowrap | 合并 | 合并 | 不转行 |
| pre | 保留 | 保留 | 不转行 |
| pre-wrap | 保留 | 保留 | 转行 |
| pre-line | 保留 | 合并 | 转行 |

word-break控制任意字符是否换行，word-wrap控制单词是否中断换行，white-space可控制是否换行。如果无换行前提，word-space与word-wrap将失去意义。

https://codepen.io/curlywater...

常见处理

不做转换的情况下，显示多行文本，并且控制换行

.content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

对溢出文本做省略字符处理

.line-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

行内元素水平间隔

行内元素之间若有空白符/换行符/制表符掺入，将会产生元素间隔的渲染效果

解决方式一：避免掺入，旧式开发中注意写法，现代框架和打包可以避免该问题

解决方式二：容器字体大小设置为0

html{
    // 字体大小不受设备终端调整
　　-webkit-text-size-adjust:none;
}
.container {
    font-size: 0;
}
.container span {
    font-size: 16px;
}

GPU云服务器云服务器 css基础 css基础教程基础选择器css html+css基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117035.html

【芝士整理】JS基础图谱

摘要：没有找到的话，看上级函数作用域，向上查找到，找到为止。将会在执行上下文栈中保留上级作用域的执行上下文。若在闭包使用完毕之后不手动解除引用，相关执行上下文将会一直保留于执行上下文栈中，占据内存空间，若持续积累，容易造成内存泄漏。 JS有哪些基本数据类型呢？值类型：undefined, Number, Boolean, String，null 引用类型：Object 值类型存放在栈中引...

netScorpion 2019-08-23 14:18 评论0 收藏0
【芝士整理】HTML的标签们

摘要：读一遍文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。结构化，通过标签先后顺序和嵌套语法给树提供基础。标签列表基于个人理解即非官方描述，给标签划分为结构化标签语义化标签功能化标签，文档标签。读一遍MDN文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。关于HTML HTML的作用可以简单总结为结构化、语义化和提供基础...

stonezhu 2019-08-02 16:06 评论0 收藏0
【芝士整理】CSS经典布局

摘要：水平居中行内元素定宽块元素常规流中浮动块元素负边距绝对定位元素负边距居中绝对居中不定宽块元素完整垂直居中单行和一致定高块元素负边距居中绝对居中不定高块元素完整水平垂直居中行内元素水平居中行内元素 text-align .parent { text-align: center; } 定宽块元素常规流中 margin: 0 auto; .child { width: ...

chavesgu 2019-08-30 15:54 评论0 收藏0
【前端芝士树】Array的属性及方法整理（参照MDN）

摘要：本文主要是我自己对的一些整理，参考自，其中的分类有些不准确之处，还望见谅的基本属性属性的一些方法增删改查基础功能增删改查基础功能增删改删除数组的第一个元素删除数组的最后一个元素在数组的开头一个或多个元素，在数组的末尾增加一个或者多个元素数组本文主要是我自己对Array的一些整理，参考自MDN，其中的分类有些不准确之处，还望见谅 Array const arr = [1, 2, 3, ...

MoAir 2019-08-23 16:15 评论0 收藏0
【芝士整理】浏览器存储

摘要：维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。服务器端生成推送到浏览器端，浏览器负责保存和维护数据。 Cookie 维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。服务器端生成Cookie推送到浏览器端，浏览器负责保存和维护数据。特点域名下的所用请求都会带上Cookie 每条Cookie限制在4KB左右 Cookie在过期时间之前一直有效，若...

whlong 2019-08-23 14:20 评论0 收藏0