Jiez19971225‘s Blog

做自己爱做的事

0%

css世界笔记

发表于 更新于 分类于   |   字数统计: 3k(字)   |   阅读时长: 11(分)

chapter3 流，元素与基本尺寸

外在盒子与内在盒子-外在盒子负责元素是可以一行显示,还是只能换行显示;内在盒子负责宽高、内容呈现什么的。内在盒子专业的名称是“容器盒子”。y 属性值是 inline-block 的元素既能和图文一行显示,又能直接设置 width/height。

width:auto 的四种表现

  • 充分利用可用空间，即 fill-available， 4 。比方说,<div>;、 <p>;这些元素的宽度默认是 100% 于父级容器的。
  • 收缩与包裹。典型代表就是浮动、绝对定位、inline-block 元素或 table 元素,
    英文称为 shrink-to-fit,可简单理解为“包裹性”。CSS3 中的 fit-content 指的就是这种宽度表现。
  • 收缩到最小。这个最容易出现在 table-layout 为 auto 的表格中,
  • 超出容器限制。除非有明确的 width 相关设置,否则上面 3 种情况尺寸都不会主动
    超过父级容器宽度的,但是存在一些特殊情况。例如,内容很长的连续的英文和数字,或者内联
    元素被设置了 white-space:nowarp。

唯一的外部尺寸是 div 的宽，外部尺寸是指宽度由外部元素决定

外部尺寸与流体特性

正常流宽度

正常填充满盒子。

格式化宽度

格式化宽度仅出现在“绝对定位模型”中,也就是出现在 position 属性值为 absolute 或 fixed 的元素中。在默认情况下,绝对定位元素的宽度表现是“包裹性”,宽度由于内部尺寸决定。但有一种情况例外。对于非替换元素，,当 left/top 或 top/bottom 对立方位的属性值同时存在的时候,元素的宽度表现为“格式化宽度”,其宽度大小相对于最近的具有定位特性
(position 属性值不是 static)的祖先元素计算。

内部尺寸与流体特性

包裹性

自适应性 元素尺寸是元素尺寸由内部元素决定,但永远小于“包含块”容器的尺寸。因此,对于一个元素,如果其 display 属性值是 inline-block,那么即使其里面内容再多,只要是正常文本,宽度也不会超过容器。

文字少的时候居中显示,文字超过一行的时候居左显示

