深入CSS-002 - 技术栈

深入理解content

content与替换元素

什么是替换元素：通过修改某个属性值呈现的内容就可以被替换的元素就称为替换元素标志性的替换元素有：img、object、video或者表单元素textarea和input等除内容可替换之外的特性： 1、内容的外观不受页面上的CSS的影响 2、有自己的尺寸 3、在很多CSS属性上有自己的一套表现规则

替换元素的默认display值

所有替换元素都是行内水平元素

替换元素的尺寸计算规则

1、固有尺寸，指的是替换内容原本的尺寸 2、HTML尺寸，只能通过HTML原生属性改变 3、CSS尺寸，指的是可以通过CSS的width和height或者max-width/min-width和max-height/min-height 计算规则具体如下： 1、如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高 2、如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高 3、如果有CSS尺寸，则最终尺寸由CSS属性决定 4、如果固有尺寸含有固定的宽高比例，同时设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示 5、行内替换元素和块级替换元素使用上面同一套尺寸计算规则如果把img标签的src属性，其实和span类似的普通行内标签使用content属性，可以把普通元素标签变成替换元素，例如

css 复制代码

<div class="father">
    <h1>哈哈哈</h1>
  </div>
h1 {
  content: url(SwiftUI.png);
}

就可以得到这种效果

注意： 1、这只能改变现实效果，但屏幕阅读设备阅读的还是文字内容，搜索引擎SEO抓取的还是原始的文本信息。 2、使用content不能设置图片的大小，移动端最好使用SVG矢量图片

content与替换元素的关系

在CSS中content属性生成的对象称为匿名替换元素 1、使用CSS的content属性生成的文本是无法选中、无法复制的 2、不能左右：empty伪类 3、content动态生成值无法获取

CSS计数器

CSS计数器效果，指的是使用CSS代码实现随着元素数目增多，数值也跟着变大属性counter-reset，计数器重置 counter-increment，计数器递增

深入padding属性

使用padding进行页面开发，很少会出现意想不到的情况

padding与元素的尺寸

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

ini 复制代码

<a href="" class="box">链接</a>

css 复制代码

.box {
  padding: 50px;
  color: #fff;
  background-color: deepskyblue;
  position: absolute;
}

结果就是这样的，（position: absolute;只是调整一下位置，否则可能显示上面的padding的宽度与下面不一致，可能是由于布局太空旷的问题）对于非替换元素的行内元素，不仅padding不会加入行盒高度的计算，margin和border也都是如此，都是不计算高度

padding的百分比值

padding不支持负值 padding支持百分比值 padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的 padding百分比值用于行内元素会断行

有关padding的其他若干

1、ol和ul列表内置padding-left，单位是px，由于使用的是绝对单位，可能会导致字与项目符号分离很远 2、很多表单元素都内置padding，如input、textarea，还有button等

深入margin

margin也可以改变元素的可视尺寸，但元素设定了width值或者保持包裹性的时候，margin对尺寸没有影响 CSS中默认的流的方向是水平方向，对于普通流体元素，margin只能改变水平方向尺寸，但是，对于具有拉伸特性的绝对定位元素，则水平方向或垂直方向都可以。在默认的水平流下，margin只能改变左右方向的内部尺寸，垂直方向无法改变行内元素的垂直margin，既不会影响外部尺寸也不会影响内部尺寸

margin的百分比值

与padding属性一样，margin的百分比值垂直方向与水平方向都是相对于宽度计算

margin合并

什么是margin合并：块级元素的上外边距与下外边距，有时合并为单外边距注意： 1、只发生在块级元素，但不包括浮动和绝对定位元素 2、只发生在垂直方向场景： 1、相邻兄弟元素margin合并 2、父级和第一个或最后一个子元素 3、空块级元素的margin合并 margin合并计算规则正正取大值，正负值相加，负负最负值自身margin合并的意义：可以避免不小心遗落或者生成的空标签影响排版和布局

深入margin：auto

margin：auto的填充规则： 1、如果一侧定值，一侧auto，则auto为剩余空间大小。 2、如果两侧均是auto，则平芬剩余空间。 margin属性的auto计算主要就是为块级元素左中右对齐设计的。垂直居中最好采用子绝父相配合margin：auto，因为不改变文档流的默认方向的情况下height是不会进行自动填充的，而绝对定位可以避免这个问题。

margin无效情况

1、display计算值inline的非替换元素的垂直是无效的，对于行内替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin 2、表格中的tr和td元素设置display计算值是table-cell或table-row的元素的margin都是无效的。 3、margin合并时，更改margin值可能没有效果。 4、绝对定位元素非定位方位的margin值无效。 5、定高容器的子元素的margin-bottom或者宽度定死的子元素margin-right的定位失效 6、行内特性导致margin无效

深入border

border不支持百分比当没有指定border-color颜色值的时候，会使用当前元素的color计算值作为边框色 CSS的border属性绘制三角形等图形，性价比最高只要是与三角形或者梯形相关的图形，都可以使用border属性来模拟