HTML+CSS部分总结

如何居中 div？

水平居中： 给 div 设置一个宽度， 然后添加 margin:0 auto 属性

div{width:200px;margin:0 auto;}

让绝对定位的 div 居中

div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;

left: 0;bottom: 0;right: 0;background-color: pink; /* 方便看效果 */}

水平垂直居中一

确定容器的宽高 宽 500 高 300 的层,设置层的外边距

div {position: relative; /* 相对定位或绝对定位均可 */

width:500px;height:300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;

/* 外边距为自身宽高的一半 */

background-color: pink; /* 方便看效果 */}

水平垂直居中二

未知容器的宽高， 利用 `transform` 属性

div {position: absolute; /* 相对定位或绝对定位均可 */

width:500px;height:300px;top: 50%;left: 50%;transform: translate(-50%, -50%);

background-color: pink; /* 方便看效果 */}

水平垂直居中三

利用 flex 布局,实际使用时应考虑兼容性

.container {display: flex; align-items: center;/* 垂直居中 */justify-content: center;/*

水平居中 */}

.container div {width: 100px;height: 100px;background-color: pink;/* 方便看效果 */}

display 有哪些值？ 说明他们的作用

block 块类型。 默认宽度为父元素宽度， 可设置宽高， 换行显示。

none 缺省值。 象行内元素类型一样显示。 //隐藏不展示

inline 行内元素类型。 默认宽度为内容宽度， 不可设置宽高， 同行显示。

inline-block 默认宽度为内容宽度， 可以设置宽高， 同行显示。

list-item 象块类型元素一样显示， 并添加样式列表标记。

table 此元素会作为块级表格来显示。

inherit 规定应该从父元素继承 display 属性的值

position 的值 relative 和 absolute 定位原点是

absolute

生成绝对定位的元素， 相对于值不为 static 的第一个父元素进行定位。

fixed （ 老 IE 不支持）

生成绝对定位的元素， 相对于浏览器窗口进行定位。

relative

生成相对定位的元素， 相对于其正常位置进行定位。

static

默认值。 没有定位， 元素出现在正常的流中（ 忽略 top, bottom, left, right z-index 声明） 。

inherit  规定从父元素继承 position 属性的值。

一个满屏 ‘ 品’ 字布局 如何设计

简单的方式：

上面的 div 宽 100%，

下面的两个 div 分别宽 50%，

然后用 float 或者 inline 使其不换行即可

//其实没明白这是干嘛，要我啊 自己P一张品字 img放上去 反正全屏，干净利索。

css 多列等高如何实现

利用 padding-bottom|margin-bottom 正负值相抵；

设置父容器设置超出隐藏（ overflow:hidden） ， 这样子父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，

当它里面的任 一列高度增加了， 则父容器的高度被撑到里面最高那列的高度，

其他比这列矮的列会用它们的 padding-bottom 补偿这部分高度差

//这个还需要在看看

li 与 li 之间有看不见的空白间隔是什么原因引起的？ 有什么解决办法

行框的排列会受到中间空白（ 回车\空格） 等的影响， 因为空格也属于字符,这些空白也会被应用样式， 占据空间，

所以会有间隔， 把字符大小设为 0， 就没有空格了

为什么要初始化 CSS 样式

因为浏览器的兼容问题， 不同浏览器对有些标签的默认值是不同的， 如果没对 CSS初始化往往会出现浏览器之间的页面显示差异

当然， 初始化样式会对 SEO 有一定的影响， 但鱼和熊掌不可兼得， 但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;}

* absolute 的 containing block(容器块)计算方式跟正常流有什么不同

无论属于哪种， 都要先找到其祖先元素中最近的 position 值不为 static 的元素，

然后再判断：

1、 若此元素为 inline 元素， 则 containing block 为能够包含这个元素生成的第一

个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2、 否则,则由这个祖先元素的 padding box 构成。

如果都找不到， 则为 initial containing block。

补充：

    1.  static(默认的)/relative： 简单说就是它的父元素的内容框 （ 即去掉 padding 的部分）

    2. absolute: 向上找最近的定位为 absolute/relative 的元素

    3. fixed: 它的 containing block 一律为根元素(html/body)， 根元素也是 initial  containing block

    //不是很明白可以再看看

* CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？ 在不同浏览器下以后什么区别？

