被忽视的常用的 css 基础

才发现原来我的 css 基础不好，写出了很多不好的代码。在工作中，发现了自己的问题，但愿日后我也以后写出高质量的 css 代码，让同事夸赞。再次阅读 《css 世界》，记录其中知识点。css 本身并无逻辑可言，看重的是特性间的互相联系和具象能力

width

width:auto 这个是默认值；在默认情况下他有四种表现形式：

1. 充分利用可利用的空间，不管内容是否能够填充父元素的宽度，默认就是父元素的宽度（width:100%)
2. 收缩与包裹，浮动，绝对定位，inline-block,table 宽度根据内容撑开，最大不超过父元素的宽度
3. 收缩到最小，默认如果是有多个子元素，就选择子元素最大的那个宽度作为宽度，赋给所有的子元素
4. 超出容器限制，当元素设置了 white-space:nowrap 的时候，会超出父元素的宽度

默认宽度具有流动性（margin/border/padding/content 自动分配水平空间），会像流水一样铺满整个父容器，一旦我们设置了宽度之后，流动性就丢失了。建议是最好能不用去限制宽度就不要限制，因为默认元素的尺寸是 margin/border/padding/content 之和，而我们平时写的 width 只是 content 的宽度，容易导致元素比我们想象中要大（无宽度原则，少了代码，少了计算，少了维护，何乐而不为）

默认情况下 width 是有内部尺寸决定的，

当元素有position:absolute的时候，如果只有position:absolute 根据内容撑开宽高 => position:absolute 有对立属性（ left和right，top和bottom）的时候，根据对立属性撑开的元素的宽/高度，根据最近不为static的元素撑开宽高（div:{position:absolute;left: 20px;right:20px;} 距离他最近具有定位特性的祖先元素宽度是 100px ;则这个 div 元素的宽度是 60px，高度同理（如果你给元素设定的宽高，则对立属性撑开的元素的宽/高度失效

我们可以设置 box-sizing:border-box 去改变 width 的作用范围，但是 margin 所占据元素的宽度仍然是存在的，只是相对比之前要好很多。

max-width 宽度覆盖 width 宽度 min-width 宽度覆盖 max-widh 即 width < max-width < min-width，如果有 min-width 或者 max-width 存在，!important 作用在 width 上面会失效

height

height: auto 是默认高度，他的子元素设置百分比值的高度是会失效的，子元素设置 height：100% 要想生效，他的父级必须要有一个可以生效的高度；

注意了： 对于绝对定位元素而已，宽高的百分比是相对于 padding box 计算的，非绝对定位的元素是相对于 content box 计算 ，详情查看 https://demo.cssworld.cn/3/2-11.php，（.father{height: 160px,padding:30px;} .a{position: absolute;} .b{},a和b 分别是.father的父元素，但是a的高度是160px，b的高度是130)

替换元素

元素的内容能够被替换的元素，所有的替换元素都是内敛水平元素，个别浏览器的实现方式不一样，有些是 display:inline; 或者是 display:inline-block;

替换元素的尺寸计算规则：

固有尺寸：替换内容原本的尺寸

HTML尺寸：写在 html 元素上面的尺寸，比如 <img width='300'>

css 尺寸，可以通过 css 的width/min-width..设置的尺寸

优先级从上往下越来越高，如果只设置某一个属性，剩下的一个会按照原有图片比例的大小设置

注意：我们设置图片的尺寸，并不是修改元素的固有尺寸，只是修改了在页面的填充（适配方式），如果我们设置了object-fit:none;设置图片的html尺寸或者css尺寸会失效，object-fit 的实现原理和background-size在某些方面类似

content 内容生成技术用的最多的是 ::before 和 ::after 中；content 属性改变仅仅是视觉效果,本质上是没有变化的例子。用于辅助元素的生成（清除浮动伪元素）字符内容的生成，计数器

content 生成的文本无法选中，复制，就好像设置了 user-selese:none 一样

padding

