CSS面经（一）

2024-04-05 07:55:23

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 的共同点与不同点

摘录自：参考链接

码农公寓