这是我参与更文挑战的第 3 天，活动详情查看： 更文挑战

2021-06-03 总结 盒子 HTML5 CSS3 基本尺寸

重学CSS系列，细说盒子尺寸

1. 关于content

1.1 content与替换元素

1. 替换元素，即内容可以被替换的元素，例如：img、video、iframe,和表单元素,有这样几个特性

   • 通过修改某个属性值呈现的内容就可以被替换
   • 内容外观不受页面上的css影响
   • 有自己的尺寸
   • 在一些css属性上有自己的一套表现规则，最常见的就是vertical-align属性，对于非替换元素和替换元素，这个属性的表现是不一样的。如vertical-align默认值是baseline，一般情况下的表现就是字符x的下边缘。但是到了替换元素这里就不是了，它代表的是替换元素的下边缘
   • 在替换元素当中，有替换内容的属性，伪类将会失效

2. 替换元素的尺寸计算规则

   • 如果没有HTML尺寸和CSS尺寸,则固有尺寸生效
   • 如果有HTML尺寸没有CSS尺寸,则HTML尺寸生效
   • 如果有CSS尺寸，则由CSS决定

开发技巧，关于图片加载占位 一般首屏以下的图片加载都是采用的滚屏加载的方式异步加载。然后图片使用一个占位的图片<img src="transparent.png">其实这个图片也是一个多余的资源。如何优化呢？代码如下：

img{
	display:inline-block;
	visibility:hidden;
}
img[src]{
	visibility:visible;
}

待加载的图片img标签是没有src属性的，这点要明确

图片占位提示完整版代码(仅供参考):

img {
    display: inline-block;
    width: 256px; height: 192px;
    /* 隐藏Firefox alt文字 */
    color: transparent;
    position: relative;
    overflow: hidden;
}
img:not([src]) {
    /* 隐藏Chrome alt文字以及银色边框 */
    visibility: hidden;
}
img::before {
    /* 淡蓝色占位背景 */
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 100%;
    background-color: #f0f3f9;
    visibility: visible;
}
img::after {
    /* 黑色alt信息条 */
    content: attr(alt);
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    line-height: 30px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 14px;
    transform: translateY(100%);
    /* 来点过渡动画效果 */
    transition: transform .2s;
    visibility: visible;
}
img:hover::after {
    transform: translateY(0);
}

1.2 content内容生成

先明确这一个概念， content生成的对象叫“匿名替换元素”，也就是替换元素

在项目中content属性基本是用在::after,::before当中的

1. content辅助元素生成
2. content字符内容生成，这里就不得不说一下attr的用法，attr表达式来从页面元素中动态的获取内容，例如上面的图片提示加载，提示文字就是用的attr表达式
3. content图片生成，项目中一般采用content:'';background-image:url(xxx),因为直接使用content:url(xxx),很难去控制其图片的大小

1.3 content计数器

1. counter-reset，给计数器起名，顺便告诉计数器从哪个数字开始计数，默认是0（可以规定多个计数器）
2. counter-increment, 计数递增规则(展示值会在默认值自动加1)
3. counter()和counters,显示计数，是属于css函数

示例代码：

.reset { 
  	padding-left: 20px; 
  	counter-reset: test;
}
.counter::before { 
  	content: counters(test, '+') '. '; 
  	counter-increment: test 1;
}

<div class="reset">
	<!-- 被重置重新计数 -->
    <div class="counter">

        <div class="reset">
        	<!-- 被重置重新计数 -->
            <div class="counter"></div>
            <div class="counter">
                <div class="reset">
                	<!-- 被重置重新计数 -->
                    <div class="counter"></div>
                    <div class="counter"></div>
                    <div class="counter"></div>
                </div>
            </div>
            <div class="counter"></div>

        </div>

    </div>

    <div class="counter"></div>

    <div class="counter">
        <div class="reset">
        	<!-- 被重置重新计数 -->
            <div class="counter"></div>
        </div>
    </div>

</div>

2. 关于padding

1. 不支持负值
2. 支持百分百，百分百相对于宽度计算无论是水平方向还是垂直方向

2.1 padding与图形绘制

其思想就是padding和background-clip属性配合，在有限的标签下实现一些css图形绘制效果。

例如实现一个双层圆点效果

.icon-dot {
    display: inline-block;
    width: 100px; height: 100px;
    padding: 10px;
    border: 10px solid;    
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
}

3. 关于margin

3.1 元素尺寸

• 元素尺寸，一般指padding和border，也就是指border-box的尺寸，元素DOM API中获取是：offsetWidth和offsetHeight，即“元素偏移尺寸”
• 元素内部尺寸，包括padding不包括border，即padding-box的尺寸，元素DOM API的表现是: clientWidth和clientHeight,即“元素可视尺寸”
• 元素外部尺寸，即margin-box的尺寸，没有对应的DOM API去获取（外部尺寸可以是负数，其实这个尺寸是元素占据空间的尺寸）

3.2 margin与内部尺寸

其表现是：当元素设定了width或者保存“包裹性”[绝对定位，浮动]，margin对内部尺寸没有影响；当元素呈流性（充分利用空间），这时候margin就会对内部尺寸有影响

3.3 margin合并

块级元素的margin-top和margin-bottom发生折叠，合并成一个外边距，即margin合并

特点：1.块级元素，2.只发生在垂直方向

出现场景：

1. 相邻的兄弟元素
2. 父级和第一个/最后一个子元素
3. 空块级元素

前两个好理解，第3点意思是什么呢？看下面代码：

.p{
	overflow:hidden;
}
.c{
	margin: 10px 0;
}

<div class="p">
	<div class="c"></div>
</div>

这时候.cd 这个空元素的margin-top和margin-bottom发生了折叠，实际只有10px的大小

合并规则：正正取大，正负相加，负负取小

3.4 关于margin:auto

这个就不细说了，大部分是用来实现水平居中效果的，这里就讲讲几种关于margin实现的居中,布局代码如下

<div class="p">
	<div class="c"></div>
</div>

1. 水平居中

.c{
	margin:0 auto;
}

2. 垂直居中

.p{
	height:500px
	writing-mode: vertical-lr;
}
.c{
	margin: auto
}

3. 垂直水平居中

.c{
	position:absolute;
	top:0;right:0;left:0;bottom:0;
	margin:auto;
}

3.5 margin无效的几种情况

1. display为inline的非替换元素，垂直方向的margin无效
2. 表格中的tr，td元素或者设置display为table-cell，table-row，margin无效
3. 绝对定位元素非定位方位的margin无效

4. 关于border

这部分就谈一下 border画三角形 代码如下：

div{
	width:0;
	border:10px solid;
	border-color: pink transparent transparent;
}