前端面试题 笔记 CSS篇

CSS

1. 居中( 目前知道的居中方式)
   水平和垂直居中 行内元素和块级元素
   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 方法

    
box7 box7


.main{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box7{
    display: inline-block;
}

2. BFC 块级格式化上下文
   （1）清除浮动
   （2）可以避免margin重叠
   BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

3. 关于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。使得文字大小在横竖屏下保持一致

4. Css优先级
   CSS的4种引入方式及优先级
   （1）行内样式
   
   
   缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。

（2）内嵌样式
内嵌样式就是将CSS代码写在之间，并且用进行声明，例如：

优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。

（3）链接样式
链接样式是使用频率最高，最实用的样式，只需要在之间加上就可以了，如下：

优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便

（4）导入样式（不建议使用）
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。
@import在html中使用，如下：

@import在CSS中使用，如下：
@import url(style.css);

优先级
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”。
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

5. 1rem 1em 1vh 1px 各代表的含义。画一条0.5px的直线
   rem是全部的长度都相对于根元素元素。通常做法是给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);

6. Flex 布局。