其实 visibility 可以有第三种值， 就是 collapse。 当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素， 它的表现跟 hidden 是一样的。 但例外的是， 如果这个元素是 table 相关的元素， 例如 table 行，table group， table 列， table column group， 它的表现却跟 display: none 一样， 也就是说， 它们占用的空间也会释放。在谷歌浏览器里， 使用 collapse 值和使用 hidden 值没有什么区别

    在火狐浏览器、 Opera 和 IE11 里， 使用 collapse 值的效果就如它的字面意思： table的行会消失， 它的下面一行会补充它的位置。

对 BFC 规范(块级格式化上下文： block formatting context)的理解

（ W3C CSS 2.1 规范中的一个概念,它是一个独立容器， 决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 ）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context（ 决定如何渲染文档的容器） ,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响

css 定义的权重

以下是权重的规则： 标签的权重为 1， class 的权重为 10， id 的权重为 100， 以下例子是演示各种定义的权重值

权重为 1 div{}

权重为 10 .class1{}

权重为 100 #id1{}

权重为 100+1=101 #id1 div{}

权重为 10+1=11 .class1 div{}

权重为 10+10+1=21 .class1 .class2 div{}

如果权重相同， 则最后定义的样式会起作用， 但是应该避免这种情况出现

请解释一下为什么需要清除浮动？ 清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。 浮动的元素， 高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

1、 父级 div 定义 height；

2、 父级 div 也一起浮动；

3、 常规的使用一个 class；

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

.clearfix {

    *zoom: 1;

}

* SASS 编译的时候， 浮动元素的父级 div 定义伪类:after

&:after,&:before{

content: " ";

visibility: hidden;

display: block;

height: 0;

clear: both;

}

解析原理：

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见， 并允许可能被生成内容盖住的内容可

以进行点击和交互;

4） 通过 content:"."生成内容作为最后一个元素， 至于 content 里面是点还是其

他都是可以的， 例如 oocss 里面就有经典的 content:".",有些版本可能 content 里面内容

为空,一丝冰凉是不推荐这样做的,firefox 直到 7.0 content:” " 仍然会产生额外的空隙；

5） zoom： 1 触发 IE hasLayout。

通过分析发现， 除了 clear： both 用来闭合浮动的， 其他代码无非都是为了隐藏掉 content 生成的内容，

这也就是其他版本的闭合浮动为什么会有 font-size： 0， line-height： 0。

什么是外边距合并

外边距合并指的是， 当两个垂直外边距相遇时， 它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

* zoom:1 的清除浮动原理

清除浮动， 触发 hasLayout；

Zoom 属性是 IE 浏览器的专有属性， 它可以设置或检索对象的缩放比例。 解决 ie 下

比较奇葩的 bug。

譬如外边距（ margin） 的重叠， 浮动清除， 触发 ie 的 haslayout 属性等。

来龙去脉大概如下：

当设置了 zoom 的值之后， 所设置的元素就会就会扩大或者缩小， 高度宽度就会重

新计算了， 这里一旦改变 zoom 值时其实也会发生重新渲染， 运用这个原理， 也就解决了 ie 下子元素浮动时候父元素不随着自动扩大的问题。

Zoom 属是 IE 浏览器的专有属性， 火狐和老版本的 webkit 核心的浏览器都不持这个属性。 然而， zoom 现在已经被逐步标准化， 出现在 CSS 3.0 规范草案中。

目前非 ie 由于不支持这个属性， 它们又是通过什么属性来实现元素的缩放呢？

可以通过 css3 里面的动画属性 scale 进行缩放。

CSS 优化、 提高性能的方法有哪些

关键选择器（ key selector） 。 选择器的最后面的部分为关键选择器（ 即用来匹配目标元素的部分） ；

如果规则拥有 ID 选择器作为其关键选择器， 则不要为规则增加标签。 过滤掉无关的规则（ 这样样式系统就不会浪费时间去匹配它们了） ；

提取项目的通用公有样式， 增强可复用性， 按模块编写组件； 增强项目的协同开发性、 可维护性和可扩展性;

使用预处理工具或构建工具（ gulp 对 css 进行语法检查、 自动补前缀、 打包压缩、自动优雅降级） ；

浏览器是怎样解析 CSS 选择器的

样式系统从关键选择器开始匹配， 然后左移查找规则选择器的祖先元素。

只要选择器的子树一直在工作， 样式系统就会持续左移， 直到和规则匹配， 或者是因为不匹配而放弃该规则

margin 和 padding 分别适合什么场景使用

margin 是用来隔开元素与元素的间距； padding 是用来隔开元素与内容的间隔。

margin 用于布局分开元素使元素与元素互不相干；

padding 用于元素与内容之间的间隔， 让内容（ 文字） 与（ 包裹） 元素之间有一段

