《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中建议使用:表示伪元素
关系选择器
- 后代选择器
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 : 指定绘图区的背景
| 值 | 说明 | 理解 |
|---|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 | 边框部分也有背景 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 | pading和content区域有背景，border没有 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 | 仅content区域有背景 |
元素尺寸
- offsetWidth:元素偏移尺寸 offsetWidth = width + 左右padding + 左右boder
border-box - clientWidth：元素可视尺寸 clientWidth = width+左右padding
padding-box
clientTop = boder.top(上边框的宽度)
offsetTop： 当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
offsetLeft: 当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
块级元素文档流垂直方向上margin合并
- margin合并的场景
- 相邻兄弟元素margin合并
- 父级元素和第一个子元素margin-top合并
- 空块级元素的margin合并
- 父级元素和第一个子元素margin-top合并解决办法
- 父元素设置为块级格式化上下文
- 父元素使用boder-top代替margin-top属性
- 父元素使用怕padding-top代替margin-top属性
- 父元素和第一个子元素之间添加一个内联元素进行分割。
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 合并的计算规则
- 正正取最大
- 负负取最小
- 正负值相加
- 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 的特点
- 包裹性 （元素尺寸由子元素决定）
- 块状化 （float属性不为none 则该元素的display属性为block/table）
- BFC
- 破坏文档流
- 没有任何margin 合并（BFC）
- float 会导致父元素的高度塌陷
- 清除浮动
clear 元素盒子的边不能和前面的浮动元素相邻
clear:both并不是清除浮动，而是实现了清除浮动的效果，因为clear并没有改变浮动元素的特性，只是作用于自身把自己和浮动元素隔离开来。
clear 只能对块级元素生效借助伪元素
::after来清除浮动，需要将为元素设置为块元素。如display:block
文本环绕效果
- float 使得父元素高度塌陷，从而使得尾随元素和浮动元素位于同一水平线。
- 行框盒子和浮动元素不可重叠的特性，产生文本环绕浮动元素的效果。
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标签隐藏：元素不可见，不占据空间，辅助设备无法访问，同时不渲染
<script type=""text/html >
<img src="1.png">
</script>
-
display:none元素不可见，不占据空间，辅助设备无法访问，资源有加载 -
visilility:hidden元素不可见，占据空间，辅助设备无法访问，元素不可点击 -
clip:rect(0,0,0,0)元素不可见，不占据空间，不能点击，但是键盘可以访问 -
z-index负值隐藏 -
opacity元素不可见，占据空间，可以点击。 -
display:none隐藏，后代元素也会一起隐藏 -
transition最好结合visibility属性实现，渐显效果
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