css 中默认 box-sizing 是 content-box ,所以使用 padding 会增加元素的尺寸（假设没有设置 box-sizing:padding-box），属性不支持负数，百分比无论是水平方向还是垂直方向上均是相对于该元素的父元素的宽度计算的（有朋友在面试的时候被问到过，如果 padding-top: 1em 是基于字体大小，如果字体是 16px ，那么 padding-top: 16px;

百分比无论是水平方向还是垂直方向上均是相对于该元素的父元素的宽度计算的,我们可以实现根据父元素的宽度，自适应的修改子元素的宽度。比如

.box { 
    padding: 10% 50%;
    position: relative;
}
.box > img {// 宽高比5:1
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
}

内联元素的padding会影响视觉效果上面的布局。例子，因为内联元素垂直方向上的行为表现完全受line-height和vertical-align的影响。通过例子可以证明 元素的尺寸空间受 padding 的影响了，在层叠区域上，覆盖了父级，如果我们给父元素设置 overflow：auto,如果出现了滚动条，则就会影响尺寸，影响页面布局，可以在刚刚的例子上面尝试

margin

margin 无法改变当前元素的尺寸，改变的只是当前元素的位置，这一点和 padding 表现不一样。但是他会改变包裹着他的父元素的尺寸,属性支持负数。百分比无论是水平方向还是垂直方向上均是相对于该元素的父元素的宽度计算的。滚动浏览器底部留白我们推荐使用 margin，因为 padding 有兼容性问题；

如果 margin 两侧都是 auto 则均分剩余空间，如果一侧定值，另一侧 auto， 则 auto 为剩余空间。 常规流中的块级非置换元素需要满足：

'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

若恰好只有一個值被指定為 ‘auto’，則該使用值由等式求出

margi 如果存在垂直方向上（margin-top）面的合并，可以通过设置父元素的padding-top或者border-top，或者块状格式化元素实现，垂直向上的不发生合并

幽灵空白节点

如果我们在开发中遇到 div span { display: inline-block} 其中 div span 都没有设置高度，但是默认会有 18px 或者更多的高度像素存在，就是因为幽灵空白节点的作用，消除这种幽灵空白节点的的方式有 设置 span { display:inline}, 或者设置 div 的 font-size：0；或者 height 为 0

div 里面用img 标签的时候，div 下方会撑大3px 这个也是因为幽灵空白节点的存在，解决方案： img 标签加上 display:block 或者给父元素div加上 font-size：0；

line-height

div 的高度是由 line-height 高度决定的，而不是 font-size 例子

无论内联元素 line-height 怎么设置，最终父级元素高度都是由数值最大的那个 line-height 决定

可以是数值，百分比，或者长度值（长度值是指带单位的），在父元素上面并没有任何区别，区别在于继承样式上面。字符实际占据的高度是由 line-height 决定的。举个例子

可以看出 line-height 设置数值的时候，子元素继承的是属性值，可以根据字体大小动态设置的。如果是百分比或者长度值，子元素继承的是计算之后的高度，是固定的。具体怎么用需要根据需求，如果是考虑到渲染性能的，建议使用算好的数值，避免浏览器的二次计算样式渲染。

行距 = line-height - font-size，line-height 小于 1，会使得文字部分重合在一起，对于纯文字 line-height 直接决定最终高度，对于替换元素只能决定最小高度

vertical-align

用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。这些值使元素相对其父元素垂直对齐：

vertical-align 生效有一个前提条件是，只能应用于display:table-cell,inline,inline-block,inline-table

属性值： 线类 baseline(默认) ，top middle bottom

文本类 text-top text-bottom

上标下标类 sub super

数值百分比类 20px 20%

vertical-align 设置正值往上偏移，设置负值往下偏移，当属性值设置为 middle 的时候，并不是严格意义上面的居中，有可能会往下偏移一点，看一个例子

line-height 是相对于 font-size 计算的，vertical-align 属性的百分比是相对于 line-height 计算的。可见 css 世界的各类属性是相互间紧密联系而非孤立的个体。一般情况我们是知道固定的宽高的，所以很少用百分比进行计算。在样式布局中如果出现某一些诡异的现象，我们就要注意是不是有“幽灵空白节点”在作祟或者是 vertical-align

