《CSS世界》碎片知识点摘要

Myth丶恋晨 2021-07-26 12:24 432阅读 0赞

# 《CSS世界知识点摘要》 #

> 本文为个人学习笔记。主要为收藏和摘录《CSS世界》（张鑫旭）中提及的CSS知识点。

## 专业术语 ##

#### 长度单位 ####

*  相对长度
 *  em 其相对于当前对象内文本的字体尺寸，。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。  
    1em等于font-size / em的值并不是固定的 / em会继承父级元素的字体大小
 *  rem 相对于根元素`html`的字体尺寸  
    rem是固定值
 *  ex 字符`x` 的高度
 *  vh/vw/vmin/vmax 相对视区高度
    
     *  vw:1vw 等于视口宽度的1%
     *  Vh:1vh 等于视口高度的1%
     *  vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
     *  vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh
 *  绝对长度
 *  px

#### 功能符 ####

*  calc( )
 *  rgba
 *  url( )

#### 选择器 ####

> 选择器是用来选择或指定目标元素

*  ID选择器`#`号开头，权重相当高
 *  类选择器`.`开头
 *  属性选择器带`[ ]`的选择器。常见的有`[title]{}` `[title="css-world"]{}` `[title^="css-world"]{}`
 *  伪类选择器`:`号开头。常见的有`:first-child` `:last-child`
 *  伪元素选择器`::` 号开头。常见的有`::before` `::after` `::first-line` `::first-leter`

>  *  （1）伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。
>  *  （2）伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素  
>     ![在这里插入图片描述][e1900db9e7768030863e54a2103e33bf.png_pic_center]  
>     ![在这里插入图片描述][3b7d8e5468d36e25552fccd923446947.png_pic_center]

#### 关系选择器 ####

*  后代选择器 `ul li` 空格 命中满足条件的所有后代，子元素，孙子辈元素…
 *  相邻后代 `ul>li` > 仅命中满足规则的子元素
 *  兄弟选择器 `li~li` ~ 命中满足规则的当前元素后面的所有兄弟元素
 *  相邻兄弟元素`li+li` \+ 仅命中满足规则的当前元素后面的第一个兄弟元素

## 元素 ##

#### 块元素 ####

*  一个水平流上只能单独放置一个块元素。
 *  由于块元素具有换行的特性，因此理论上块元素都可以配合`clear`属性来清除浮动带来的影响父容器高度塌陷
 *  每个元素都有两个盒子。外在盒子块级盒子控制是否换行，内联盒子容器盒子控制元素宽高和内容展示。
 *  盒子模型 content-box padding-box border-box margin-box

#### CSS流体布局下的宽度分离原则 ####

*  CSS的width属性不与影响宽度的padding/border 属性共存（即width不和padding/border等属性作用在同一个元素上）
 *  用一个父级容器把想要展示的内容包裹起来，然后再父级容器上设置width
 *  改变盒子模型为`border-box`

> 慎用通配符`*`  
> box-sizing发明的初衷：解决元素文本框`<input>` `<textarea>` 100%自适应父容器宽度的问题。解决替换元素宽度自适应问题

#### height:auto ####

*  百分比高度要想生效，其父级必须有一个可以生效的高度值。

> 显示的设置父容器高度：`height:500px;`  
> 使用绝对定位`height:100%；position：absolute;`

#### 内联元素 ####

*  内联元素的默认高度完全受`font-size`控制

#### 幽灵空白节点 ####

*  再html5文档声明中，内联元素的解析和渲染表现就如同每个行框盒子前面有一个“空白节点”一样。这个空白节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，表现如同文本节点一样。

> 在每个“行框盒子”前面，同时具有该元素字体和行高属性的0宽度的内联盒。
> 
>  *  解决办法
>     
>      *  img设置display为block；
>      *  父容器（如示例中的div）font-size设置为0；

#### padding + background-clip 绘制简单图形 ####

*  background-clip : 指定绘图区的背景

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>理解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>默认值。背景绘制在边框方框内（剪切成边框方框）。</td> 
   <td>边框部分也有背景</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景绘制在衬距方框内（剪切成衬距方框）。</td> 
   <td>pading和content区域有背景，border没有</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景绘制在内容方框内（剪切成内容方框）。</td> 
   <td>仅content区域有背景</td> 
  </tr> 
 </tbody> 
</table>

#### 元素尺寸 ####

*  offsetWidth:元素偏移尺寸 offsetWidth = width + 左右padding + 左右boder `border-box`
 *  clientWidth：元素可视尺寸 clientWidth = width+左右padding `padding-box`

> clientTop = boder.top(上边框的宽度)  
> offsetTop： 当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离  
> offsetLeft: 当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

#### 块级元素文档流垂直方向上margin合并 ####

*  margin合并的场景
    
    1.  相邻兄弟元素margin合并
    2.  父级元素和第一个子元素margin-top合并
    3.  空块级元素的margin合并
 *  父级元素和第一个子元素margin-top合并解决办法
    
    1.  父元素设置为块级格式化上下文
    2.  父元素使用boder-top代替margin-top属性
    3.  父元素使用怕padding-top代替margin-top属性
    4.  父元素和第一个子元素之间添加一个内联元素进行分割。

> BFC 块级格式化上下文
> 
>  *  根元素html
>  *  overflow的值不是visible，即overflow可设置为hidden/scrool/auto
>  *  float不为none , 即float为left/right
>  *  display的值是inline-block、table-cell、flex、table-caption或者inline-flex
>  *  position的值不是static或者relative, 即position的值为fixed/absolute

