《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属性实现,渐显效果