媒介

本文是对《CSS天下》浏览中所做笔记和感悟，如有毛病请斧正。

概述

CSS设想初志是为了更好地展现图文。
HTML元素依据”外在盒子“是内联照样块级，分红块级元素和内联元素。
HTML元素也可依据是不是具有可替代内容，分红替代元素和非替代元素

块级元素

一个程度流上只能显现一个块级元素，多个块级元素则换行显现。
display值为 block、list-item、table。

/*应用块级元素换行特征消灭浮动：*/
.clear:after{
    content:'',
    display:table;
    clear:both;
}

罕见的块级元素有div、li、table。

块级元素组成={
    主块:{
        内涵盒子：block|table{
            content-box:"width默许作用在这"
            padding-box:
            border-box:"转变box-sizing使得width作用在这"
            margin-box:
        },
        外在盒子：block,
    },
    附加块(可选)：如 list-item,
}

[兼容]IE不支撑before/after伪元素display为list-item

width:auto表现：fill-available,fit-content,min-content,max-content

经由过程设定显现的高度和相对定位能够让元素支撑height:100%，前者相关于content-box,后者相关于padding-box盘算百分比。

min-width/height初始值是auto,max-width/height初始值是none。权重：min-width>max-with>width!important

[技能]transition搭配max-height可制作睁开收起动画

内联元素

能够和笔墨在一行显现。display值为inline、inline-block, inline-table
罕见的内联元素有button、img、input、select。

内联元素组成={
    主块:{
        内涵盒子：block|table{
            content-box
            padding-box
            border-box
            margin-box
        },
        外在盒子："inline",
    },
}

<!--包含盒子-->
<p><!--内容地区-->
    笔墨 <!--内联盒子(匿名)-->
    <em><!--内联盒子(签字)-->
        em
    </em>
    <!--行框盒子-->
    笔墨<em>em</em>
</p>

HTML5的内联元素衬着每一个行框盒子前面有个”幽魂空缺节点“即strut(支柱),一个具有该元素字体和行高属性的0宽内联盒子*（以下结果雷同）

<div class="box">
字符<span>内容...</span>
</div>

<div class="box">
    <span>内容...</span>
</div>

处理上述幽魂空缺节点要领：

1. 内联元素块状化
2. 容器line-height:0
3. font-size:0
4. 内联元素设置vertical-align:top|middle|bottom

替代元素

经由过程修正某个属性显现内容可被替代的元素。如img、object、video、iframe、textarea、input。
内容表面不受css影响，在许多css属性上有本身的一套表现划定规矩。
[兼容]textarea & input 在ie和chrome是inline-block，在firefox上是inline

[技能]img的src与content搭配，能够使得看到的图是content,保留的是src
[技能]content可设置attr(alt)和自定义属性如attr(data-title)、font-icon
[技能]content计数器counters

盒模子

padding

内联元素padding会断行

[技能]padding增添点击地区，增添锚链接顶部留白
[技能]应用padding百分比反正都是相关于宽度盘算，完成块状元素自适应等比例矩形

[兼容]ol/ul列表内置padding-left单元是px(chrome内置40px)
[兼容]firefox的button需设置button::-moz-focus-inner{padding:0}才消弭padding

margin

margin百分比反正都是相关于宽度盘算

[技能]margin一侧auto,则auto为盈余空间大小；两侧auto则中分盈余空间
[技能]运用writing-mode转变流向，搭配margin:auto垂直居中
[技能]运用absolute上下左右零+牢固宽高+margin:auto可程度垂直居中

[兼容]假如容器能够转动，ie和firefox会疏忽padding-bottom，chrome则不会，由于前者凌驾content-box触发转动，后者凌驾padding-box触发。所以发起运用margin-bottom

margin兼并

块级元素的margin-top与margin-bottom兼并为单个。
兼并盘算：“正正取大值”“正负值相加”“负负最负值”
兼并场景：

1. 相邻兄弟元素 margin 兼并

设想启事：让图文信息排版更惬意天然。

p { margin: 1em 0; }
<p>第一行</p>
<p>第二行</p>