*  margin 合并的计算规则
    
    1.  正正取最大
    2.  负负取最小
    3.  正负值相加
 *  margin 合并的意义  
    使得图文排版更美观

#### margin：auto ####

*  一侧有值，margin-auto则为u=剩余尺寸
 *  两侧均为auto则margin平分剩余宽度

#### border ####

*  利用border的透明框技巧可以增加元素的可点击区域
 *  利用border的透明框技巧可以绘制三角形等图形

div{
    	width:0;
    	border 10px solid;
    	border-color: #f30 trtansparent transparent;
    }

#### vertical-align作用的前提 ####

*  只能作用于内联元素以及设置`display：table-cell`的元素

#### 浮动float ####

> 浮动的本质是为了实现文本环绕校效果  
> 浮动布局缺乏弹性

*  float 的特点
    
    1.  包裹性 （元素尺寸由子元素决定）
    2.  块状化 （float属性不为none 则该元素的display属性为block/table）
    3.  BFC
    4.  破坏文档流
    5.  没有任何margin 合并（BFC）
 *  float 会导致父元素的高度塌陷
 *  清除浮动  
    clear 元素盒子的边不能和前面的浮动元素相邻

> `clear:both`并不是清除浮动，而是实现了清除浮动的效果，因为clear并没有改变浮动元素的特性，只是作用于自身把自己和浮动元素隔离开来。

> clear 只能对块级元素生效借助伪元素`::after`来清除浮动，需要将为元素设置为块元素。如`display:block`

#### 文本环绕效果 ####

1.  float 使得父元素高度塌陷，从而使得尾随元素和浮动元素位于同一水平线。
2.  行框盒子和浮动元素不可重叠的特性，产生文本环绕浮动元素的效果。

#### BFC ####

块级格式化上下文：BFC内部元素不会影响到外部元素，反之亦然。因而BFC可以取消`margin合并`,BFC也可用于清除浮动带来的影响。

*  如何触发BFC
 *  html根元素
 *  float不为none.。可以是left/right
 *  overflow不为visable。可以是hidden/scrooll/auto
 *  display值为table-cell/table-caption/inline-block
 *  position不为static/relative。可以是fixed/absolute

> 换言之，只要元素符合上面任意一个条件，就无须使用clear：both去清除浮动的影响。

*  单行文本溢出

{ 
     	overflow:hidden;
     	white-space:nowrap;
     	text-overflow:ellipsis;
    }

#### position：absolute ####

`position:absolute` 和 `float` 一同设置。float将失效。

*  包含块

> 元素用于计算和定位的框。

*  html根元素为初始包含块
 *  对于其它元素如果该元素的position属性为static/relative 则该元素的包含块为最近的块容器祖先元的的content-box
 *  如果元素的position属性为fixed，则其包含块为html初始包含块
 *  如果元素的position属性为absolute，则包含块为最近的position不为static的元素padding-box，找不到则为html初始包含块
 *  **具有相对特性的无依赖absolute绝对定位**、  
    将一个元素设置为`position"absolute`同时不设置left/top/roght/bottom等属性，该元素会留在原位置，且不占据任何排版空间。相对于一个不占排版空间的相对定位元素。
    
     *  如果overflow不是定位元素，同时绝对定位元素和和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行裁剪。

#### clip属性 ####

*  clip属性要想生效，只能作用于固定定位元素或者绝对定位元素（fixed/absolute）

## 层叠规则 ##

> z-index 只有和定位元素（position不为static）在一起才会上校。同时z-index可以是正数也可以是负数。数值越大层级越高。

*  表示内容的内联元素层级比较高

#### z-index 支持设置负值 ####

> z-index 负值渲染的过程就是寻找第一个层叠上下文元素的过程，然后层叠顺序止步于这个层叠上下文元素。

*  z-index负值的作用
 *  可访问性隐藏：z-index负值可以隐藏元素，只要层叠上下文内的某一给父元素添加一个背景色就行。
 *  IE8下的多背景模拟
 *  定位在元素的后面

## 文本处理 ##

*  fons-size 支持关键字，如larger/smaller/xx-large/x-large/large/medium/small/x-small/xx-small等
 *  fons-size:0; 可实现文本的隐藏。

> 在chrome浏览器中字体大小不能低于12px;小于12px会被默认设置为12px，但是font-size:0可以生效。

*  letter-spacing: 字符间距

> 支持负值，当负值够大是会产生字符重叠的效果，甚至反向排列

*  word-spacing: 单词间距 调整单词之间的空格间隙，有空格就生效
 *  word-break 与 word-wrap
 *  white-space 声明如何处理空白字符，white-space可以决定图文内容是否在一行显示。
 *  text-decoration 文本上中下划线（underline/overline/line-through）

## 元素的显示与隐藏 ##

*  使用`script`标签隐藏：元素不可见，不占据空间，辅助设备无法访问，同时不渲染

*  `display:none` 元素不可见，不占据空间，辅助设备无法访问，资源有加载
 *  `visilility:hidden`元素不可见，占据空间，辅助设备无法访问，元素不可点击
 *  `clip:rect(0,0,0,0)` 元素不可见，不占据空间，不能点击，但是键盘可以访问
 *  `z-index` 负值隐藏
 *  `opacity` 元素不可见，占据空间，可以点击。
 *  `display:none` 隐藏，后代元素也会一起隐藏
 *  transition最好结合visibility属性实现，渐显效果

[e1900db9e7768030863e54a2103e33bf.png_pic_center]: /images/20210726/51641c24427c4f688c5d3a740e5c9652.png
[3b7d8e5468d36e25552fccd923446947.png_pic_center]: /images/20210726/2d16f531455b472796630f9b1b18190b.png