关于CSS的学习内容三

茹嗨瑞

已于 2022-10-29 15:41:19 修改

阅读量436

点赞数

分类专栏： # css学习笔记文章标签： css 前端 html

于 2022-08-10 17:45:14 首次发布

本文链接：https://blog.csdn.net/m0_53181852/article/details/126270733

版权

css学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于CSS的学习内容三

35.HTML5发展史

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

36.HTML5的浏览器兼容

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

常用的五大浏览器有：IE,chrome,firefox,safari,opera

37.HTML5语法

内容类型（ContentType）HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"。DOCTYPE声明不区分大小写
指定字符集编码meta charset=“UTF-8”
可省略标记的元素

不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta

可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

可以省略全部标记的元素：html、head、body、colgroup、tbody

省略引号属性值可以使用双引号，也可以使用单引号。

38.HTML新增语义化标签

section元素表示页面中的一个内容区块
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中一个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分
figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素表示页面中的主要的内容 (ie不兼容) 兼容低版本浏览器：

39.Video和audio的应用

video元素定义视频Video元素
audio元素定义音频Audio元素
controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

40.HTML5智能表单------新增

Type=“color” 生成一个颜色选择的表单
Type=“tel” 唤起拨号盘表单
Type=“search” 产生一个搜索意义的表单
Type=“range” 产生一个滑动条表单
Type=“number” 产生一个数值表单
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“date” 限制用户必须输入日期
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“time” 限制用户必须输入时间类型
Type=“datetime-local” 选取本地时间

input类型设置

email：专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

url类型

专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。mail地址。例：

Nuember类型

专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。例：

range类型

是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。例：
min 最小值 ;max 最大值 ;step 数字间隔

(date, month, week, time, datetime,datetime-local)

拥有多个可供选取日期和时间的新输入类型。

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
例：<input type=“month” &gr; Search：输入的是搜索的关键字，与type=“text” 基本上一样。 Color：用来选取颜色。

41.表单新属性

1.Datalist ：选项列表

例： <input type="url" list="url_list" name="link" />
  <datalist id="url_list">  
  <option label="W3School" value="http://www.W3School.com.cn" /> 
   <option label="Google" value="http://www.google.com" />  
  <option label="Microsoft" value="http://www.microsoft.com" /> 
   </datalist>
  提示：option 元素永远都要设置 value 属性。

2.属性

placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
required属性：验证输入不能为空
list属性：结合datalist元素使用
autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/“”。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示：

3.自动验证

required可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
pattern将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。例：
min、max、step：为包含数字或日期的 input 类型规定限定（约束） max: 最大值 min: 最小值 step: 数字间隔例：<input type="number“ min=“0” max=“10” step=“3” />
Multiple:可以输入一个或多个值，每个值之间用逗号分开例：还可以应用于file

42.CSS3的概念和优势

CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）

43.渐进增强和优雅降级（重点）

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

44.CSS3选择器

1.层级选择器

E>F 子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

E~F 通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

2.属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值；

2、E[attr=“value”]：指定属性名，并指定了该属性的属性值；

3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

扩展知识

4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的；

5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的

6、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value；

