资讯专栏INFORMATION COLUMN

FE.CSS-快速梳理

XUI / 932人阅读

摘要:元素根据外在盒子是内联还是块级,分成块级元素和内联元素。值为常见的内联元素有。注数值需向上舍入是相对于计算的只能应用于内联元素以及的元素。的显示内联元素元素的垂直中心点和行框盒子基线往上处对齐。

前言

本文是对《CSS世界》阅读中所做笔记和感悟,若有错误请指正。

概述

CSS设计初衷是为了更好地展示图文。
HTML元素根据”外在盒子“是内联还是块级,分成块级元素内联元素
HTML元素也可根据是否具有可替换内容,分成替换元素非替换元素

块级元素

一个水平流上只能显示一个块级元素,多个块级元素则换行显示。
display值为 block、list-item、table。

/*利用块级元素换行特性清除浮动:*/
.clear:after{
    content:"",
    display:table;
    clear:both;
}

常见的块级元素有divlitable

块级元素构成={
    主块:{
        内在盒子: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
常见的内联元素有buttonimginputselect

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

文字 em 文字em

HTML5的内联元素渲染每个行框盒子前面有个”幽灵空白节点“即strut(支柱),一个具有该元素字体和行高属性的0宽内联盒子*(如下效果相同)

字符内容...
内容...

解决上述幽灵空白节点方法:

内联元素块状化

容器line-height:0

font-size:0

内联元素设置vertical-align:top|middle|bottom

替换元素

通过修改某个属性呈现内容可被替换的元素。如imgobjectvideoiframetextareainput
内容外观不受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; }

第一行

第二行

2. 父级和第一个/最后一个子元素

设计缘由:div语义作用是分组,嵌套分组被设计成不阻断合并

对于margin-top合并,解决方案选其一:

父元素设置为块状格式化上下文元素;

父元素设置 border-top 或 padding-top 值;

父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并,解决方案选其一:

父元素设置为块状格式化上下文元素;

父元素设置 border-bottom 或 padding-bottom 值;

父元素和最后一个子元素之间添加内联元素进行分隔;

父元素设置 height、min-height 或 max-height

3. 空块级元素margin合并

设计缘由:可以避免多个空标签(如

)影响排版

.father { overflow: hidden; }
.son { margin: 1em 0; }

对于空块级元素margin合并,解决方案选其一:

设置垂直方向的 border 或 padding;

里面添加内联元素(直接 Space 键空格是没用的);

设置 height 或者 min-height。

margin无效情形

display:inline的费替换元素的垂直margin无效

tr|td或display:table-cell|table-row的margin无效

margin合并,见上节

绝对定位元素非定位方位的 margin 值看上去“无效”

定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位看上去“失效”。

鞭长莫及(float和overflow)导致的 margin 无效

内联特性(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决定这个行盒的最小高度。原因有二:

替换元素的高度不受 line-height 影响

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的情况:

根元素;

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种实现方案:

absolute模拟fixed定位,滚动结构调整大

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后代选择器可能的错误认识

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

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

相关文章

  • FE.CSS-Sultana后记:纯css也能写col,select,datepicker,caro

    摘要:接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中,可以用变量解决,比如实现了宽度,高度圆点大小直径的控件。 未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践,我发现自定义原生控件并不是什么难事,...

    BigTomato 评论0 收藏0
  • FE.CSS-Sultana后记:纯css也能写col,select,datepicker,caro

    摘要:接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中,可以用变量解决,比如实现了宽度,高度圆点大小直径的控件。 未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践,我发现自定义原生控件并不是什么难事,...

    Lsnsh 评论0 收藏0
  • FE.CSS-Sultana后记:纯css也能写col,select,datepicker,caro

    摘要:接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中,可以用变量解决,比如实现了宽度,高度圆点大小直径的控件。 未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践,我发现自定义原生控件并不是什么难事,...

    lanffy 评论0 收藏0
  • FE.CSS-Sultana后记:纯css也能写col,select,datepicker,caro

    摘要:接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中,可以用变量解决,比如实现了宽度,高度圆点大小直径的控件。 未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践,我发现自定义原生控件并不是什么难事,...

    张金宝 评论0 收藏0
  • FE.CSS-理解Matrix,Flex,Grid

    摘要:理解中有这么几个属性方法斜拉缩放旋转位移其实找到旧像素位置与新像素位置的关系就可以用表示。当网格项目多于网格中的单元格或网格项目放置在显式网格之外时,将创建隐式轨道。 理解transform:matrix matrix transform中有这么几个属性方法 skew(35deg)/*斜拉*/ scale(1, 0.5)/*缩放*/ rotate(45deg)/*旋转*/ transl...

    qujian 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<