css3的弹性盒模型-1.如何理解CSS盒子模型

1.如何理解CSS盒子模型

标准包模型：宽度=内容长度（content）+border+padding

低版IE包模型：宽度=内容长度（内容+边框+填充）

2、BFC

1、如何理解CSS盒子模型 标准包模型：宽度=内容长度（内容）+边框+填充 低版IE包模型：宽度=内容长度（内容+边框+填充）

2、BFC

1）什么是BFC

BFC（Block Formatting Context）格式化上下文是网页中盒模型布局的CSS渲染模式，指的是一个独立的渲染区域或者一个孤立的独立容器。

2) 形成BFC的条件

* 浮动元素，float是none以外的值

* 定位元素，位置（绝对、固定）

* 显示为下列值之一 inline-block, table-cell, table-caption

* Overflow 可见以外的值（hidden、auto、scroll）

3）BFC的特点

* 内盒将在垂直方向上一个接一个地放置。

* 垂直方向的距离由margin决定

* bfc的面积不会与float的元素面积重叠。

* 计算bfc高度时，浮动元素也参与估计

* bfc是页面上的独立容器，容器上的子元素不会影响外部元素。

3. 标签语义

代码结构变得更加清晰

一看名字就知道意思，没有基础的人也能知道这部分代码是做什么用的

方便团队开发和维护，代码可读性更强

有利于 SEO 优化，爬虫依靠标签来确定上下文

4.元标签

meta标签提供了关于html文档的元数据，这些元数据不会显示在页面上，但对于机器可读，告诉浏览器如何解析页面，告诉搜索引擎关键词（SEO优化）

Meta功能：告诉机器浏览器如何解析页面，描述这个页面的主要内容，并设置服务器发送给浏览器的http返回内容

charset="utf-8" 设置页面使用的字符编码

viewport设置层，移动适配

5、css和javascript设置的引入 script标签的引入通常放在body的末尾，这样可以防止脚本过大，加载时间过长，导致页面出现较长的空白。

这是因为渲染进程和js进程是互斥的，脚本会阻塞页面的渲染，脚本的加载是同步进行的，并且按照引入的顺序执行，但是下面两个属性会影响脚本执行和页面渲染的顺序

defer：不会阻塞渲染，所以即使放在header内部，也不会阻塞页面加载，但是js会先于document加载，不会影响脚本的执行顺序，会在document中执行介绍顺序

async：和defer一样，解决阻塞渲染，但是是在文档加载完成后执行，其执行顺序是根据谁先加载完成，所以对文件的顺序有要求，有的话就不要使用是一个来回的依赖

6、HTML的块级元素、行内元素、行内块元素是什么，有什么区别？

块级元素：div、h1-h6、p、ul、ol、dl、li、hr、dt、dd、form、table

特点：块元素占单行，宽高生效，默认宽度与父元素相同，内容的高度展开，margin、padding均生效

行内元素：em、i、del、small、strong、ins、span、a

特点：宽高不生效，左右边距生效，上下不生效，排成一行，大小取决于内容，padding生效

内联块元素：img、input（表单元素、移除表单）

特点：排成一行，宽高生效，margin和padding生效

7. CSS3有哪些新特性

边框半径圆角

边框图像 边框图像

border-image: url() 右上角 左下角

边框宽度：右上左下

box-shadow 包阴影: x,y,size,opcity

文本阴影 文本阴影 线性渐变 线性渐变

背景：线性渐变（到位置css3的弹性盒模型，颜色，颜色，...，颜色）

径向梯度 径向梯度

背景：径向渐变（位置 处的形状尺寸，

颜色，颜色，...，颜色）

2D/3D转换transform: 旋转（rotation） 缩放（zoom） 平移（displacement）

@media媒体查询，根据屏幕长度设置，用于解决移动适配，使对应的css根据屏幕尺寸生效

弹性布局（弹性袋）

8. 实现元素隐藏

display: none 不占空间，源码可见

不透明度：0 占位符，源代码可见，不透明度 0

visibility：隐藏占位符，源代码可见

position: top:-9999px,left:-9999px 使用定位将元素移出窗口

9、如何实现元素水平居中

行内元素：文本对齐：居中

块元素：边距：0 auto

位置：左：50%； 变换：平移(-50%)

10.如何实现元素垂直居中

高度 = 行高

垂直对齐：中间

位置：顶部：50%； 变换：翻译(0,-50%)

11.职位

静态默认值

relative 相对定位，不脱标签，偏离自身位置，不影响元素本身的特性，z-index增加级别

Absolute 绝对定位，标签外，偏离已定位的父元素，如果没有偏离则偏离主体

固定 固定定位、标签外、相对于窗口的偏移

12.定位元素水平和垂直居中

宽高固定位置：top:0,left:0,right:0,bottom:0,margin:auto

宽高固定位置：top: 50%, left: 50%, margin-left: -width/2px, margin

顶部：-高度/2px

显示：柔性； justify-content：中心，align-items：中心（强烈推荐）

位置：左：50%，上：50%； 变换：翻译（-50%，-50%）

13、消除浮动

不清楚浮动会导致高度塌陷：浮动元素的父元素高度自适应（当父元素不写高度时，子元素写入float后，父元素高度会塌陷）

