学海无涯，不要沉浸在知识的海洋里，迷失自己。
要知道自己想要什么，抓住重点，不忘初心。
这个世界上百分之20的人，掌握着百分之80的财富。
接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。
往期知识点回顾：
重点属性-media
重点属性-position
重点属性-float
重点属性-flex
重点属性-overflow
重点属性-background
一、重点属性display
display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
block
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
inline
span 是一个标准的行内元素。一个行内元素可以在段落中 像这样 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。
none
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
其他 display 值
还有很多的更有意思的 display 值，例如 list-item 和 table 。之后我们会讨论到 inline-block 和 flex 。
额外知识点
就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。
面试题：
1.常用的dispaly属性值有哪些？
block、inline、inline-block、flex、table、list-item........
2.display:none 与visibility: hidden 有什么区别？
把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
3.行内元素和块元素的区别？
一般来说，html的元素分为两种，即块级元素和行内元素。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；
常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea
两者之间的区别：
区别：
1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行
2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本
4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用。
需要敲代码练习的地方：
熟悉对块级元素和行内元素
对块级元素和行内元素的区别进行实践练习
对块级元素和行内元素width 和 height 的要求
块级元素和行内元素对设置margin和padding属性的要求
display:none 与visibility: hidden 属性的区别
参考文献：
CSS Content 属性的几种妙用和技巧
Content 属性是 CSS 中一个非常有用的属性，可以用于插入生成内容，如在 ::before 和 ::after 伪元素中添加文本或图标。
Content 属性的特点：以下是content属性的几种妙用和技巧：1、插入文本
可以使用content属性在伪元素中插入文本，如下所示：
.example::before {
content: "这是一个栗子";
}这个代码中，它会在.example 元素前插入文本“这是一个栗子”。
2、插入图标
可以使用content属性在伪元素中插入图标，如下所示：
.example::before {
content: url(icon.png);
}这个代码中，它会在.example 元素前插入一个图标。
3、属性值计数器
可以使用content属性结合counter函数来创建属性值的计数器。
3.1 在每个列表项前显示一个数字：
html代码
<ol>
<li>item1li>
<li>item2li>
<li>item3li>
ol>css代码
ol {
counter-reset: item;
}
li::before {
content: counter(item) ". ";
counter-increment: item;
}效果
3.2 定义计数器的初始值
html代码
<ol>
<li>item1li>
<li>item2li>
<li>item3li>
ol>css代码
ol {
counter-reset: item 3; /* 定义起点为 3 */
}
li::before {
content: counter(item) ". ";
counter-increment: item;
}效果
定义了初始值为 3 ，从 3 开始计数，依次为 4、5、6。不定义初始值的话，默认值为 0 ，如上一个例子。
4、引用其他元素的属性值
可以使用attr函数和content属性来引用其他元素的属性值，如下所示：
.example::before {
content: attr(title);
}这个代码中，它会在.example元素前插入一个文本，文本内容为.example元素的title属性的值。
5、给链接添加图标
html代码
<div>
<a href="https://www.example.com">设计师工作日常a>
div>css代码
a[href^="https"]::before{
content: url('designer-share.png');
}效果
这个代码中，::before 伪元素会在 a 标签内部的文本前面插入一个外部链接图标。使用 " ^= " 选择器匹配 href 属性值以 https 开头的链接。
6、给某些元素添加额外信息
html代码
<div class="wrap">
<a data-tooltip="Designer Share" href="https://www.example.com">设计师工作日常a>
div>css代码
.wrap{
width: 300px;
height: 300px;
position: relative;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
a[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -50px;
left: 0;
background: black;
color: white;
padding: 5px 10px;
border-radius: 2px;
}效果
鼠标放到文字上，会弹出 tip 信息。
7、实现一些简单的动态效果
html代码
<button type="button"> 鼠标放上来看效果 button>css代码
button::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent red transparent;
margin: 0 4px;
transform: translateY(0);
transition: transform 0.2s ease-out;
}
button:hover::after {
transform: translateY(-3px);
}效果
鼠标放上去，按钮中的小三角会有上移的效果。
8、实现响应式图片
.card::before {
content: "";
display: block;
background-image: url("small-image.jpg");
background-size: cover;
}
@media (min-width: 768px) {
.card::before {
background-image: url("large-image.jpg");
}
}根据屏幕大小的不同，改变 background-image 的值。在移动端显示小图，在pc端展示大图。注意：这种方法，只适合单张图片。
以上就是 css content 的一些实用小技巧和小创意，可以帮助我们实现一些独特的效果。如果你还知道一些更创意的用法，欢迎留言讨论。