2. 父级和第一个/末了一个子元素

设想启事：div语义作用是分组，嵌套分组被设想成不阻断兼并

<div class="father" style="margin-top:80px;">
<div class="son" style="margin-top:80px;"></div>
</div>

• 关于margin-top兼并，处理计划选其一：

  • 父元素设置为块状格式化上下文元素;
  • 父元素设置 border-top 或 padding-top 值;
  • 父元素和第一个子元素之间增加内联元素举行分开。

• 关于margin-bottom兼并，处理计划选其一：

  • 父元素设置为块状格式化上下文元素;
  • 父元素设置 border-bottom 或 padding-bottom 值;
  • 父元素和末了一个子元素之间增加内联元素举行分开;
  • 父元素设置 height、min-height 或 max-height

3. 空块级元素margin兼并

设想启事：能够防止多个空标签（如<p>）影响排版

.father { overflow: hidden; }
.son { margin: 1em 0; }
<div class="father">
<div class="son"></div>
</div>

• 关于空块级元素margin兼并，处理计划选其一：

  • 设置垂直方向的 border 或 padding;
  • 内里增加内联元素(直接 Space 键空格是没用的);
  • 设置 height 或许 min-height。

margin无效状况

1. display:inline的费替代元素的垂直margin无效
2. tr|td或display:table-cell|table-row的margin无效
3. margin兼并，见上节
4. 相对定位元素非定位方位的 margin 值看上去“无效”
5. 定高容器的子元素的 margin-bottom 或许宽度定死的子元素的 margin-right 的定位看上去“失效”。
6. 力所不及（float和overflow）致使的 margin 无效
7. 内联特征(vertical-align)致使的 margin 无效

border

• border-width 不支撑百分比值
• border-style 的默许值是 none

[兼容]虚线边框(dashed)在 Chrome 和 Firefox下，色彩区的宽高比是 3:1,色彩区和通明区的宽度比例是 1:1;而 IE 色彩区的宽高比是 2:1,色彩区和通明区的宽度比例也是 2:1
[兼容]虚点边框(dotted)在Chrome 和 Firefox 浏览器下是方点;而 IE 下则是小圆点

[技能]双线边框(double)在3px以上才最先有双线边框的表现（包含retina屏）。
[技能]应用double+solid完成三道杠
[技能]缺省border-color能够统一用color设置边框色彩（currentColor）
[技能]border绘制三角形

line-height

vertical-align:middle是对笔墨中线，不是相对容器

[技能]内联图标运用height:1ex使得基线对齐

内联元素line-height的高度作用细节：
em-box=font-size（不含gq等字母尾巴，汉字图形高度略小于font-size）
行距 = line-height – em-box
半行距 = 行距/2
内容地区=文本选中带背景色的地区，高度受font-family和font-size影响（宋体内容地区和em-box等高）

块级元素高度不受 line-height 影响,日常平凡我们看到的高度实质是由内联元素“行框盒子”line-height撑开高度(如div内有笔墨时)

替代元素高度不受 line-height 影响，日常平凡我们看到的高度实质是“行框盒子”前面的“幽魂空缺节点”撑开高度

内联替代元素和内联非替代元素在一起时会合营构成一个“行框盒子”，line-height决议这个行盒的最小高度。缘由有二：

1. 替代元素的高度不受 line-height 影响
2. vertical-align

line-height 能够让单行或多行内联元素近似垂直居中（“近似”：笔墨中线位置低于“行框盒子”；多行需搭配vertical-align）

line-height默许值为normal，差别字体差别。值为数值（如1.5）时：子元素继续该数值；值为百分比（150%）或长度（20px）时：子元素继续盘算值。（注：line-height数值需向上舍入）

line-height 是相关于 font-size 盘算的

vertical-align

只能应用于内联元素以及 display：table-cell 的元素。（浮动和相对定位会让元素块状化，vertical-align失效）

负值全部都是往下偏移,正值全部都是往上偏移,而且数值大小全部都是相关于基线位置盘算的,即vertical-align:baseline等同于vertical-align:0。

值范例：