*clear清除浮动（添加空div方法）在浮动元素下面添加一个空div，并给该元素写入css样式：

{清除：两者；高度：0；溢出：隐藏；}

* 设置浮动元素父级的高度

* 父元素同时浮动（需要给父元素和兄弟元素添加浮动）

* 父级设置为inline-block，其margin:0自动居中方式无效

* 父级添加overflow:hidden清除浮动方法

* 伪类后通用驱逐方法清除浮动（目前主流方法，推荐）

.float_div:after{
		 content:".";
 			clear:both;
 			display:block;
       height:0;
 			overflow:hidden;
			 visibility:hidden;
}
.float_div{
			 zoom:1
}

14.什么是css选择器，选择器的优先级

- id选择器

- 类选择器

- 属性选择器

- 伪类选择器

- 选项卡选择器

- 伪元素选择器

- 通配符选择器优先级：内联样式 > ID 选择器 (100) > 类选择器 (10) = 属性选择器 = 伪类选择器 > 元素选择器 (1) = 关系选择器 = 伪元素选择器 > 通配符选择器(0)

！重要的

后代选择器选择全部

后代选择者只选择亲生女儿

15.各种布局的优缺点

1.浮动布局

优点：比较简单，兼容性好。 只要消除浮动做得好，就没有缺点：浮动元素脱离了文档流，需要清理。 如果处理不好，会带来很多问题，比如塌陷高度等等。

2. 绝对布局

优点：非常快，设置简单，不易出现问题缺点：绝对定位脱离了文档流，这意味着下面的所有子元素也将脱离文档流，这使得这些技术有效且可用性生活比较差。

3. 弹性布局

优点：简单快速缺点：不支持IE8及以下版本

4. 表格布局

优点：实现简单，代码少缺点：当其中一个单元格的高度超过时，两侧的单元格也会一起变高，而有时这些疗效并不是我们想要的。

5.网格布局

与弹性类似。

16. html5有哪些新特性，以及这些元素被删除了？ HTML5新标签的浏览器兼容性问题如何处理？ 如何区分HTML和HTML5？

**新功能：**

HTML5不再是SGML的子集，主要是图像、位置、存储和多任务处理等功能的减少。

拖放API

语义和更好的内容标签（标题、导航、页脚、旁白、文章、部分）

音频、视频API（音频、视频）

画布API

地理定位API

本地离线存储localStorage长期存储数据css3的弹性盒模型，浏览器关闭后数据不会丢失；

浏览器关闭后手动删除sessionStorage数据

表单控件、日历、日期、时间、电子邮件、url、搜索

新技术webworker、websocket、Geolocation

**删除元素：**

纯粹表达的元素：basefont、big、center、font、s、strike、tt、u；

对可用性产生负面影响的元素：frame、frameset、noframes；

**兼容h5新标签：**

IE8/IE7/IE6支持document.createElement形成的标签，

您可以使用此功能让那些浏览器支持 HTML5 新标签，

当然最好的形式是直接使用成熟的框架，用的最多的是html5shim框架

**如何辨别：**

DOCTYPE声明添加的结构元素功能元素

17. CSS3中新的伪类的例子：

p:first-of-type 选择属于其父元素的第一个元素

每个元素

元素。

p:last-of-type 选择属于其父元素的最后一个元素

每个元素

元素。

p:only-of-type 选择唯一属于其父元素的类型

每个元素

元素。

p:only-child 选择作为其父级的唯一子级的每个元素

元素。

p:nth-child(2) 选择其父级的第二个子级的每一位

元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选按钮或复选框已选中。

18.解释一下盒模型的宽度和高度的估计方法、边界塌陷、负值效应、box-sizing概念？

1.盒子模型：IE 678下（无doctype）使用ie盒子模型，宽度=边框+填充+内部

内容长度； chrom，IE9+，（添加doctype）使用标准盒模型，宽度=内容长度。

2. box-sizing ：为了解决标准太阳黑子和IE包的差异，CSS3添加了盒模型属性box-sizing、content-box（默认）、border-box让元素保持IE传统包模型， inherit继承父包模型；

3. 边界折叠：有时块元素的顶部和底部边距会合并（折叠）为单个边距（合并后的最大边距）。 这种现象称为边缘崩溃。

4.负值效果：负margin会改变浮动元素的显示位置，即使我的元素写在DOM旁边，我也可以让它显示在前面。

19、如何实现浏览器中多个标签之间的通信？

调用localstor、cookie等本地存储方法

20.解释下浮子及其工作原理？清除浮子的方法

浮动元素脱离文档流并且不占用空间。 浮动元素遇到其封闭边框或浮动元素的边框徘徊。

1.使用空标签消除浮动。

这种方式是在所有浮动标签前面添加一个空标签定义cssclear:both。 缺点是减少了无意义的标签。

2.使用after伪对象消除浮动

此方法仅适用于非IE浏览器。 具体的写法可以参考下面的例子。 使用过程中应注意以下几点。 1、该方法中，需要消除浮动元素的伪对象必须设置height:0，否则元素会比实际高出几个像素；

#parent:after{
		content:".";
		height:0;
		visibility:hidden;
		display:block;
		clear:both;
}

3.设置溢出为隐藏或自动

4. 浮动外部元素