div包裹图片的时候，图片底部留有间隙的问题（间隙产生的原因是因为空白幽灵节点的问题导致的。知道了间隙产生的原理清除起来就好很多了，让图片块状化，父元素的line-height或者font-size足够小设为0，或者图片的vertical-align: bottom; 解决

float

浮动的本质是实现文字环绕效果，让父元素高度坍塌的原因就是为了实现文字环绕的效果，高度坍塌只是让跟随的内容可以和浮动元素在一个水平线上，还有另外重要的特性是行框盒子和浮动元素的不可重叠性（行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠。float 的使命是破坏文档流

clear

元素盒子的边不能和前面的浮动元素相邻，对于后面的浮动元素是不闻不问的，设置了 clear 属性的元素自身如何如何，而不是让 float 元素如何如何。只有块级元素才有效，而 ::after 等伪元素默认都是内联水平的，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因了。他的本质并不是清除浮动，只是不让自己不和 float 元素在一行显示

overflow

当子元素内容超出容器高度限制的时候，裁剪的边界是 border box

overflow 支持的属性值，auto 不足以滚动的时候没有滚动条，可以滚动的时候才有滚动条；scroll是滚动条一直存在，不管是否需要滚动; overflow:hidden;滚动依然存在，只是滚动条不存在而已。元素依然可以发生滚动 例子

position: fixed 固定定位元素的包含块是根元素，除非窗体滚动，否则 overflow 剪裁规则对固定定位都不适用

transform改变overflow对absolute元素的限制,如果父元素设置了overflow：hidden，子元素absolute，超出不会被隐藏。但是如果此时父元素再有trandform的画，子元素会被隐藏