• 线类,如 baseline(默许值)、top、middle、bottom;
• 文本类,如 text-top、text-bottom;
• 上标下标类,如 sub、super;
• 数值百分比类,如 20px、2em、20%等(相关于 line-height 的盘算值盘算的)

[技能]vertical-align:middle的table-cell使得内部元素垂直居中

vertical-align:baseline的显现：

• 内联元素：字符x的下边沿
• 替代元素：替代元素的下边沿

• inline-block:

  • 内里无内联元素或overflow不是visible: margin底边沿
  • 不然：末了一行内联元素的基线

vertial-align:top的显现：

• 内联元素:元素底部和当前行框盒子的顶部对齐。
• table-cell 元素:元素底 padding 边沿和表格行的顶部对齐

vertial-align:bottom的显现：“顶部”换成“底部”,“上边沿”换成“下边沿”。

vertial-align:middle的显现：

• 内联元素:元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。
• table-cell 元素:单元格添补盒子相关于表面的表格行居中对齐。

vertical-align:text-top:盒子的顶部和父级内容地区的顶部对齐。
vertical-align:text-bottom:盒子的底部和父级内容地区的底部对齐
vertical-align:super:进步盒子的基线到父级适宜的上标基线位置。
vertical-align:sub:下降盒子的基线到父级适宜的下标基线位置。

流

float

浮动的实质就是为了完成笔墨围绕结果。
特征:
• 包裹性;
• 块状化并格式化上下文;
• 损坏文档流;
• 没有任何 margin 兼并;

块状化：一旦 float 的属性值不为 none,则其 display 盘算值就是block或许 table。

float 定位参考的是“行框盒子”。

BFC

假如一个元素具有 BFC,内部子元素不会影响外部的元素。（不会 margin 堆叠）;能够用来消灭浮动的影响（子元素浮动则父元素高度陷落）。

触发BFC的状况：

• <html>根元素;
• float 的值不为 none;
• overflow 的值为 auto | scroll | hidden;
• display 的值为 table-cell | table-caption | inline-block
• position 的值不为 relative | static。

overflow

当子元素内容超越容器宽度高度限定的时刻,剪裁的边境是 border box 的内边沿,而非 padding box 的内边沿。
PC端浏览器转动条作用在html而不是body。
*[技能]text-overflow:ellipsis搭配-webkit-line-clamp完成多行笔墨办理结果

absolute

absolute 是异常自力的 CSS 属性值，其款式和行为表现不依赖其他任何 CSS 属性就能够完成。

“包含块”范例：

• 根元素(html)被称为“初始包含块”，尺寸=浏览器可视窗口的大小。
• 关于其他元素，假如该元素的position :relative|static，则“包含块”由其近来的块容器先人盒的 content box 边境构成。
• 假如元素 position:fixed，则“包含块”是“初始包含块”。

• 假如元素 position:absolute，则“包含块”由近来的 position 不为 static 的先人元素竖立，详细体式格局以下:

  • 假如该先人元素是纯 inline 元素：

    • 假设给内联元素的前后各天生一个宽度为 0 的内联盒子（inline box），则这两个内联盒子的 padding box 表面的围困盒就是内联元素的“包含块”；
    • 假如该内联元素被跨行分割了，范例并没有明白定义，浏览器自行发挥。
  • 不然，“包含块”由该先人的 padding box 边境构成。
  • 假如没有相符前提的先人元素，则“包含块”是“初始包含块”。

假如overflow 不是定位元素，同时相对定位元素和 overflow 容器之间也没有定位元素，则overflow 没法对 absolute 元素举行剪裁。

[技能]防止被“包含块”限定一柱擎天，运用white-space:no-wrap。
[技能]右上角标签经由过程absolute合营通明border完成
[技能]text-align完成“返回顶部”

[兼容]overflow 元素本身 transform，IE9 +、Firefox 和 Safari（OS X、iOS）剪裁； Chrome 和 Opera 不剪裁

relative最小化影响原则能防止建立新的层叠上下文。
默许的文档流是自上而下、从左往右，因而优先级top>bottom.left>right。

