CSS 基础属性及属性值

2019/10/01 web

被忽视的常用的 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 遇到 left top right bottom 属性的时候,absolute 元素才真正变成定位元素。当对立方向上面同时发生定位的时候,absolute 会具有流体特性。他的宽度是相对于最近具有定位特性的祖先元素计算。div:{position:absolute;left: 20px;right:20px;} 距离他最近具有定位特性的祖先元素宽度是 1000px ;则这个 div 元素的宽度是 960px

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

max-width 宽度覆盖 width 宽度 min-width 宽度覆盖 max-widthwidth < 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

padding

css 中默认 box-sizingcontent-box ,所以使用 padding 会增加元素的尺寸(假设没有设置 box-sizing:padding-box),属性不支持负数,百分比无论是水平方向还是垂直方向上均是相对于宽度计算的

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’,則該使用值由等式求出

你的问题中除了 width 和 margin-left 其他值都是 0 ,把宽度值带入计算得到 margin-left = 包含块的宽度-100px 。所以最终 div 会靠近包含块的右边。

幽灵空白节点

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

line-height

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

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

div 的高度是由 line-height 高度决定的,而不是 font-size

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

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

多行文本和替换元素的垂直居中实现原理和单行文本就不一样了,单行文本不需要借助 vertical-align ,多行文本和替换元素的垂直居中需要另外加上一句 vertical-align:middle

vertical-align

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

float

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

clear

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

overflow

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

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

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

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

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

滚动栏占据宽度的特性最大的问题就是页面加载的时候,水平居中布局的时候可能会产生晃动,因为窗口默认是没有滚动条的,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:absolutefloat 同时存在的时候,float 无任何效果,对于绝对定位元素来说 height:100%,是第一个具有相对定位属性的祖先元素的高度,height:inherit 是单纯的父元素的高度继承;在绝对定位中 white-space:nowrap 可以让宽度表现从包裹性变成最大可用宽度。具有相对特性的无依赖 absolute 绝对定位(无依赖定位就是相对定位,仅仅是不占据 css 流空间而已),absolute 是一个非常独立的 css 属性,其样式和行为表现不依赖其他任何 css 属性就可以完成,当我们仅仅只设置 position:absolute;会变成相对定位。无依赖 absolute 绝对定位应用场景:各类图表定位超越常规布局排版,下拉列表的定位。text-align 可以改变 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,一层一层依赖,最后导致整个项目高度耦合

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

元素的显示与隐藏

display:none: 元素不可见,不占据空间,辅助设备无法访问,但是有资源的加载,DOM 可以访问

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

visibility:hidden;: 元素不可见,占据空间,辅助设备无法访问

opacity:0: 元素不可见,但是可以点击,不占据空间

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

无归类

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

border 没有定义 border-color 时,设置 color 后,border-color 会被定义成 color

块级元素和 display:block 并不是一个概念;比如 li 元素的 display:list-itemtabledisplay:table;但是他们都是块级元素;块级元素有一个基本的特征就是:水平流上只能单独显示一个元素,多个块级元素则换行显示(具有换行特性)

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

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

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

css 属性分两种:一种纯视觉效果,不影响外部尺寸(box-showoutline)另一种是影响外部尺寸的,在移动端我们会用 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 属性允许你控制一个元素的可调整大小性。

caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 的东西。

一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents