CSS面经（一）

2021-10-22 14:33:03 阅读：129 来源： 互联网

1、flex 布局

display: flex ，在父元素设置，子元素受弹性盒影响，默认排列成一行，如果超出一行则按比例压缩。
flex:1，子元素设置，设置子元素如何瓜分父元素，1代表子元素占满父元素的宽度。
aline-items : center，设置垂直方向上的对齐方式，center 代表垂直居中。
justify-content : center，设置水平方向上的对齐方式，center代表水平居中。前提是子元素没有把父元素占满（那垂直居中不也是同样的道理吗？）

2、CSS3 的新特性

待更新示例

transition 过渡
transform 旋转、缩放、移动或者倾斜
animation 动画
shadow 阴影
border-radius 圆角

3、行内元素与块级元素

行内元素：

定义：宽度和高度都由内容决定，与其他元素共占一行

< span > 、 < i > 、 < a >、< label >, < input >, < img >, < strong > 和< em >等

块状元素：

定义：默认宽度由父元素决定，默认高度由内容决定，独占一行，可以设置高宽

< div > 、 < p > 、 < ul >、< h1 >, < form >, 等

平时，常使用dispaly:inline-block，使它们拥有更多的状态，（可以设置高宽的行内元素）

4、绝对定位和相对定位的区别

position : absolute
绝对定位是相对于与之最相近的且也设置了position的祖先元素。
position : relative
相对定位：相对于元素在文档中的初始位置

5、image中的alt与title的区别

图片中的 alt 是在图片不能正常显示时候的文字提示
title 是鼠标放上去就能显示的悬浮框。

6、纯CSS写一个三角形

就是设置 boder 的透明情况，要哪条边作为底边就设置哪条边不透明，注意要设置width:0与height:0,而三角形的填充域用 border 的厚度代替。solid 实线

<style>
	 .sanjiaoxing{
            width:0;
            height:0;
            border-bottom: 20px solid red;
            border-right:20px solid transparent;
            border-left: 20px solid red;
            border-top: 20px solid transparent;
        }
</style>
<body>
	<div class="sanjiaoxing"></div>
</body>

7、让一个div水平垂直居中

加入flex后最方便了

<style>
	.father{
		display:flex;
	    background: pink;
     }
     .son {
        margin: auto;
        background: red;
     }
</style>

8、如何清除浮动

为什么要清楚浮动

浮动让原本的元素脱离了文档流，以至于未设置高度（高度由内容撑开）的父元素，不再将设置浮动的元素的高度计算在内

清楚浮动的几种方法

上面说到为什么要清楚浮动，就是因为他的父元素不再将他列入高度计算内，如果想继续算在高度里，就需要清楚浮动

第一种方法就是为父元素设置高度
或者给父级元素设置overflow:hidden
第二种方法就是在浮动元素的下方添加空div，并添加样式如下

<style>
	.clearFloat{
		clear:both;
		height:0;
		overflow:hidden;
	}
</style>

第三种方法是给父级元素也浮动（需要给父级同级元素也浮动）
第四种方法是父级元素设置成inline-block,其中margin: 0 auto;居中设置会失效
第五种万能清除法父级元素设置：

<style>
	.fatherItem:after{
		content:'.';
		height:0;
		clear:both;
		display:block;
		overflow:hidden;
		visibility:hidden;
	}
	.fatherItem{
		zoom:1
	}
</style>

9、display:none和visibility:hidden的区别

display 是在文档不居中不给它分配空间，它各边的元素会合拢，就当他不存在。
visilibity 在文档布局中仍保留原来的空间。

10、CSS 中 link 和 @import的区别是

link属于HTML标签，而 @import 是CSS提供的
页面被加载时，link会同时被加载，而 @import 引用的CSS会等到页面被加载完再加载

import只在IE5以上才能识别，而link是HTML标签，无兼容问题
link方式的样式的权重高于@import的权重.

11、position的 absolute 与 fixed 的共同点与不同点

摘录自：参考链接

标签：浮动,flex,面经,元素,设置,import,border,CSS
来源： https://blog.csdn.net/weixin_46235143/article/details/120872646

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

ICode9