7、E[attr|=“value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

3.伪类选择器

1、结构性伪类选择器

X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素X

2、目标伪类选择器

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

3、UI 元素状态伪类选择器

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

4、否定伪类选择器

E:not(s) （IE6-8浏览器不支持:not()选择器。）

匹配所有不匹配简单选择符s的元素E

5、动态伪类选择器

E:link

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active

用户行为选择器

选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover

用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点

45.CSS3文本属性-前缀

在这里插入图片描述

46.文本阴影属性语法及应用

在这里插入图片描述

说明：水平、垂直阴影的位置允许负值可进行多阴影设置

47.字体模块：@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）

@font-face的语法规则：@font-face {

font-family: ;

src: ]*;

[font-weight: ];

[font-style:

}

@font-face语法说明：

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

实例：@font-face {

font-family: ‘icomoon’;

src:url(‘fonts/icomoon.eot’);

src:url(‘fonts/icomoon.eot?#iefix’) format(‘embedded-opentype’),

url(‘fonts/icomoon.svg#icomoon’) format(‘svg’),

url(‘fonts/icomoon.woff’) format(‘woff’),

url(‘fonts/icomoon.ttf’) format(‘truetype’);

font-weight: normal;

font-style: normal;

}

48.CSS背景的新增属性

1、Background-size 背景尺寸

说明：background-size 规定背景图像的尺寸

属性值：

length

规定背景图的大小。第一个值宽度，第二个值高度。

Percentage(%)

以百分比为值设置背景图大小

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

2、css3多背景属性

Eg:

p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片

background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面

background-color:yellow; //这是定义的默认背景颜色，全部适合 }

49.CSS3边框圆角属性

Border-radius 圆角边框

.box{ border-radius: 5px 10px 20px 50px }
.div1{border-radius: 2em/1em} 以斜杠/分开后面的参数: 第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径
.div1{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px } 按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。

50.box-shadow盒子阴影

属性值：
在这里插入图片描述

Eg:box-shadow: 10px 10px 5px #888888

51.CSS3渐变

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

1、线性渐变

语法： background: linear-gradient(direction, color-stop1, color-stop2, …);

说明： direction：默认为to bottom，即从上向下的渐变；

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

示例1：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }

div { background:linear-gradient(to right, red , blue) }

div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */

div { background:linear-gradient(to top, red , blue) }

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变

示例2：to right bottom、to right top、to left bottom、to left top

div { background: linear-gradient(to right bottom, red , blue); }

div { background: linear-gradient(to right top, red , blue); }

div { background: linear-gradient(to left bottom, red , blue); }

div { background: linear-gradient(to left top, red , blue); }

分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变

示例3：使用角度渐变

div { background: linear-gradient(10deg, red, blue) }

2、径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

语法： background: radial-gradient(center, shape, size, start-color, …, last-color);

说明： center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；

farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

示例1：多颜色点均匀分布

div { background: radial-gradient(red, green, blue); }

以中心（50% 50%）为起点，到最远角（farthest-corner），从red到green、blue的均匀渐变

EG: div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

示例2：多颜色节点不均匀分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

示例3：设置渐变形状

div { background: radial-gradient(circle, red, yellow, green); }

div { background: radial-gradient(ellipse, red, yellow, green); }

circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

示例4：不同尺寸的渐变

size指定了渐变的大小，即渐变到哪里停止，它有四个值。

closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

3、重复渐变

（1）重复性线性渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

说明：10%的位置为yellow，20%的位置为green，然后按照这20%向下重复

（2）重复性径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

52.CSS3 过渡

复合属性：transition 取值：all 5s linear 3s

含义：css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

all-------单一属性：transition-property：检索或设置对象中的参与过渡的属性

5s-------单一属性：transition-duration：检索或设置对象过渡的持续时间

3s-------单一属性：transition-delay：检索或设置对象延迟过渡的时间

linear-------单一属性：transition-timing-function：检索或设置对象中过渡的动画类型

简写：

transition:all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型

贝塞尔曲线：属性值：cubic-bezier() 贝塞尔曲线网址：http://cubic-bezier.com/ 逐帧动画：transition-timing-function:steps(动画执行的步数);

53.CSS3 2D 属性transform

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()

1.translate()

将元素向指定的方向移动，类似于position中的relative。

水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；

垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);

对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

translateX()：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。 translateY()：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。

这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。

所以

transform:translate(-100px,0)实际上等于transform:translateX(-100px);

transform:translate(0,-100px)实际上等于transform:translateY(-100px)。

2.scale()

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。

例如，

scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。

scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。

scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

3.rotate()

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

4.skew()

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

5.transform-origin

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。

54.CSS3 3D

1.景深

perspective:1200px（在父元素中使用）通常数值在900 - 1200 之间，近大远小

transform:perspective(11200px)（在子元素中使用）

perspective-origin;
例如： perspective-origin：center center （中心），perspective-origin：left top （左上角）， perspective-origin：100% 100% （右下角）
transform-style属性，指定嵌套元素如何在3D空间中呈现。属性值：flat和preserve-3d
flat值是默认值，表示所有子元素在2D平面呈现；preserve-3d表示所有子元素在3D空间中呈现。

2.3D重要功能函数

1.3D位移

语法：translate3d(tx,ty,tz)

tx: 横向 ; ty: 纵向 ; tz: Z轴位移 ;

语法：translateZ(t) t：指的是Z轴的向量位移长度。

2.3D旋转

语法：rotate3d(x,y,z,a)

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3.3D缩放

语法：scale3d(sx,sy,sz)

sx：横向缩放比例；

sy：纵向缩放比例；

sz：Z轴缩放比例；

55.动画

关于动画制作的属性：transform,transition,animation

1.创建动画步骤

定义动画：
@keyframes 动画名 { from{初始状态属性} to{结束状态属性} } 或
调用动画animation；animation是一个复合属性

2.关于animation的属性

animation-name 检索或设置对象所应用的动画名称
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型；linear/ease/ease-in/ease-out/ease-in-out
animation-delay 检索或设置对象动画延迟的时间
animation-iteration-count 检索或设置对象动画的循环次数;infinite/number
animation-direction 检索或设置对象动画在循环中是否反向运动;normal/reverse/alternate/alternate-reverse
animation-play-state 检索或设置对象动画的状态;running/paused
animation-fill-mode:forwards ;动画停留在结束位置

56.弹性盒子

1.怪异盒模型

标准盒子模型
box-sizing:content-box;
标准盒子的宽度=内容
怪异盒子模型
box-sizing:border-box;
怪异盒子的宽度=内容+内边距+边框

2.css3弹性盒子

容器的属性：

display:flex
说明：设置为弹性盒（为父元素添加）
flex-direction（主轴排列方式）
row: 默认一行内排列 ; row-reverse: 反转横向排列 ; column: 纵向排列 ; column-reverse: 反转纵向排列 ;
justify-content（主轴对齐方式）
flex-start默认，顶端对齐；flex-end末端对齐；center居中对齐；space-between两端对齐，中间自动分配；space-around自动分配距离
align-items（侧轴对齐方式）
flex-start ；flex-end ；center ；baseline
flex-wrap
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
align-content（行与行之间对齐方式）
flex-start没有行间距；flex-end底对齐没有行间距； center居中没有行间距；space-between两端对齐，中间自动分配； space-around自动分配距离

项目的属性：

align-self
Stretch 元素被拉伸以适应容器；Center ；flex-start ；flex-end
order
number排序优先级，数字越大越往后排，默认为0，支持负数。
flex-grow
放大比例，默认为0
flex-shrink
收缩
flex-basis
设置高度

3.多列

column-count
属性规定元素应该被分隔的列数；给父元素
break-inside:avoid;
和多列配合使用就不强制换行了，给子元素
column-gap
属性规定列之间的间隔大小
column-rule
设置或检索对象的列与列之间的边框。复合属性
column-fill
设置或检索对象所有列的高度是否统一；auto/balance
column-span
设置或检索对象元素是否横跨所有列。 none/all
column-width
设置或检索对象每列的宽度

茹嗨瑞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于CSS的学习内容三

HTML5发展史、HTML5的浏览器兼容、HTML5语法、HTML新增语义化标签、Video和audio的应用、HTML5智能表单、表单新属性、CSS3的概念和优势、渐进增强和优雅降级（重点）、CSS3选择器、CSS3文本属性-前缀、文本阴影属性语法及应用、字体模块、CSS背景的新增属性、CSS3边框圆角属性、box-shadow盒子阴影、CSS3渐变、CSS3过渡、CSS3 2D属性、CSS3 3D属性、动画、弹性盒子......
复制链接

扫一扫