CSS篇

一. 盒模型

盒模型的组成，由里向外content,padding,border,margin

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准盒子模型中，width指content部分的宽度

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

二. CSS清除浮动的几种方法

使用带clear属性的空元素;
使用CSS的:after伪元素；

.clearfix:after {   
    content:".";       //这里利用到了content属性   
    display:block;    
    height:0;   
    visibility:hidden;    
    clear:both; }   
  after伪元素通过content在元素的后面生成一个点的块级元素，再利用clear: both清除浮动。

使用CSS的overflow属性；
使用邻接元素处理

三. 居中

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

不知道宽高

width: 78px;
  height: 78px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

知道宽高

height: 100px;
width: 100px;
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
display:flex;
justify-content: center;
align-content: center;

四. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（lia）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li:nth-child）

优先级为:

!important > id > class > tag

important 比内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

五. px、em、rem区别介绍

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root，em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

六. display:none和visiblity:hidden的区别是什么？

display:隐藏对应元素但不挤占该元素原来的空间。
visiblity: 隐藏对应的元素并且挤占该元素原来的空间。

七. link 与 @import 的区别

link是html的方式。@important是css的方式
@important实在css文件中引入其它css文件
总体来说link优于@important

八. 三栏布局的实现及优缺点

浮动布局: 是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。
绝对定位布局: 优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的
felxbox布局: 是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。 felxbox的缺点就是不能兼容IE8及以下浏览器。
网格布局: 也是新出的一种布局方式，如果你答出这种方式，也就证明了你的实力，证明你对技术热点是有追求的，也说明你有很强的学习能力。

九.文字单行显示/三行显示

// 溢出显示部分...
.textOVerFlow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

// 超出三行
.textOVerThree {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

##十. 重绘和回流

重绘：当页面中的一些元素的外观，风格，颜色发生变化，导致浏览器重新绘制页面，但不会影响页面布局，这种情况称之为重绘

回流：当页面的布局，显示隐藏，尺寸等发生了改变，导致页面的结构布局改变，此时浏览器需要重新加载绘制页面，并且页面的布局发生了变化，这种情况称之为回流。

注意：重绘不一定会导致回流，但是回流一定会导致重绘。

前端笔记--CSS--20200603