一、布局方式
1. 流动布局
流动布局是HTML默认的布局方式，流动布局随文档流自上而下按顺序动态分布。流动布局只根据元素排列的先后顺序决定显示位置。如果要改变元素的显示位置，只能通过改变HTML文档结构实现。
流动布局有以下两个比较典型的特征:
块状元素都会在包含元素内自上而下按顺序堆叠分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%
行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推。
2. 表格布局
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格是以行和列的形势显示信息，常用于显示网格结构的数据。
表格常用标签:
| 标签 | 描述 |
|---|---|
| <table> | 表格标签 |
| <thead> | 表头 |
| <tbody> | 表体 |
| <tfoot> | 表尾 |
| <th> | 标题 |
| <tr> | 行 |
| <td> | 列 |
常用的table属性:
| 属性名 | 属性值 | 描述 |
|---|---|---|
| width | number | 表格宽度 |
| height | number | 表格高度 |
| align | left | right | center | 单元格里的文字对齐方式 |
| bgcolor | string | 背景色 |
| background | string | 背景图片 |
| border | string | 边框 |
| cellpadding | number | 边距 |
| cellspacing | number | 间距 |
| rowspan | number | 跨行合并 |
| colspan | number | 跨列合并 |
| border-collapse | collapse | 合并边框线 |
3. 浮动布局
一旦标准流中元素被加了float:left或float:right样式，则元素就变为了浮动元素，脱离文档流。
- 浮动元素之间共享一行
- 浮动元素的width、height默认由元素内容决定，而不是由父级决定
- 浮动元素支持通过width、height、padding、border、margin来指定盒子内容区、内外边距、边框大小
- 浮动元素之间不会因为空格、换行产生空隙，浮动元素之间是紧密贴合的
- 浮动元素之间紧密贴合，不会发生覆盖现象。
- 如果目前顶部的行的剩余宽度不足以放下新的浮动元素，则新的浮动元素自动另起一行排列。
- 容易出现高度塌陷问题
| 属性名 | 属性值 | 描述 |
|---|---|---|
| float | none | 默认无浮动 |
| left | 左浮动 | |
| right | 右浮动 | |
| clear | left | 清除当前元素前面的，左浮动元素脱标后带来的影响（高度塌陷） |
| right | 清除当前元素前面的，右浮动元素脱标后带来的影响（高度塌陷） | |
| botn | 清除当前元素前面的，左、右浮动元素脱标后带来的影响（高度塌陷） |
4. 定位布局
定位布局可以精确控制网页对象的显示位置，布局精准，不会出现错行和误差问题；
缺点是缺乏灵活性，栏目之间不能够协同变化，还会存在叠加等风险
| 属性名 | 属性值 | 描述 |
|---|---|---|
| postion | relative | 相对定位，相对于元素本身 |
| postion | absolute | 绝对定位，相对于开启定位的父元素 |
| postion | static | 不定位、默认值 |
| postion | fixed | 固定定位，相对于窗口 |
5. 弹性布局(flex布局)
- 作用： 和浮动一样都用于网页布局 ，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单 （推荐使用）。
- 组成： 弹性容器+弹性盒子+主轴+侧轴
父元素属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| display | flex | 开启弹性布局 |
| justify-content 主轴对齐方式 | flex-start | 左对齐(默认) |
| justify-content 主轴对齐方式 | flex-end | 右对齐 |
| justify-content 主轴对齐方式 | center | 居中对齐 |
| justify-content 主轴对齐方式 | space-between | 均匀分布、左右不留 |
| justify-content 主轴对齐方式 | space-around | 均匀分布、左右少许间隙 |
| justify-content 主轴对齐方式 | space-evenly | 均匀分布、左右相等间隙 |
| align-items 侧轴对齐方式 | flex-start | 上对齐 |
| align-items 侧轴对齐方式 | flex-end | 下对齐 |
| align-items 侧轴对齐方式 | center | 居中对齐 |
| align-items 侧轴对齐方式 | stertech | 拉伸铺满(默认) |
| align-items 侧轴对齐方式 | inline | 根据内容文字对齐 |
| align-content 行对齐方式 只有1行时不生效 | flex-start | 上对齐 |
| align-content 行对齐方式 只有1行时不生效 | flex-end | 下对齐 |
| align-content 行对齐方式 只有1行时不生效 | center | 居中对齐 |
| align-content 行对齐方式 只有1行时不生效 | space-between | 均匀分布、上下不留 |
| align-content 行对齐方式 只有1行时不生效 | space-around | 均匀分布、上下少许间隙 |
| align-content 行对齐方式 只有1行时不生效 | space-evenly | 均匀分布、上下相等间隙 |
| flex-dirction 改变主轴方向 | row | 从左往右(默认) |
| flex-dirction 改变主轴方向 | row-reverse | 从右往左 |
| flex-dirction 改变主轴方向 | column | 从上到下 |
| flex-dirction 改变主轴方向 | column-reverse | 从下到上 |
| flex-wrap 换行 | nowrap | 不换行(默认) |
| flex-wrap 换行 | wrap | 换行 |
| flex-wrap 换行 | wrap-reverse | 向上换行 |
子元素属性:
| 属性名 | 属性值 | 描述 |
|---|---|---|
| flex | 0 | 1 | auto | 放大比例 | 缩小比例 | 分配多余空间之前占比 |
| order | number | 权重、控制排列顺序 |
| align-self 侧轴对齐方式 | auto | 默认使用父元素的align-items |
| align-self 侧轴对齐方式 | flex-start | 上对齐 |
| align-self 侧轴对齐方式 | flex-end | 下对齐 |
| align-self 侧轴对齐方式 | center | 居中对齐 |
| align-self 侧轴对齐方式 | baseline | 文字对齐 |
| align-self 侧轴对齐方式 | stretch | 拉伸铺满 |
6. 栅格布局(grid布局)
CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。
栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。
对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可
父元素属性：
| 属性名 | 属性值 | 描述 | |
|---|---|---|---|
| display | grid | 开启块元素栅格布局 | |
| display | inline-grid | 开启行内块元素栅格布局 | |
| grid-template | 100px 100px; 20% 20%; 1fr 2fr 1fr; repeat(12, 1fr); repeat(auto-fill , 100px); repeat(3, minmax(50px, 100px)) | 划分行和列(先行后列) | |
| grid-template-rows | 100px 100px; 20% 20%; 1fr 2fr 1fr; repeat(12, 1fr); repeat(auto-fill , 100px); repeat(3, minmax(50px, 100px)) | 划分行 | |
| grid-template-columns | 100px 100px; 20% 20%; 1fr 2fr 1fr; repeat(12, 1fr); repeat(auto-fill , 100px); repeat(3, minmax(50px, 100px)) | 划分列 | |
| gap | 定义行和列的间距 | ||
| rows-gap | 行间距 | ||
| columns-gap | 列间距 | ||
| grid-auto-flow | column | 按列排序 | |
| grid-auto-flow | row | 按行排序(默认) |
子元素属性：
| 属性名 | 举例 | 描述 | |
|---|---|---|---|
| grid-area | 2 / 1 / span 1 / span 3 | 定位( 行开始 / 列开始 / 行结束 / 列结束 ) | |
| grid-row | 2 / span 1 | 定位行开始和结束位置( 开始位置 / 结束位置 ) | |
| grid-column | 2 / span 1 | 定义列开始和结束位置( 开始位置 / 结束位置 ) | |
| grid-row-start | 1 | 定位行开始位置 | |
| gird-colunm-start | 1 | 定位列开始位置 | |
| gird-row-end | span 1 | 定位行结束位置 | |
| gird-colnum-end | span 1 | 定位列结束位置 |
7. 圣杯布局和双飞翼布局
圣杯布局和双飞翼布局最终效果相同，具有相同的特点
- 两侧宽度固定，中间宽度自适应（三栏布局）
- 中间部分在DOM结构上有限，以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的div标签
圣杯布局代码
html
<div class="header"></div>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>双飞翼布局代码
html
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>最终效果
- 圣杯布局代码结构上更加自然和直观，在平时的开发中更容易形成这样的布局结构；
- 双飞翼布局由于不使用定位，所以代码更加简洁，允许页面的最小宽度小于圣杯布局。
二、HTML5新特性
H5 新特性
1、拖拽释放(Drap and drop) API ondrop
拖放是一种常见的特性，即抓取对象以后拖到另一个位置
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2、自定义属性 data-id
3、语义化更好的内容标签(header,nav,footer ,aside, article, section)
4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办? 在属性中添加
autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)
5、画布 Canvas
5.1）getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参
数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二
维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
5.2）cxt.stroke() 绘制线条
5.3）canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上. 6、 地理(Geolocation) API 其实 Geolocation 就是用来获取到当前设备的经纬度（位置）
7、 本地离线存储 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，
直到手动去删除
8、 sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页
之后将会删除这些数据。
9、 表单控件 calendar , date , time , email , url , search , tel , file , number
10、新的技术 webworker(分支线程) , websocket(双工通信技术) , Geolocation(地理位置)
三、CSS3的新特性有哪些?
CSS3 新特性
1、颜色: 新增 RGBA , HSLA 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景:background-size background-origin background-clip
6、渐变: linear-gradient , radial-gradient
7、过渡 : transition 可实现属性的渐变
8、自定义动画 animate @keyfrom
9、媒体查询 多栏布局 @media screen and (width:800px) {...}
10、border-image 图片边框
11、2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、字体图标 iconfont/icomoon
13、弹性布局 flex
四、如何实现一个元素水平垂直居中?
1. 块级元素
I. postion:abslute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
II. display:flex;
justify-content:center;
align-items:center;
III.display: grid;
place-items: center;
2. 行内元素
I. text-align:center;
line-height:20px;
五、CSS盒模型
盒子模型分为两种:
第一种:是 W3C 标准的盒子模型（标准盒模型）可以通过box-sizing:content-box来设置;
第二种:IE 标准的盒子模型（怪异盒模型）可以通过box-sizing:border-box来设置;
标准盒模型与怪异盒模型的表现效果的区别之处:
1、标准盒模型下盒子的大小 = content + border + padding + margin
2、怪异盒模型下盒子的大小=width（content + border + padding） + margin
六、CSS选择器的优先级及CSS权重如何计算
!Important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
七、input 元素 type 属性值
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符;
password 定义密码字段。字段中的字符会被遮蔽;
search 定义用于搜索的文本字段;
number 定义带有 spinner 控件的数字字段;
email 定义用于 e-mail 地址的文本字段;
url 定义用于 URL 的文本字段;
radio 定义单选按钮。
checkbox 定义复选框。
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
reset 重置按钮，用于重置表单数据。
submit 定义提交按钮。提交按钮向服务器发送数据。
range 滑动条，用于选择一个范围内的值
color 定义拾色器。
image 定义图像作为提交按钮;
file 定义输入字段和 "浏览..." 按钮，供文件上传
date 定义日期字段（带有 calendar 控件）
month 定义日期字段的月（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
八、CSS中哪些属性是可以继承的、哪些是不可以继承的
能继承的属性
1. 字体系列属性:font、font-family、font-weight、font-size、font-style;
2. 文本系列属性:
2.1）内联元素：color、line-height、word-spacing、letter-spacing、
text-transform;
2.2）块级元素：text-indent、text-align;
2.3）元素可见性：visibility
3. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、
table-layout;
4. 列表布局属性：list-style
不能继承的属性
1. display：规定元素应该生成的框的类型；
2. 文本属性：vertical-align、text-decoration;
3. 盒子模型的属性：width、height、margin 、border、padding;
4. 背景属性：background、background-color、background-image;
5. 定位属性：float、clear、position、top、right、bottom、left、min-width、
min-height、max-width、max-height、overflow、clip;
九、px、%、em、rem、vwvh的区别
1、px 像素（Pixel）,固定长度单位，1px 就是一个像素点;
2、% 相对长度单位，相对于父元素的长或宽的占比;
3、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一个固定的值;
4、rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素;
5、vwvh 相对长度单位，相对于浏览器窗口的占比，相当于把浏览器长宽分成一百份，1vw等于浏览器宽度的1%
十、rem 适配方法如何计算 HTML 根字号及适配方案？
1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优：有一定适用性，换算也较为简单
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同
手机，单某款手机尺寸不在设置范围之内，会导致无法适配
十一、display：none 与 visibility：hidden 的区别？
元素隐藏和显示最常用的为 display:none 和 visibility:hidden
dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置
区别
1.visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元
素会显示
2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘
十二、什么是浮动？浮动会引起什么问题？如何清除浮动？
1. 什么是浮动?
浮动是通过CSS的float属性开启的一种布局模式，将元素排除在文档流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的边界或者浮动元素的边界停留 。
2. 浮动会引发什么问题
浮动会引起父级容器高度塌陷问题，我们可以通过给父级容器设置高度或者通过清除浮动来解决;
3.如何清除浮动
方案1 BFC模式
让标准流中父容器变为BFC模式，这样就可以保证父容器中子元素渲染不会影响外界了（即：不会引起父容器高度变化）
将元素转为BFC渲染模式的方式有：
- 元素变为浮动元素，即加float样式（非none）
- 元素变为定位元素，即加position样式（值为absolute或fixed）
- 元素变为弹性元素，即加display:flex
- 给父级元素设置 overflow：hidden 或 overflow：auto
- 元素变为行内块显示模式
方案2clear
利用clear样式来清除浮动引起的父容器高度塌陷
在浮动元素后添加一个元素,并设置其clear属性为both。这会使得该元素下移,直到其顶部在所有前面的左浮动和右浮动元素下面。
方案3 伪元素
在父元素中添加一个伪元素(::before,::after),并设置其clear属性为both。这种方法的优点是不需要添加额外的HTML元素。
十三、如何解决margin"塌陷"？
外边距塌陷共有两种情况：
**第一种情况：**两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给
margin-top，那么他们两个的间距会重叠，以大的那个计算。
解决这种情况的方法为：两个外边距不同时出现
**第二种情况：**两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生
上边距，父子元素会进行粘连。解决方案:
1、为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透
明：border：1px solid transparent）；
2、为父盒子添加 overflow：hidden；
3、为父盒子设定 padding 值；
4、为父盒子添加 position：fixed；
5、为父盒子添加 display：table；
6、利用伪元素给父元素的前面添加一个空元素
.father::before { content:''; display:table; }
十四、CSS3伪类、伪元素？
p:first-of-type 选择属于其父元素的首个<p>元素
p:last-of-type 选择属于其父元素的最后<p>元素
p:nth-child(n) 选择属于其父元素的第 n 个子元素并且必须是<p>元素
p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素并且必须是<p>元素
p:nth-of-type(n) 选择属于其父元素第 n 个<p>元素
p:nth-last-of-type(n) 选择属于其父元素倒数第 n 个<p>元素
p:last-child 选择属于其父元素最后一个子元素的并且必须是<p>元素
p:target 和锚点链接一起使用
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素
(target element)。
:target 选择器可用于选取当前活动的目标元素。
:not(p) 选择非<p>元素
:enabled 选中不在禁用状态下的表单控件
:disabled 选中禁用状态下的表单控件
:checked 选中 单选框或复选框被选中 的元素
::first-letter 将样式添加到文本的首字母
::first-line 将样式添加到文本的首行
::before 在某元素之前插入某些内容
::after 在某元素之后插入某些内容
十五、BFC是什么
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域 外部毫不相干
哪些元素会生成 BFC：
- 元素变为浮动元素，即加float样式（非none）
- 元素变为定位元素，即加position样式（值为absolute或fixed）
- 元素变为弹性元素，即加display:flex
- 给父级元素设置 overflow：hidden 或 overflow：auto
- 元素变为行内块显示模式
十六、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？
html
针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！
<style>
p span{
display:block;
font-size:10px;
-webkit-transform:scale(0.8);
}
</style>
<p>
<span>文本 10px</span>
</p>