前端面试题 笔记 CSS篇
CSS
- 居中( 目前知道的居中方式)
水平和垂直居中 行内元素和块级元素
text-align:center,行高
弹性布局flex 定宽居中 绝对定位 transform的translate属性-50%， margin-left为负值
说出你知道的居中方式。
1.对于行内元素
text-align:center;
2.块级元素
一、水平居中
//定宽居中（已知宽度）
margin:0 auto;
//与上代码同
margin-left:auto;
margin-right:auto;
//弹性居中CSS3的flex实现水平居中方法，法一
.contentParent{
display: flex;
flex-direction: column;
}
.content{
align-self:center;
}
//display:flex;
//justify-content: center;
//align-items: center;
//绝对定位和margin-left: -(宽度值/2)实现水平居中
.content{
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px; // 元素宽度的一半
//绝对定位+transform，translateX可以移动本省元素的50%
.content{
position: absolute;
left: 50%;
transform: translateX(-50%); /* 移动元素本身50% */
}
//垂直居中
flex
line-height
absolute + top:50% left:50% + margin负值
absolute + top:0 left:0 right:0 botton:0 + margin:auto
绝对定位 +margin
绝对定位 +transform
//css-table（不常用）设置 display:inline 方法
<div class="main">
<div class="box box7">box7 box7</div>
</div>
.main{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box7{
display: inline-block;
}
-
BFC 块级格式化上下文
（1）清除浮动
（2）可以避免margin重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 -
关于vh,vw,vmin,vmax
（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
（2）具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
（3）vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致
- Css优先级
CSS的4种引入方式及优先级
（1）行内样式
<p style="color:#F00; "></p>
缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。
（2）内嵌样式
内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>
优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。
（3）链接样式
链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：
<link type="text/css" rel="stylesheet" href="style.css" />
优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便
（4）导入样式（不建议使用）
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>
@import在CSS中使用，如下：
@import url(style.css);
优先级
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高
“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”。
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
- 1rem 1em 1vh 1px 各代表的含义。画一条0.5px的直线
rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
画一条0.5px的直线
height: 1px;
transform: scale(0.5);
- Flex 布局。
