css、html、dom面试点总结

1. 文档声明 !DOCTYPE

• 一种声明必须位于 HTML5 文档中的第一行
• 告知浏览器以何种方式去渲染页面（严格模式、混杂模式）
• 混杂模式是向后兼容的，在工作中我们默认写高版本(html5文档声明)

2. HTML标签语义化

“

header、nav、footer、aside、article、section等

”

• 利于SEO优化（搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重）
• 文档结构清晰，可读性强
• 在样式丢失时，能在一定程度上较好的呈现结构

3. css中box-sizing的属性

• IE盒模型 border-box ——> 包含content、padding、border
• 标准盒模型 content-box ——> 只包含content的宽高

4. CSS的引入方式

• 行内式，直接写在标签内的style属性里面
• 内嵌式，写在HTML页面的head标签的style标签里面
• 外链式，通过标签link导入
• 导入式，通过 @import 'xx.css'

<style>
   @import "index.css";
</style>

外链式和导入式差别：

“

1.link是标签，@import是css提供的方式，要写在css文件或者style标签中; 2. 加载顺序不同，页面加载时link引用的css文件会同时加载，@import在页面下载完才会加载

”

5. 标签分类

• 行内标签，无法单独占一行且不能设置宽高，如 span、a
• 块级标签，单独占一行且可以设置宽高，如div、h标题元素、列表元素ul、li
• 行块级元素，无法单独占一行但可以设置宽高，如img、input

6. 浮动

• 浮动影响：本身继承的宽度会失效，会使父元素的高度失效值为0，导致后边元素顶上来
• 解决方法：给父元素添加 类名clearfix，如下：

// 最完整clearfix清除浮动的方法：
.clearfix:after{
	display:block;
    content:'';
    width:0;
    height:0;
    visibility: hidden;
    overflow:hidden;
    clear:both;
}
.clearfix{
    zoom:1;
}

7. 省略号

• 单行文本，一定要设置宽度

white-space: nowrap;   /*禁止文字内容折行*/
overflow: hidden;         /*超出部分溢出隐藏*/
text-overflow: ellipsis;  /*文字以省略号的方式隐藏*/

• 多行文本

display: -webkit-box;              /*弹性盒模型*/
-webkit-box-orient: vertical;   	/*文字垂直排列*/
-webkit-line-clamp: n                /* 文字显示的行数n*/
overflow: hidden;                   /*超出部分溢出隐藏*/
text-overflow: ellipsis;  /*文字以省略号的方式隐藏*/

8. 元素居中

• 文字居中

	text-align: center;     // 水平居中
    height = line-height;   // 垂直居中

• 上下左右居中

```!
// div宽度有设置情况下,设置水平居中
margin: 0 auto;


// flex布局
display: flex;
justify-content: center;
align-items: center;




// position定位
// 先给父元素 定位 position: relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);




// 父元素设置display: flex，子元素设置margin: auto;
.outer {
width: 100px;
height: 100px;
background-color: crimson;
display: flex;
}
.inner {
width: 50px;
height: 50px;
background-color: darkgoldenrod;
margin: auto;
}
<div class="outer">
<div class="inner"></div>
</div>




// 父元素： position：relative【任意一种定位】
// 子元素：position:absolute;四个方向为0; margin：auto;
outer {
position: relative;
width: 100px;
height: 100px;
background-color: crimson;
}




.inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50px;
height: 50px;
background-color: darkblue;
}
<div class='outer'>
<div class="inner"></div>
</div>
.inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50px;
height: 50px;
background-color: darkblue;
}
<div class='outer'>
<div class="inner"></div>
</div>

9. BFC问题

“

BFC, 全称: box Formatting Context, 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素, 外面的元素也无法影响到里面

”

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 计算BFC的高度时，浮动元素也参与计算。

如何触发BFC

• float设置为（left、right）
• 绝对定位元素（absolute、fixed）
• display设置为 （inline-block、flex、inline-flex）
• overflow设置为（hidden、scroll、auto）

可以解决哪些问题

• 浮动元素导致父元素内容塌陷（没有子元素高度来撑开），解决方法是将父元素触发BFC

• 首节点子元素设置margin-top使父元素向下移动，解决方法是将父元素触发BFC

• 相邻兄弟元素的margin-bottom与margin-top相覆盖，解决方法是将下面元素设置 display: inline-block;

10. 浏览器内核

11. 经典布局

• 两栏布局，左侧固定，右侧自适应

	.parent {postion: relative; padding-left: 200px}   // 父元素
    .left {
    	position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 500px;
        background-color: aqua;
    }
    .right {
    	height: 500px;
    }

12. postcss

“

定义：postcss是一套利用js插件实现的用来改变CSS的工具.这些插件能够支持变量和混合语法，转换未来CSS语法，内联图片，还有更多

”

PostCSS拥有非常多的插件：

• 自动为CSS添加浏览器前缀的插件autoprefixer
• 当前移动端最常用的px转rem插件px2rem
• 支持尚未成为CSS标准但特定可用的插件cssnext

一句话来概括PostCSS：CSS编译器能够做到的事情，它也可以做到，而且能够做得更好

// 安装：
npm i gulp gulp-postcss --save-dev -d

使用预处理器如sass/less，需要：

• 学习该CSS预处理器的语法特性，诸如：变量定义、嵌套、继承
• 在特定后缀名(.less/.scss等)的文件按照上面的语法进行编写
• 通过Gulp/Grunt/Webpack等自动化工具或者手动编译成CSS样式

使用postcss，只需要：

• 直接按照CSS标准语法来书写CSS样式文件
• 通过Gulp/Grunt/Webpack等自动化工具加载PostCSS插件运行转换输出

参考链接：PostCSS快速入门使用

13. 画一个三角形、扇形，将一个圆分为四部分，对角部分是相同颜色，相邻部分为不同颜色

// 等腰三角形
.box {
  width: 0;
  height: 0;
  border-width: 200px;
  border-style: solid;
  border-color: transparent transparent #00ffee transparent;
  // border-left-width: 0;    加了这句变成直角三角形
}

// 扇形
width: 0;
height: 0;
border-width: 200px;
border-style: solid;
border-color: transparent transparent #00ffee transparent;
border-radius: 50%;

// 圆分为四部分，对角部分是相同颜色，相邻部分为不同颜色
width: 0;
height: 0;
border-width: 200px;
border-style: solid;
border-radius: 50%;
border-color: #00ffee #eeff00 #00ffee #eeff00;