BFC`

彻底清除浮动的影响，用它应该是最好的。利用 BFC 的结界特性彻底解决浮动对外部或者兄弟元素的影响，结界只是衍生出来的特性，裁剪才是本职工作。

BFC 块级格式化上下文

BFC应用：

防止margin重叠 清除内部浮动 自适应两（多）栏布局 防止字体环绕

触发BFC条件：

根元素 float的值不为none overflow的值不为visible display的值为inline-block、table-cell、table-caption position的值为absolute、fixed

BFC的特性：

内部的Box会在垂直方向上一个接一个的放置。 垂直方向上的距离由margin决定 bfc的区域不会与float的元素区域重叠。 计算bfc的高度时，浮动元素也参与计算 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

如果一个元素具有 BFC ,内部元素再怎么翻江倒海，翻云覆雨都不会影响外面的元素，可以实现更加健壮，更智能的自适应布局，之所以没有流行起来是因为引发 BFC 都有很多局限性

我们要尽量避免滚动容器设置 padding-bottom ,除了表现形式不一样之外，还会导致 scrollHeight 值不一样，往往会给开发带来难以察觉的麻烦，需要引起注意。textarea html 默认是可以产生滚动条的

在 pc 端窗口的滚动高度可以使用 document.documentElement.scrollTop 获取，但是在移动端可能要使用 document.body.scrollTop 获取。移动端的屏幕尺寸本身就是有限的，滚动条一般都是悬浮模式 用 document.scrollingElement 可以一统这两个值

滚动栏占据宽度的特性最大的问题就是页面加载的时候，水平居中布局的时候可能会产生晃动，因为窗口默认是没有滚动条的，html 内容自上而下加载，就会发生一开始没有滚动条，后来突然出现了滚动条，此时页面可用宽度发生变化，水平居中重新计算，导致页面发生晃动，这个体验是非常不好的

overflow:hidden 当里面的内容高度溢出的时候，滚动依然存在，仅仅只是滚动条不存在，我们看不见了而已。锚点定位效果等同于 document.querySelector('.box').scrollTop=100 ,我们可以利用他实现一些 javascript 的效果。https://demo.cssworld.cn/6/4-2.php 这个例子，https://demo.cssworld.cn/6/4-3.php 这个更好

position

position:absolute 和 float 同时存在的时候，float 无任何效果,对于绝对定位元素来说 height：100%,是第一个具有相对定位属性的祖先元素的高度，height:inherit 是单纯的父元素的高度继承；

absolute 是一个非常独立的 css 属性，其样式和行为表现不依赖其他任何 css 属性就可以完成，当我们仅仅只设置 position：absolute；会变成相对定位。无依赖 absolute 绝对定位应用场景：各类图表定位超越常规布局排版，下拉列表的定位。

当 position:absolute 遇到 left top right bottom 属性的时候，absolute 元素才真正变成定位元素。当对立方向上面同时发生定位的时候，absolute 会具有流体特性。他的宽/高度是相对于最近具有定位特性的祖先元素的宽度计算。div:{position:absolute;left: 20px;right:20px;} 距离他最近具有定位特性的祖先元素宽度是 1000px ;则这个 div 元素的宽度是 960px

比如

display:absolute;
left:0;
right:0;
top:0;
bottom:0;

会默认完全覆盖他的包含块（宽高等于他不为 static 的元素），利用绝对定位的流体特性和 margin:auto 的自动分配特性实现居中

display:relative 相对定位元素的 left top right bottom 的百分比值是相对于包含块计算的，而不是自身，定位位移是相对自身，比如父元素没有设定高度或者不是格式化高度，top:20% 等同于top:0。相对定位元素应用对立方向定位值存在的时候，只有一个方向的属性会起作用，默认文档流是自上而下，从左往右。（top/bottom 同时使用的时候，bottom 没有作用）。

尽量少使用 display:relative ，因为元素的层叠顺序提高了，会出现一些其他问题。position：relative 最小化原则，因为会改变层级关系，所以我们要尽量少用，怕出现多个 relative，一层一层依赖，最后导致整个项目高度耦合

display:relative 跟固定或者绝对定位不一样，不能用top、right、bottom和left改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。可以用top或者bottom，但它们不能一起用（bottom会被忽略）。同理，可以用left或right，但它们也不能一起用（right会被忽略）

常见的用法 position: relative给它里面的绝对定位元素创建一个包含块

z-index

z-index: 并非只对定位元素有效，flex 盒子的子元素也有设置

层叠顺序：层叠上下文（background/border) => 负 z-index => block 块状水平盒子 => float 浮动盒子 => inline 水平盒子 => z-index:0/auto => z-index 正 装饰，布局，内容

层叠准则：谁大谁先上，后来者居上；有时候我们在网页重构的时候会发现 z-index 嵌套层级错乱，这时要看看是不是受父级影响了；

pointer-events 禁止事件触发

pointer-events:none,相当于 <button> 的 disabled, 使用场景：限时点击按钮，发送验证码倒计时，事件冒泡禁用

参考链接

background-attachment: 背景图像的位置在视口内固定还是随着包含他的区块滚动

fixed: 即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local: 如果一个元素拥有滚动机制，背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

font-size

text-indent ：属性能定义一个块元素首行文本内容之前的缩进量。

letter-spacing 属性用于设置文本字符的间距表现。

background-size:cover => 缩放图片完全覆盖背景区，可能背景图片部分不可见

background-size:contain => 缩放图完全装入背景区域，可能会导致背景区域部分空白

object-fit:属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

object-fit:contain 和 background-size:contain 一样 object-fit:cover 和 background-size:cover一样

object-fit: none;被替换的内容将保持其原有的尺寸。

object-fit:fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

元素的显示与隐藏

display:none: 元素从渲染树中消失，不可见，不占据空间，辅助设备无法访问，但是有资源的加载，DOM 可以访问到元素

visibility:hidden;position:absolute: 元素不可见，不占据空间，辅助设备无法访问，但隐藏的时候可以有 transition 淡入淡出效果

visibility:hidden;: 元素在渲染树中不会消失，只是不可见，占据空间，辅助设备无法访问，子元素可以通过修改继承属性让子元素显示在页面上

opacity:0: 元素不可见，但是可以点击，不占据空间,作用于该元素以及该元素内的所有内容的透明度(子元素会继承这个颜色)

display:none 不影响 animation 动画的实现，但是影响 transition 过渡的执行

rgab(): 只作用于元素自身的颜色和其背景色。子元素不会继承透明的效果

无归类

currentColor: 变量可用于 border，background，box-shadow等，使用场景当鼠标移入的时候改变颜色，可减少大量代码。如果浏览器支持 currentColor 属性的话，我们尽可以的用这个，可扩展性强，修改的时候只要修改一个地方就好了

border 没有定义 border-color 时，设置 color 后，border-color 会被定义成 color(outline 和border很像，但是outline不占据空间,没有上下左右方向之分)outline

块级元素和 display：block 并不是一个概念；比如 li 元素的 display：list-item，table 的 display：table；但是他们都是块级元素；块级元素有一个基本的特征就是：水平流上只能单独显示一个元素，多个块级元素则换行显示（具有换行特性）clear 属性清除浮动就是这样做的

块级元素负责结构，内联元素负责样式（在我们的书写样式的时候应该记住）

最大宽度：如果内部没有块级元素或者块级元素没有设定宽度，则最大宽度实际上就是最大的连续内联盒子的宽度

css 属性分两种：一种纯视觉效果，不影响外部尺寸（box-show 和 outline）另一种是影响外部尺寸的，在移动端我们会用 padding 添加可点击区域的范围方便我们进行操作

padding 支持百分比（水平方向或者垂直方向均相对于宽度计算）

对于普通块元素，在默认的水平流下，margin 只能改变左右方向内部尺寸，垂直方向无法改变（如果我们使用 writing-mode 改变了）

视觉上的等高，margin-bottom 为负，padding-bottom 为正，正负抵消，再用 overflow：hidden;实际上是不等高的

如果想要某个块级元素右对齐，我们可以使用 margin-left:auto ,毕竟浮动是个小魔鬼，他和 text-align 控制左中右对齐正好遥相呼应

border-width,outline,box-shadow,text-shadow 等等，不支持百分比

resize CSS 属性允许你控制一个元素的可调整大小性。

可以继承的样式属性：font-size,font-family,color,ul,li,di,dd

关于响应式

响应式设计是一个网站能够兼容多个终端，而不是一个终端一个特定的版本

响应式设计的原理是：通过媒体查询（@media)查询检测不同的设备屏幕尺寸做处理

关于兼容：页面头部必须有 mate 声明的 viewport

css2.0 和css3.0对比有什么不同？

CSS3加强了CSS2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局，现在使用一个属性就能解决（例如columns等）。在展示型效果方面还加入了更多的效果（如动画，阴影，圆角等），在盒子模型和列表模块都有了改进。但是CSS3就兼容性而言，还是有些不足之处是，只能支持一些高版本的浏览器。css3是为了实现更为丰富，更为复杂的网页，基本和流无关

流体布局：利用元素流的特性实现各类布局效果（div+css 布局）,块级元素的流体特征主要表现在水平方向上，流动性并不是宽度 100% 显示这么简单，而是一种 margin/padding/border/comtent内容区域自动分配水平空间的机制

自适应布局：一套代码可以再多端运行（pc和移动端

添加了一些新的属性：

布局方面的flex，格珊布局 等等，视觉效果的，transform/animation等等

添加了一些结构标签：

相当于有意义的div标签 article：用于定义一篇文章 header：定义页面的头部 footer： nav：导航条链接 section：定义一个区域 aside：定义页面内容的侧边栏 hgroup：定义文件中一个区块的相关信息 dialog:对话弹窗

多媒体标签: video：定义一个视频 audio：定义一个音频 ….

纯表现元素（删除后利于表现与结构分离） 1.Basefont 2.big 3.center 4.font 5.s 6.strike

style标签写在body后与body前有什么区别？

一般情况下，页面加载时自上而下的。将style标签至于body之前，为的是先加载样式。 若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现FOUC现象（页面闪烁）。

过深的嵌套会增加页面的渲染和维护成本的