标签：flex 知识 outline Flex 元素 扩展 border css 属性

1.轮廓属性

①轮廓outline,用于在元素周围绘制一个轮廓，位于border的外围，可以突出显示元素。

②常用属性：

outline-width——轮廓宽度

outline-color——轮廓颜色

outline-style——轮廓样式

outline简写

③在浏览器，当鼠标单击或使用TAB键让一个表单元素或链接元素获得焦点时，该元素周围会出现一个轮廓 outline。

优点：可以提高表单元素的用户体验。

缺点：有时会影响美观。

④outline与border的区别

• border可以应用于所有的html元素，而outline主要用于表单元素、超链接。
• 当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为。
• outline不影响元素的位置和尺寸，而border会影响。

2.overflow属性——当元素内容溢出时该如何处理。

常用取值：

• visible——溢出时可见，显示在元素外，默认值
• hidden——溢出的部分不可见（常用）
• scroll——无论时否出现溢出始终出现滚动条
• auto——溢出时自动出现滚动条

3.coursor属性

用来设置光标的形状

常用属性：

• default——默认光标，一般为箭头
• pointer——手形，光标移动到超链接上时一般显示为手形图标
• move——表示可以移动
• text——文本
• wait——表示程序正忙，需要等待
• help——表示帮助

4.表格布局

①table常用样式属性：

• border——在表格外围设置边框
• border-spacing——设置单元格之间的距离（相当于table标签的cellspacing属性，即间距）
• border-collapse——表格中相邻单元格边框是否合并，取值：separate、collapse

②th/td常用样式属性：

• border——为单元格设置边框
• padding——设置单元格的边距（相当于table标签的cellpadding属性，边距）

5.display:none和visibility:hidden的区别

这两个属性都可以将元素隐藏，两者的区别如下：

（1）在渲染树中

display:none会让元素完全的从渲染树中消失，在渲染的时候不会占据任何空间。
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据空间，只是内容不可见。

（2）是否为继承属性

display:none是非继承属性，子孙节点会随着父节点一起从渲染树中消失，即使通过修改子孙节点的属性也无法将其显示。
visibility:hidden是继承属性，子孙节点消失是因为它们继承了父节点的visibility:hidden的属性，可以通过设置visibility:visible让子孙节点显示。

（3）重排还是重绘

修改常规文档中元素的display属性会导致文档的重排。
修改visibility属性只会导致该元素的重绘。

（4）如果使用读屏器的话

设置display:none的内容不会被读取。
设置为visibility:hidde的内容会被读取。

6.多列布局（multi-column layout）

7.阴影和反射（Shadoweflect）

8.对Flex布局的理解及其使用场景

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局。但要注意的是，设置了Flex布局以后，子元素的float、clear和vertical-alian属性将会失效。

采用了Flex布局的元素，被称为Flex布局，简称“容器”。而它的子元素会自动成为容器成员，被称为Flex项目，简称“项目”。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。项目默认沿着主轴排列。

容器的属性：

flex-direction：决定主轴的方向（即项目的排列方向）。

flex-wrap：如果一条轴线放不下，该如何换行。

flex-fllow：是以上两个属性的简写，默认值为row nowrap。

justify-content：定义了项目在主轴上对齐方式。

align-items：定义项目在交叉轴上如何对齐。

align-content：定义了多跟轴线的对齐方式，如果项目中只有一根轴线，那么该属性将不起作用。

项目的属性：

order：定义项目的排列顺序。数值越小越靠前，默认为0。

flex-grow：定义项目的方法比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink：定义了项目的缩小比例，默认为1，即空间不足，该项目将缩小。

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器会根据这个属性，计算主轴是否有多余空间。他默认值为auto，即项目的本来大小。

flex：是flex-grow、flex-shrink和flex-basis的简写，默认为0 1 auto。

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 9.transform-origin:center center; 基点位置为元素的中心点。

10.在CSS滤镜中Glow属性——添加光辉晕圈效果在元素对象的边外。Filter：Glow（Color=color，Strength=strength）。Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。

11.box-sizing:border-box;为元素设定的宽度和高度决定了元素的边框盒。（即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。）

12.text-transform:uppercase;定义仅有大写字母。

13.3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。

14.content: '';当前伪类显示的文本，虽然设置为空，但也是必须的。 content一般和:before,:after一起使用，用来生成内容(img和input没有该属性)，content的内容一般可以为以下四种：

①none： 不生成任何值。

②attr： 插入标签属性值。

③url： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）。

④string： 插入字符串。

标签：flex,知识,outline,Flex,元素,扩展,border,css,属性
来源： https://www.cnblogs.com/gaoxinru114/p/16320844.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。