1. display:flex
https://blog.csdn.net/w390058785/article/details/83543198
https://www.runoob.com/w3cnote/flex-grammar.html
https://www.cnblogs.com/dodocie/p/7058493.html
2. CSS3 box-sizing 属性
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
https://blog.csdn.net/huangpin815/article/details/76651680
3. max-width(css2)
http://www.w3school.com.cn/cssref/pr_dim_max-width.asp
实例
设置段落的最大宽度：
p
{
max-width:100px;
}
浏览器支持
所有主流浏览器都支持 max-width 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
max-width 定义元素的最大宽度。
说明
该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.maxWidth="50px" |
可能的值
| 值 | 描述 |
|---|---|
| none | 默认。定义对元素的最大宽度没有限制。 |
| length | 定义元素的最大宽度值。 |
| % | 定义基于包含它的块级对象的百分比最大宽度。 |
| inherit | 规定应该从父元素继承 max-width 属性的值。 |
4. content 属性
https://www.runoob.com/cssref/pr-gen-content.html
https://blog.csdn.net/ganyingxie123456/article/details/70338260
https://blog.csdn.net/haoyanyu_/article/details/80238583
5. text-shadow 属性
https://www.runoob.com/cssref/css3-pr-text-shadow.html
https://blog.csdn.net/weixin_42613755/article/details/80978142
6. background-size属性
http://www.w3school.com.cn/cssref/pr_background-size.asp
7. white-space 属性
http://www.w3school.com.cn/cssref/pr_text_white-space.asp
定义和用法
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
实例
规定段落中的文本不进行换行
p{
white-space: nowrap
}可能的值
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
8. text-overflow 属性
http://www.w3school.com.cn/cssref/pr_text-overflow.asp
定义和用法
text-overflow 属性规定当文本溢出包含元素时发生的事情。
| 默认值： | clip |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.textOverflow="ellipsis" |
语法
text-overflow: clip|ellipsis|string;| 值 | 描述 | 测试 |
|---|---|---|
| clip | 修剪文本。 | 测试 |
| ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
| string | 使用给定的字符串来代表被修剪的文本。 |
实例
使用 text-overflow 属性：
div.test
{
text-overflow:ellipsis;
}9. ::after和::before
https://blog.csdn.net/w405722907/article/details/79446038
10.CSS水平居中+垂直居中+水平/垂直居中的方法总结
https://blog.csdn.net/weixin_37580235/article/details/82317240
11. transition 属性
https://www.runoob.com/cssref/css3-pr-transition.html
实例
将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px：:
div { width:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover {width:300px;}浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
属性定义及使用说明
transition 属性设置元素当过渡效果，四个简写属性为：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
| 默认值： | all 0 ease 0 |
|---|---|
| 继承： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
12. transform 属性
https://www.runoob.com/cssref/css3-pr-transform.html
实例
旋转 div 元素：
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ }
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- |
属性定义及使用说明
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
为了更好地理解Transform属性,请查看 在线实例.
| 默认值： | none |
|---|---|
| 继承： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transform="rotate(7deg)" |
语法
transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
13. background
https://www.runoob.com/css3/css3-backgrounds.html
CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
- background-image
- background-size
- background-origin
- background-clip
您还将学习如何使用多重背景图像。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) | 4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- | 9.0 | 4.0 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
实例
#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
可以给不同的图片设置多个不同的属性
实例
#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
实例 1
重置背景图像：
div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }
实例 2
伸展背景图像完全填充内容区域：
div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; }
CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
实例
在 content-box 中定位背景图片：
div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }
CSS3 多个背景图像 | |
| CSS3 允许你在元素上添加多个背景图像。 |
实例
在 body 元素中设置两个背景图像：
body { background-image:url(img_flwr.gif),url(img_tree.gif); }
CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
实例
#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }
新的背景属性
| 顺序 | 描述 | CSS |
|---|---|---|
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
补充：CSS3 多重背景(multiple backgrounds)
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;注意：
- 用逗号隔开每组 background 的缩写值；
- 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
- 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
- background-color 只能设置一个。
14. flex布局中align-items 和align-content的区别
https://blog.csdn.net/sinat_27088253/article/details/51532992
https://blog.csdn.net/jarniyy/article/details/81179885
2056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