1
2
3
4
5
6
7
.box {
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

首选最小宽度 对于东亚文字，最小宽度为每个字的宽度，西方文字的最小宽度是由特定的连续的英文字符单元决定的，利用首选最小宽度可以实现

宽度分离原则

width 属性不与 padding/border 共存，更好的方式是使用 box-sizing:border-box

1
2
3
4
5
6
7
8
.father {
  width: 180px;
}
.son {
  margin: 0 20px;
  padding: 20px;
  border: 1px solid;
}

height:auto

对于 height 属性,如果父元素 height 为 auto,只要子元素在文档流中,其百分比值完全就被忽略了

如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为 auto，auto 无法进行百分比计算

height:100% 的两种计算，绝对定位的宽高百分比计算是相对于 padding box ，,非绝对定位元素则是相对于 content box 计算的。

min-width/max-width

1
2
3
4
img {
  max-width: 100%;
  height: auto !important;
}

height:auto 是必需的,否则,如果原始图片有设定 height, max-width 生效的时候,图片就会被水平压缩。

max-*初始值是 none，min-*初始值是 auto

数值变化无动画，需要设置初始值为 0

1
2
3
4
5
6
7
.box {
  min-height: 0;
  transition: min-height 0.3s;
}
.box:hover {
  min-height: 300px;
}

max-*会覆盖 !important 的 width/height

::selection 选择器匹配被用户选取的选取是部分。即对选中文本的操作。
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

chapter4 盒尺寸四大家族

content 与替换元素

<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素

vertical-align 在替换元素的基线定义为元素的下边缘

<select> 也是替换元素

<input>和<button>按钮的区别在钮默认的 white-space 值不一样,前者是 pre,后者是 normal

透明图片占位的替代方法

1
2
3
4
5
6
img {
  visibility: hidden;
}
img[src] {
  visibility: visible;
}

对于 Firefox 浏览器,src 缺省的\不是替换元素,而是一个普通的内联元素,所以使用的就不是替换元素的尺寸规则,而是类似\的内联元素尺寸规则,宽高会无效。因此可以在 CSS 重置时加上下面一条

1
2
3
img {
  display: inline-block;
}
  • :before,:after 伪元素是非替换元素，其 content 属性若显示图片则显示的是图片的固有尺寸，不会因 width 和 height 更改
  • 基于伪元素的图片内容生成技术 链接
  • ,使用 content 属性,我们还可以让普通标签元素变成替换元素。一般网站的标志使用的是 h1 标签，可以用 content 改变图片
  • 使用 content 属性生成的文本无法选中，无法复制，像设置了 user-select:none 一样
  • :empty 伪元素依然会选取 有 content 属性的元素
  • 动态加载效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dot {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -0.25em;
  overflow: hidden;
}
dot::before {
  display: block;
  content: "...\A..\A.";
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}
@keyframes dot {
  33% {
    transform: translateY(-2em);
  }
  66% {
    transform: translateY(-1em);
  }
}

padding 属性

  • 内联的元素设置垂直 padding 依然有效果，如果父元素设置 overflow: auto，会显示滚动条。id 锚点元素可以设置为内联元素然后设置 padding-top 使得定位位置偏下
  • 实际上,对于非替换元素的内联元素,不仅 padding 不会加入行盒高度的计算,margin 和 border 也都是如此,都是不计算高度,但实际上在内联盒周围发生了渲染。
  • padding 的百分比数值无论水平竖直都是相对父元素宽度计算的

margin 与元素尺寸以及相关布局

  • 只有元素是“充分利用可用空间”状态的时候,margin 才可以改变元素的可视尺寸。因为只要宽度设定,margin 就无法改变元素尺寸。对于水平排列的列表，采用 float 方案，可以在 ul 设置负的 margin 数值，来增加可用宽度。
  • 由于 Firefox 和 Chrome 浏览器对于子元素触发滚动条的方式不一样，滚动容器底部留白使用 padding 是不推荐的，可以接触 margin 的外部尺寸特性来实现底部留白
  • 两栏等高
1
2
3
4
5
6
7
8
.column-box {
  overflow: hidden;
}
.column-left,
.column-right {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

视觉层多了 9999px 高度可以使用的背景色，当任一栏的高度增加时，父元素总的高度增加

  • margin 的百分比数值无论水平竖直都是相对父元素宽度计算的
  • margin 合并的 3 种场景
    • 相邻兄弟元素 margin 合并
    • 父级和第一个/最后一个子元素
    • 空块级元素的 margin 合并
  • margin 合并的计算规则 “正正取大值”
    “正负值相加”
    “负负最负值”
  • 由于 css 中 margin 初始值是 0，实现块级元素右对齐可以使用 margin-left:auto
  • 实现块级元素垂直居中 绝对定位元素的格式化高度即使父元素 height:auto 也是支持的,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.father {
  width: 300px;
  height: 150px;
  background-color: #f0f3f9;
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: #cd0000;
  margin: auto;
}
  • margin 无效
    • display 计算值 inline 的非替换元素的垂直 margin 是无效的
    • 表格中的和元素或者设置 display 计算值是 table-cell 或 table-row 的 margin 是无效的
    • margin 合并的时候,更改 margin 值可能是没有效果的
    • 绝对定位元素非定位方位的 margin 值“无效”
    • 定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的失效

border 属性

  • border-width 不支持半分比
  • 透明边框技巧 使用透明 border 增加点击区域
  • 图形构建 三角形效果
  • 登高布局技术 http://demo.cssworld.cn/4/4-4.php

charpter5 内联元素与流

ex 单位 对应 x-height，可用于图标与文字的对齐

line-height 的默认值是 normal,还支持数值、百分比值以及长度值。

无论内联元素 line-height 如何设置,最终父级元素的高度都是由数值大的
那个 line-height 决定的,我称之为“内联元素 line-height 的大值特性”

table-cell 元素设置 vertical-align 垂直对齐的是子元素,但是其作用的并不是子元素,而是 table-cell 元素自身

消除 strut 的影响 图片块状化 设置 lineheight 为 0 fontsize 足够小 图片设置 vertical-align

text-align:justify 文字向两侧对齐，对最后一行无效。

一个 inline-block 元素,如果里面没有内联元素,或者 overflow 不是 visible,
则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。

vertical-align 的百分比数值是按照行高计算的

改造“幽灵空白节点”的基线位置可以使用 font-size：0

基于 vertical-align 属性的水平垂直居中弹框 链接

charpter6 流的破坏与保护

float

  • float 导致的。float 都有哪些有意思的特性呢?具体如下:
    • 包裹性;
    • 块状化并格式化上下文;
    • 破坏文档流;
    • 没有任何 margin 合并;
  • 设定了 float 的 inline-table 计算为 table，其他都为 block
  • clearfix
1
2
3
4
5
.father:after {
  content: "";
  display: table;
  clear: both;
}

bfc

  • 那什么时候会触发 BFC 呢?常见的情况如下:
    • <html>根元素;
    • float 的值不为 none;
    • overflow 的值为 auto、scroll 或 hidden;
    • display 的值为 table-cell、table-caption 和 inline-block 中的任何一个
    • position 的值不为 relative 和 static。
  • 尽量避免滚动容器设置 padding-bottom 值
  • 永远不可能实现一个方向溢出剪裁或滚动,另一方向内容溢出显示的效果

overflow

  • 则当子元素内容超出容器宽度高度限制的时候, 剪裁的边界是 border box 的内边缘,而非 padding,box 的内边缘
1
2
3
4
5
.ell {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

scrollbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
我们平时开发中只用下面 3 个属性:
::-webkit-scrollbar {
  /* 血槽宽度 */
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /* 拖动条 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* 背景槽 */
  background-color: #ddd;
  border-radius: 6px;
}

chapter7 css 层叠规则

!!!z-index 仅可以在定位元素上生效

  • background/border 是装饰属性，浮动和块用作布局，而内联元素作为内容，自然在上面显示

层叠顺序

层叠上下文 background/border
负 z-index
block 块状水平盒子
float 浮动盒子
inline/inline-block 水平盒子
z-index:auto/z-index:0
正 index

层叠上下文

创建

  • 页面根元素称为根层叠上下文
  • z-index 为数值的定位元素是传统层叠上下文

  • css3 属性

    • flex 的布局元素同时 z-index 不为 auto
    • opacity 不为 1
    • mix-blend-mode 不是 normal

  • 定位元素会层叠在普通元素的上面的原因是元素一旦成为定位元素， 其 z-index 就会自动生效，此时其 z-index 就是默认的 auto，也就是 0 级别。

  • opacity 动画问题，当 opacity 不为 1 的时候，其具有层叠上下文 z-index:auto，导致其显示于文字之上，解决方法是设置文字的 z-index 为正数值

负 index 应用

  • 可访问性隐藏，可以隐藏元素，只需要层叠上下文内某一个父元素加背景色