css笔记和面试题汇总

最新推荐文章于 2020-07-10 16:31:28 发布

楽BB

最新推荐文章于 2020-07-10 16:31:28 发布

阅读量127

点赞数

分类专栏：前端文章标签： css 定位

本文链接：https://blog.csdn.net/weixin_43450479/article/details/107051987

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>