CSS世界读书笔记（二）盒尺寸

2018-09-21

content box

什么是替换元素

通过修改某个属性值呈现的内容就可以被替换的元素成为替换元素

如<img><object><video><iframe><textarea><input>

内容的外观不受页面的css影响
有自己的尺寸
在CSS属性上有自己的一套表现规则

替换元素的默认display值

都是内联水平元素

替换元素的尺寸计算规则

固有尺寸

替换内容原本的尺寸。如图片视频作为独立文件本身就有尺寸
HTML尺寸

HTML尺寸只能通过HTML原生属性改变，如width height size col row
CSS尺寸

可以通过CSS的宽高设置的尺寸

如果没有CSS尺寸和HTML尺寸，使用固定尺寸作为最终的宽高

如果没有CSS，使用HTML尺寸

如果有CSS，使用CSS属性决定

如果固有尺寸含有宽高比例，如果同时仅设置了宽度或高度，元素依然按照固定的宽高比显示

如果条件都不符合，最终表现为宽300px高150px

内联替换元素和块级替换元素使用上面同一套尺寸计算规则，所以图片设置display: block跨度也没变成100%

object-fill

图片中的content替换内容默认适配方式是fill，所以设置图片的宽高在content box可以改变图片显示大小。

在css3中，<img>和其他一些替换元素的替换内容的适配方式可以通过object-fit属性修改，默认fill，如果设置object-fill:none，则图片尺寸就完全不受控制了

设置object-fit: contain，图片会保持比例图片，尽可能利用HTML尺寸但又不会超出的方式显示

content与替换元素

替换元素和非替换元素就差个src或content

content属性生成的对象称为匿名替换元素

content属性生成的内容都是替换元素

使用content生成的文本是无法选中、复制、被屏幕阅读设备读取、被搜索引擎抓取
content动态生成的值无法获取

content内容生成技术

辅助元素生成

核心在伪元素本身，通常content设置为空字符串。

使HTML代码更简洁

清除浮动带来的影响

.clear:after {
  content: '';
  display: table/block;
  clear: both;
}

content字符内容生成

配合@font-face实现图标字体效果

插入Unicode字符实现某些布局

:after {
  content: '\A'; /* 换行符中的LF字符 Unicode编码是000A */
  white-space: pre;
}

CR \D - 回车 LF \A- 换行

content图片生成

直接用url功能符显示图片

content开启闭合符号生成

content支持的属性有一对不常用的open-quote和close-quote关键字，开启的引号和闭合引号

content attr属性值内容生成

content计数器

1.counter-reset 计数器重置，给计数器起个名字，顺便告诉从哪个数开始计数

/* 计数器名称xxx 起始值2 */
.counter { counter-reset: xxx 2;}
.counter::before { content: counter(xxx); }
/* 也可以多个同时命名 */
.c2 { counter-reset: xxx 2 xxx2 3;}

2.counter-increment 计数器递增，值为counter-reset的1个或多个关键字，后面可以跟数字，表示每次计数的变化值

1	.xxx { counter-increment: counter 2 xxx 3 } 增加2 和 3

3.counter()/counters()方法

类似css3的calc()

作用是显示计数 counter(name, style)

style支持list-style-type的那些值，可以使用罗马数字表示

counters(name, string)

string表示子序号的连接字符串，如1.1的string就是.，1-1就是-

content内容生成的混合特性

content内容生成语法可以混合在一起使用

padding

padding与元素的尺寸

CSS中默认的box-sizing是content-box，所以使用padding会增加元素的尺寸

误区：设置了box-sizing: border-box，元素的尺寸就不会变化。大多数情况下是对的，但是padding足够大的时候，如width: 80px;padding: 20px 60px;box-sizing: border-box;，此时宽度为120px（块状特性的元素）

内联元素的padding

错误认识：内联元素的padding只会影响水平方向，不会影响垂直方向

内联元素的padding在垂直方向同样会影响布局。只是因为内联元素没有可视宽度和可视高度的说法（clientHeight和clientWidth永远是0），垂直方向的行为完全受line-height和verticle-align的影响，视觉上并没有改变，因此给我们的感觉是垂直padding没有起作用

如果我们给内联元素加个背景色或者边框，可以看到尺寸空间受到了padding的影响

尺寸虽然有效，但是对上下元素的原本布局却没有任何影响