CSS 优先级算法如何计算

优先级就近原则， 同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

同权重: 内联样式表（ 标签内部） > 嵌入样式表（ 当前文件中） > 外部样式表（ 外部文

件中） 。

!important > id > class > tag

important 比 内联优先级高

//这里我记得看过那个书上有写 是是个权重值，每种代表一种意思，每一种多给一个在相应权重值上加1.  比如  1111    第一个1 代表ID 那么ID 多一个 就是2111  class代表第二个 ，再多的class也不会比2111高（记得大概是这么个意思）

CSS 选择符有哪些？ 哪些属性可以继承？

1.id 选择器（# myid）

2.类选择器（ .myclassname）

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

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

5.子选择器（ ul > li）

6.后代选择器（ li a）

7.通配符选择器（* ）

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

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

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式： border padding margin width height

介绍一下标准的 CSS 的盒子模型？ 低版本 IE 的盒子模型有什么不同的？

（ 1） 有两种， IE 盒子模型、 W3C 盒子模型；

（ 2） 盒模型： 内容(content)、 填充(padding)、 边界(margin)、 边框(border)；

（ 3） 区 别： IE 的 content 部分把 border 和 padding 计算了进去;

//box-sizing:border-box;  可以用这个规定一下

title 与 h1 的区别、 b 与 strong 的区别、 i 与 em 的区别？

title 属性没有明确意义只表示是个标题， H1 则表示层次明确的标题， 对页面信息的抓取也有很大的影响；

strong 是标明重点内容， 有语气加强的含义， 使用阅读设备阅读网络时会重读， 而是展示强调内容。

i 内容展示为斜体， em 表示强调的文本；

Physical Style Elements -- 自然样式标签

b, i, u, s, pre

Semantic Style Elements -- 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

网页验证码是干嘛的， 是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。 可以防止恶意破解密码、 刷票、 论坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

//防止刷票之类的

简述一下你对 HTML 语义化的理解？

用正确的标签做正确的事情

html 语义化让页面的内容结构化， 结构更清晰， 便于对浏览器、 搜索引擎解析;

即使在没有样式 CSS 情况下也以一种文档格式显示， 并且是容易阅读的;

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重， 利于 SEO;

使阅读源代码的人对网站更容易将网站分块， 便于阅读维护理解

//不要什么都用div  标签要用h1、h2、h3  session aside 等 让浏览器更好的识别

介绍一下你对浏览器内核的理解？

主要分成两部分： 渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

渲染引擎： 负责取得网页的内容（ HTML、 XML、 图像等等） 、 整理讯息（例如加入

CSS 等） ，

以及计算网页的显示方式， 然后会输出至显示器或打印机。 浏览器的内核的不同对

于网 页的语法解释会有不同， 所以渲染的效果也不相同。 所有网页浏览器、 电子邮

件客户端 以及其它需要编辑、 显示网络内容的应用程序都需要内核。

JS 引擎则： 解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确， 后来 JS 引擎越来越独立， 内核就

倾向 于只指渲染引擎。

页面导入样式时， 使用 link 和@import 有什么区别？

（ 1） link 属于 XHTML 标签， 除了加载 CSS 外， 还能用于定义 RSS, 定义 rel 连接属性等

作用； 而@import 是 CSS 提供的， 只能用于加载 CSS;

（ 2） 页面被加载的时， link 会同时被加载， 而@import 引用的 CSS 会等到页面被加载完

再加载;

（ 3） import 是 CSS2.1 提出的， 只在 IE5 以上才能被识别， 而 link 是 XHTML 标签， 无兼

容问题;

//但是看书中说@import的性能并不比link的好

行内元素有哪些？ 块级元素有哪些？ 空(void)元素有那些？

首先： CSS 规范规定， 每个元素都有 display 属性， 确定该元素的类型， 每个元素都有默

认的 display 值， 如 div 的 display 默认值为“block” ， 则为“ 块级” 元素；

span 默认 display 属性值为“inline” ， 是“ 行内” 元素。

（ 1） 行内元素有： a b span img input select strong（ 强调的语气）

（ 2） 块级元素有： div ul ol li dl dt dd h1 h2 h3 h4…p

    (3)空元素有：br,hr,img,input,link,meta,

Doctype 作用？ 标准模式与兼容模式各有什么区别?

（ 1） 声明位于位于 HTML 文档中的第一行， 处于 标签之前。

告知浏览器的解析器用什么文档标准解析这个文档。

DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

（ 2） 标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。 在兼容

模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。