20210523
** 日志**
一、知识总结
1、 盒子模型
盒模型的各个部分：
Content box: 用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性
设置。
标准盒模型和替代盒模型
实例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mydiv{
width: 500px;
height: 300px;
border: solid aqua;
padding: 0px 60px 50px 30px;
}
.mydiv1{
width: 500px;
height: 300px;
border: solid red;
padding: 10px 10px 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="mydiv">今天又是新的一天
</div>
<div class="mydiv1">
</div>
</body>
2、盒子模型和内联盒子
3、display
display属性的值：
block:元素呈现块元素特征，此元素前后会带有换行符
inline:元素呈现行内元素特征，元素前后没有换行符
inline-block：元素呈现行内并保持宽和高的属性，行内块元素
none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间。
background-color:背景颜色
background-image：背景图片
4、 控制背景平铺的属性：
no-repeat ：不重复。
repeat-x ：水平重复。
repeat-y ：垂直重复。
repeat ： 在两个方向重复。
5、 调整背景图像的大小
background-size属性：
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽
比不同，则可能在图像的任何一边或顶部和底部出现间隙。
6、 背景图像定位：background-position
属性：top 和 right
7、渐变背景
linear-gradient 线性梯度渐变，延伸到整个盒子上
radial-gradient 有一个固定的大小，因此会重复
8、background-clip
background-clip 设置元素的背景是否延伸到边框、内边距盒子、内容盒子下
面。
值：
border-box 背景延伸至边框外沿（但是在边框下层）
padding-box 背景延伸至内边距（ padding ）外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区（content box）外沿
text 背景被裁剪成文字的前景色(这是一个实验性的 API，请尽量不要在生产环境中使用它。)
9、CSS中的书写模式
writing-mode 的三个值分别是：
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
因此， writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从
右到左，要么是从左到右。而这决定了文本的方向。
10、溢出内容
实例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.doc {
font-size: 24px;
color: #8A2BE2;
font-weight: 400;
}
随着科学技术的发展，计算机网络已经融入我们生活的方方面面。这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多，就会出现
溢出的情况。如果溢出设置为隐藏，则任何溢出都将不可见。
此内容在放框内。