a {
  padding: 50px;
  background-color: rgba(0, 0, 0, 0.2);
}

CSS中还有很多这种不影响其他元素布局而是出现层叠效果的现象。如relative的定位，box-shadow、outline等

box-shadoe outline是不影响尺寸的，而内联的padding影响尺寸，如果父元素设置overflow: auto，超出父元素高度会出现滚动条

应用

1.可以在不影响布局的情况下，增加链接或按钮点击区域的大小

2.使用内联元素的padding实现高度可控的分隔线

3.使用锚点定位时，定位元素离页面顶部多一点距离，可使用内联元素的padding，不影响布局

padding的百分比值

块状元素

1.和margin不同，不支付负值

2.padding百分比值无论水平还是垂直方向都是相对于宽度计算的

内联元素

同样相对于宽度、默认高度和宽度细节有差异、padding会断行

padding应用

宽高比例不变的盒子，实现整屏幕图片的显示

padding: 10% 50% 1:5 高宽的盒子

标签元素内置的padding

1.ol/ul列表内置padding-left

2.很多表单元素都内置padding

padding与图形绘制

padding属性和background-clip属性配合

1.不使用伪元素，一层标签实现三道杠分类图标效果

2.不实用伪元素，一层标签实现双层圆点效果

margin

margin与元素尺寸和布局

元素尺寸：元素的border-box尺寸 (offsetWidth)

元素内部尺寸：包括padding但不包括border (clientWidth)

元素外部尺寸：包括margin

margin与元素的内部尺寸

元素设置了width值，或保持包裹性的时候，margin对尺寸没有影响，只有元素是『充分利用可用空间』状态的时候，margin才可以改变元素的可视尺寸

CSS默认流方向是水平的，因此，对于普通流体元素，margin只能改变元素的水平方向尺寸

例：两端对齐效果

/* ul右侧可用空间增加的20px，li的右侧可以紧贴着父容器 */
ul { margin-right: -20px }
ul > li {
  float: left;
  width: 100px;
  margin-right: 20px;
}

margin与元素的外部尺寸

对于普通块状元素，在默认水平流下，margin只能改变左右方向的内部尺寸，垂直方向无法改变。

只能使用子元素的margin-bottom来实现滚动容器的底部留白

margin的百分比值

都是相对于宽度计算

margin合并

块级元素的上外边距margin-top与下边距margin-bottom有时会合并为单个外边距

1.块级元素，不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化

2.只发生在垂直方向（当前文档流方向的垂直方向）

margin: auto

填充闲置空间

1.如果一侧定值，一侧auto，则auto为剩余空间大小

.father {
  width: 300px;
}
.son {
  width: 200px;
  margin-right: 80px;
  margin-left: auto; /* 300-200-80 20px */
}

如果不设置margin-right则为0，效果就是块级元素右对齐

2.如果两侧均是auto，则平分剩余空间

触发margin: auto计算有一个前提：width或height是auto的时候，元素是具有对应方向的自动填充特性的，所以有时子元素设置高度再margin: auto并不会垂直居中

使用margin垂直居中

1.使用writing-mode改变文档流方向

2.绝对定位元素的margin: auto垂直水平居中，将上下左右都设置为0

margin无效情形

1.display: inline的非替换元素的垂直margin是无效的，替换元素margin有效，但是没有合并

2.表格中<tr><td>元素或设置display: table-cell/table-row的元素margin无效

3.margin合并的时候，更改可能没有效果

4.绝对定位元素非定位方位的margin无效，如没有设置right、bottom，这两个方向上的margin无效

5.定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位失效

想使用margin属性改变自身的位置，必须和当前元素定位方向一样的margin属性才可以，例如普通元素在普通流下，定位方向是左侧以及上方，此时只有marign-left margin-top可以影响元素的定位。如果通过属性改变了定位方向，如float: right或绝对定位的right，则margin-right才可以影响定位

6.内联特性导致的margin无效

border

border-style: none solid dashed dotted

double双线边框

border颜色不设置是元素color属性

border与透明边框技巧

1.右下方background定位

.box {
  border-right: 50px solid transparent;
  background-position: 100% 50%;
}

2.增加点击区域大小

3.三角形的绘制

4.等高布局

一侧的布局移动到父元素的宽边框上，不能使用overflow: hidden