css常见用法

1.内容超出添加省略号

关键语句：

overflow : hidden; 溢出则隐藏text-overflow: ellipsis; 用省略号“…”隐藏超出范围的文本-webkit-line-clamp: ; 用来限制在一个块元素显示的文本的行数 单行省略 <p style=" width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "> xxxxxxxxxxxxxxxxxxxx </p>

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5awPY7T-1594864116956)(img/单行overflow.png)]

多行省略 <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新 </p>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDm978kt-1594864116960)(img/多行overflow.png)]

2. 隐藏页面元素的方法

opacity：设置元素的透明度。当设置opacity为0时，元素隐藏，但是元素本身仍然占据页面空间，并且也可响应交互

点击劫持就是利用了opacity属性，使用iframe将目标网站嵌入页面，并在这个页面上面进行恶意UI的布置，并设置这些恶意UI的opacity为0

visibility：设置元素是否可见，取值为hidden/visible/inherit。当设置为hidden时，元素隐藏，元素占据页面空间但是不响应用户的交互

display=none：当设置了display为none时，元素被隐藏，元素不被渲染，即元素不再占据页面空间也不响应用户交互，也不能被读屏软件读取，但是仍在dom树中

position：通过设置绝对定位并将元素移出可视区域（用的少）

补充：display:none会导致重排，而opacity和visibility则只会导致重绘

3. 为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，初始化css样式可以避免由于浏览器造成的页面差异

4. css中的伪类

链接伪类选择器

a:link：未访问的链接a:visited：已访问的链接a:hover：鼠标移动到链接上a:active：选定链接时

后代伪类选择器

li:first-child：第一个li元素li:last-child：最后一个li元素li:nth-child(n)：第n个li元素，下标从1开始

表单控件选择器（CSS3）

:enabled :disabled：表单控件的禁用状态:checked：单选框或复选框被选中

5. 清除浮动的办法

当页面中出现了浮动元素，那么这个元素是脱离了文档流，可能会造成

父元素的高度塌陷后方元素忽略浮动元素产生内容围绕

所以我们需要进行浮动清除

在浮动元素下使用一个空div（黑魔法）

在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，从而达到清除浮动的效果

<div style="float: left"></div> <div style="clear: both">clear</div> <div></div>

通过设置一个样式为clear:both的空盒子，就可以进行浮动清除

使用BFC特性

将父元素设置为BFC，那么可以解决高度坍塌问题

overflow: 除了visible之外的属性 display: flow-root, inline-block

补充：BFC特性

BFC盒子会包裹其中的所有元素，盒子不会因为内部元素浮动而坍塌BFC会停止去围绕浮动元素BFC会阻止外边距叠加问题

使用:after伪类

给浮动元素的父元素清除浮动，避免高度塌陷

.father:after{ content: ""; clear: both; }

6. 三栏布局

要求：实现三栏布局，左右两边各100px，中间内容自适应

基于flex的三栏布局

<div class="layOut"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <style> .layOut{ display: flex; } .left, .right{ width: 100px; } .middle{ flex: 1; /* flex为1表示自适应 flex:1 1 auto */ } </style>

基于浮动的三栏布局

<div> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </div> <style> .left{ float: left; width: 100px; } .right{ float: right; width: 100px; } .middle{ width: 100%; /*padding: 0 100px*/ /*padding这句话可有可无，因为float元素虽然脱离文档流，但是后面元素的 内容 会腾出空间*/ } </style>

基于绝对定位的三栏布局

<div> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </div> <style> .left{ position: absolute; top: 0; width: 100px; } .right{ position: absolute; top: 0; right: 0; width: 100px; } .middle{ width: 100%; /*思想与float类似，但是基于定位的三栏布局，absolute属性脱离文档流，并且后面的元素包括内容都会忽略它*/ padding: 0 100px 0 100px; } </style>

双飞翼布局

<div> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div> <style> .left, .middle, .right{ float: left; } .left{ width: 100px; margin-left: -100%; } .right{ width: 100px; margin-left: 100px; } .middle{ width: 100%; padding: 0 100px; /*腾出位置*/ } </style>

圣杯布局

<div class="container"> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div> <style> .container{ padding-left: 100px; padding-right: 100px; /*这里是双飞翼和圣杯的不同点，圣杯模型在最外层div元素让出了空间*/ } .left, .right, .middle{ float: left; } .middle{ width: 100%; } .left{ width: 100px; margin-left: -100%; position: relative; left: -100px; } .right{ width: 100px; margin-left: 100px; position: relative; left: 100px; } </style>

圣杯和双飞翼都是基于利用浮动和负边距来完成三栏布局，圣杯模型相对于双飞翼模型来说，其最外层包裹的父元素主动为左右两栏分配了位置，通过padding来设置的

所以圣杯模型需要通过相对定位再一次进行移动，移动到合适的位置

负边距：当我们给元素加上相反的负边距的时候，它会认为它前面的元素的宽度减少了这么多，而实际上前者的宽度并没有改变，最终的效果为：加负边距的元素浮在了它前面元素的上方

7. 文档流

一个网页中的元素根据HTML文档中的位置和CSS属性，在页面中有着不同的布局。

一个盒子（元素）可以根据三种定位方案来布置

normal flow（文档流/常规流）float（浮动）absolute positioning（绝对定位）

若为常规流则元素按照HTML文档中的位置顺序，自上而下的排列

若设置float属性，则该盒子会脱离文档流，其他（后面）的盒子会无视这个元素，但盒子内的文本（内容流）会让出位置

若设置绝对定位属性/fixed，同样也会脱离文档流，但其他盒子与其内部的内容都会无视该盒子

注意事项：

对于脱离文档流的元素，只有该元素之后的元素会无视，在该元素之前的元素是正常布局的在脱离文档流元素之后的元素会在脱离文档流元素的下面（被覆盖）脱离文档流但不脱离dom树

8. z-index

每个元素都具有三维的空间坐标,除了水平和垂直位置外,还有一个z坐标,通过改变z的坐标,我们可以实现元素的层叠

z-index定义了元素所属的层叠级别。层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循其在HTML文档中的顺序

默认情况下，正常流（normal flow）是处于最下面一层的

能够产生层叠级别的属性：position（除了static），opacity …

9. 盒模型

CSS中存在4种盒模型

标准盒模型IE盒模型flex弹性盒模型columns盒模型

页面中的每一个元素都是一个盒子，并且这个盒子描述了该元素的边距信息，有外向内分别是：

** margin border padding content **

** 外边距 边框 内边距 内容**

在标准盒模型下，我们为一个元素设定的width或height = content

在IE盒模型下，我们为一个元素设定的width或height = content + padding + border. 在IE盒模型下，设置固定宽度后，修改border或padding，content可以自动缩放，并且在bootstrap或elementUI中都是用的IE盒模型

设置标准盒模型：box-sizing: content-box 设置IE盒模型：box-sizing: border-box