蒙层弹窗2种完成计划：

1. absolute模仿fixed定位，转动结构调整大
2. js:
   挪动端：阻挠touchmove
   桌面端：根元素overflow:hidden + border替代转动条

层叠上下文

特征

• 层叠上下文的层叠程度要比一般元素高。
• 层叠上下文能够阻断元素的夹杂形式。
• 层叠上下文能够嵌套，内部层叠上下文及其一切子元素均受制于外部的“层叠上下文”。
• 每一个层叠上下文和兄弟元素自力，也就是说，当举行层叠变化或衬着的时刻，只需要斟酌子女元素。
• 每一个层叠上下文是自成体系的，当元素发作层叠的时刻，全部元素被认为是在父层叠上下文的层叠递次中。

建立

• 根元素 (HTML),
• z-index 值不为 “auto”的 相对/相对定位
• 一个 z-index != “auto”的 flex 项目 (flex item)，即：父元素display:flex|inline-flex
• opacity < 1 的元素
• transform != “none”的元素
• mix-blend-mode != “normal”的元素
• filter != “none”的元素
• perspective != “none”的元素
• isolation : “isolate”的元素
• position: fixed
• 在 will-change 中指定了恣意 CSS 属性
• -webkit-overflow-scrolling 属性被设置 “touch”的元素

层叠递次

从低到高：

• background、border

  • 负z-index

    • block块状程度盒子

      • float浮动盒子

        • inline程度盒子

          • z-index:auto 或 不依赖z-index数值的层叠上下文(算作z-index:0)

            • 正z-index

[技能]z-index规划不超2，浮层组件应用js层级计数不超9

文本

font-weight取值是100,200,…,800,900。体系自带差别粗细字体决议浏览器可否衬着。
italic 是运用当前字体的斜体字体，而 oblique 只是纯真地让笔墨倾斜。
::first-letter包含标记(包含空格)，::before直到一个字符。
font属性:caption | icon | menu | message-box | small-caption | status-bar
[兼容]caption、icon、message-box 在 Windows下Chrome无效
[技能]html { font: menu; }能够让浏览器字体追随体系
font-face兼容写法：

@font-face {
    font-family: ICON;
    src: url('icon.eot');
    src: local('☺'),
        url('icon.woff2') format("woff2"),
        url('icon.woff') format("woff"),
        url('icon.ttf');
}

[技能]font-weight完成相应式图标
text-indent 的百分比值是相关于当前元素的“包含块”盘算的，而不是当前元素。
[技能]text-indent+overflow:hidden隐蔽img的alt边框
letter-space、word-spacing 默许normal,不是0，支撑负值、小数，不支撑百分比。
[技能]white-space：nowrap 处理尺寸太小，程度列表切换
[技能]text-transform:uppercase处理身份证验证码输入自动大写
[技能]借助:after补行搭配text-align:justify完成两头对齐

其他

伪类：用于向某些选择器加特别的结果。（:active, :focus, :hover, :link, :visited, :first-child, :lang）
伪元素：用于将特别的结果增加到选择器。（::first-letter, ::first-line, ::before, ::after）
visibility可继续，不影响计数器，display:none则相反。
unicode-bidi:bidi-override强迫字符依据direction：rtl|ltr方向分列
writing-mode:horizontal-tb|vertical-rl|vertical-lr
writing-mode特征：

• 程度方向也能 margin 兼并
• 一般块元素能够运用 margin:auto 完成垂直居中
• 能够运用 text-align:center 完成图片垂直居中
• 能够运用 text-indent 完成笔墨下沉结果

不可全局outline:0 none
[技能]visibility搭配transition完成悬停延时显现，移出瞬时隐蔽
[技能]很大的outline完成周五半通明遮罩，用在剪裁图片矩形镂空上和弥补网页底部留白
[兼容]display:none子元素背景图片在chrome safari不加载，其他状况加载

CSS优先级递次

通用选择器；元素（范例）选择器；类选择器；属性选择器；伪类；ID 选择器；内联款式
小tip-css子女选择器能够的毛病认识