高频面试题 —— css

link @import
css 居中问题
使用css实现一个三角形
css 布局,左边定宽右边自适应
浮动
rem em px
display有哪些值
margin塌陷
css动画

link @import

建议使用link,慎用@import

(1)@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

(2)加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

(3)import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

(4)js操作DOM,可以使用link改变样式,无法使用@import的方式使用样式。

(5)在link标签引入的 CSS 文件中使用@import时,相同样式将被该 CSS 文件本身的样式层叠。

css 居中问题

  1. 父元素:flex
display: flex;
justify-content: center;
align-items: center;
  1. 子元素:绝对定位 + margin
给子元素设置绝对定位,让子元素相对父元素向右、向下移动父元素宽高的50%,
然后再用margin-top和margin-left的负值,往回拉子元素自己宽高的50%
/* 父元素相对定位 */
position: relative;
/* 给子元素设置: */
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
  1. 子元素:绝对定位 + transform 位移
transform的translate设置的百分比,是相对于子元素本身的,所以我们可以给子元素设置 -50% ,来解决上一个方法的坑。
/* 父元素相对定位 */
position: relative;
/* 子元素设置一下属性 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
  1. 子元素绝对定位 + 上下左右为0 + margin为auto
/* 父元素相对定位 */
position: relative;
/* 子元素设置绝对定位   上右下左都为0   margin为auto */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

使用css实现一个三角形

通过border宽度和颜色来设置三角形
当一个盒子小到一个只有边框的正方形的时候,就可以设置三条边为透明
.box{
   width: 0;
   height: 0;
   border:50px solid;
   border-color: aqua transparent transparent transparent;
}

css 布局,左边定宽右边自适应

  1. float+margin-left
.left{
	float: left;
	width: 200px;
}
.right {
	margin-left: 200px;
}
  1. flex
.father{
	display: flex;
}

.left{
	width: 200px;
}
.right {
	flex: 1;
}
  1. table
.father{
	width: 100%;
	display: table;
}

.left{
	width: 200px;
	display: table-cell;
}
.right {
	display: table-cell;
}
  1. float+overflow
.left{
	float: left;
	width: 200px;
}
.right {
	overflow: hidden;
}
  1. absolute + margin-left
.father{
	position: relative;
}

.left{
	width: 200px;
	position: absolute;
	left: 0;
	top: 0;
}
.right {
	margin-left: 200px;
}
  1. absolute
.father{
	position: relative;
}

.left{
	width: 200px;
	position: absolute;
	left: 0;
	top: 0;
}
.right {
	position: absolute;
	left: 200px;
	top: 0;
	width: 100%;
}
  1. grid
.father{
	display: grid;
	grid-template-rows: 400px;
	grid-template-columns: 200px auto;
}

浮动

浮动的元素从左到右(从右到左)紧密排列
浮动的元素具有块级元素的特征(可以设置宽高、margin、padding),但没有换行符
浮动的元素不存在margin塌陷问题
浮动的元素脱离了标准流,不再占有原来的位置–>子元素设置浮动之后,父元素如果没有设置高度,会呈现塌陷的效果
浮动的元素自适应宽度为包裹内容的宽度

清除浮动

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

rem em px

利用 px 设置字体大小及元素宽高等比较稳定和精确。Px 的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。
em 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(一般为16px,可以在body选择器中声明Font-size=62.5%;)。
rem 是 CSS3 新增的一个相对单位(root em,根 em)。与 em 的区别在于使用 rem 为元素设定字体大小时,仍然是相对大小,但相对的只是 HTML 根元素。
em 的大小与父元素的font-size有关,rem 的大小与根元素html的font-size有关

display有哪些值

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。
flex 布局方式。
table 此元素会作为块级表格来显示,表格前后带有换行符。

margin塌陷

当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素边框有一段距离,而却出现了父元素的顶端距离body这个边框出现了位移,这就是 margin 塌陷的现象。
不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值。

css动画

你可能感兴趣的:(css,前端,面试题)