今天本来有个面试…但是面试官参加管理层会议去了，我也不知道，就一个人干等了半个多小时（远程面试，但是我要去借教室QAQ）这件事告诉我，被鸽了也不要干等，搞点学习！！！
今天是CSS/HTML专场 0.0
行内元素、块级元素
行内元素（inline）：
不能设置宽高，多个元素共享一行，占满换行。
a：超链接
i：文字倾斜
b：定义文字加粗
em：定义文字倾斜语义更加强调
span：定义文档中的节
mark：定义有记号的文本
code：定义计算机代码文本
input：
img：
textarea：
label：
select ：
块级元素（block）：
可以设置宽高，一个元素占满一行。
h1-h6
p：段落
div：文档中的节
ul：无序列表
ol：有序列表
li：列表里的项
hr：水平线
pre：预格式文本
form：表单
audio：声音内容
video：视频
nav：导航链接
table：表格
inline-block
可以设置宽高，多个元素共享一行，占满换行。
CSS盒子模型
1、盒模型：内容content、填充padding、边界margin、边框border
2、类型：IE盒子模型、标准W3C盒子模型
3、两个盒子区别：
标准盒模型的宽高是：内容的宽高content
IE盒模型的宽高是：content+padding+border
4、设置盒模型的方式：
标准盒模型：box-sizing:content-box
IE盒模型： box-sizing：border-box
CSS选择符优先级
1、优先级就近原则，同权重情况下样式定义最近者为准。
2、载入样式以最好载入的定位为准。
3、！important > 内联 > id > class > 标签|伪类|属性选择 > 伪对象 > 继承 > 通配符
优先级权重：
元素选择器：1
伪元素选择器：1
class选择器：10
伪元素选择器：10
属性选择器：10
id选择器：100
内联：1000
清除浮动的方式
1、为父元素添加overflow：hidden
超出部分的元素会被隐藏
<div style="overflow：hidden">
<div></div>
<div></div>
</div>
2、clear：both清除浮动，在浮动元素下方添加该属性可以破坏float的破坏性，但是会增加不必要的标签。
<div>
<div></div>
<div></div>
<div style="clear:both"></div>
</div>
3、伪元素清除浮动
通过伪元素选择器在div后面添加一clear:both的属性。
<div class="clearfix">
<div></div>
<div></div>
</div>
.clearfix:after{
content:'';
display:block;
clear:both;
}
给一个盒子水平垂直居中
1、定位
{
position：absolute；
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}
2、flex布局：给父盒子添加属性
{
display：flex；
justify-content:center;
align-items:center；
}
3、给父盒子设置属性
{
display：table-cell；
text-align:center;
vertical-align:middle；
}
什么是BFC
BFC：块格式化上下文。是一个独立渲染区域，不会影响到外部元素。
BFC特性：
同一个BFC下magrin会叠加。
计算BFC时会算上浮动元素。
BFC不会影响到外部元素。
BFC内部元素是垂直排列的。
BFC区域不会与float元素重叠。
如何创建BFC：
position设置为absolute或者fixed。
float不为none。
overflow设置为hidden。
display设置为inline-block或者inline-table或者flex
什么是HTML语义化标签
语义化标签旨在让标签有自己的含义。
p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。
优势：
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备）以语义化的方式来渲染页面。
有利于搜索引擎优化SEO
HTML5新增的内容
-
HTML5 标准还在制定中
HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。 -
简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写<!doctype html>就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。 -
<canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能。 -
新增
<header>和<footer>标签HTML5设计的一个原则是更好的体现网站的语义性，所以增加了<header>和<footer>这样的标签，用来明确表示网页的结构。 -
新增
<section>和<article>标签与<header>,<footer>类似，<section>和<article>也有利于清晰化网页的结构，更有利于SEO。 -
新增
<menu>和<figure>标签
<menu>可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。
<figure>标签使得网页文字和图片的排版更专业。 -
新增
<audio>和<video>标签
这两个标签可能是HTML5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。 -
全新的表单
HTML5对<form>和<forminput>标签进行了大量修改，添加了很多新的属性，也修改了很多属性。 -
删除
<b>和<font>标签
我不认为删除这两个标签对代码的改进有很大的帮助。官方的解释是应该CSS来替代这两个标签。但我还是觉得对于简单的文本，这两个标签还是很方便的。 -
删除
<frame> <center> <big>标签
position定位属性
relative：相对定位，不脱离文档流，相对于自身定位。
absolute：绝对定位，脱离文档流，相对于父级定位。
fixed：固定定位，脱离文档流，相对于浏览器窗口定位。
static：默认值，元素出现在正常流中。
first-of-type和first-child有什么区别
first-of-type：匹配的是从第一个子元素开始数，匹配到的第一个元素
first-child：必须是第一个子元素
img的title和alt的区别
title是gloab attributes之一，为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是img特有的属性，是图片内容的等价描述。用于图片无法加载时候的显示，读评阅读图片。提高图片可访问性，搜索引擎会重点分析。
src和href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系;
- src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置;
- href是Hypertext Reference的缩写，指向网络资源所在的位置，建立和当前元素(锚点)或当前文档之间的链接;
CSS中link和@import的区别是什么？
- link属于HTML标签，@import是CSS提供的，只能加载CSS
- 页面被加载时，link会同时被加载，@import引用的CSS会等页面被加载完再加载
- @import只能在IE5以上才能被识别，link无兼容问题
- link样式权重高于@import的权重
- 当使用js控制DOM改变样式的时候，只能用link方式，因为@import只有CSS才能识别，DOM无法识别
CSS sprites原理、优缺点
css sprites其实就是把网页中的一些背景图片整合到一张图片文件中，在利用CSS的 background-image,background-repeat,background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优点:
- 减少网页的http请求。减少图片的字节
- 解决网页设计师在图片命名上的困扰，只需要对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变了
缺点:
- 在宽屏，高分辨率的屏幕下的自适应页面，如果背景图不够宽，很容易出现背景断裂
- css sprites在开发的时候，需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置
- 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要修改这张合并的图片
rgba()和opacity的透明效果有什么不同？
- opacity作用于元素，以及元素内的所有内容的透明度。
- rgba（）只作用于元素的颜色或者背景颜色，设置rgba透明的元素的子元素不会继承透明效果。
CSS样式表的继承
文本相关: font-family,font-size，font-style,font-variant，font-weight， font，letter-spacing,line-height，color;
列表相关:list-style-image，list-style-position,list-style-type，list-style;
script标签中defer和async都表示了什么
默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。
如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载。
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
px、em、rem、vw、vh、rpx单位
px 像素
em 当前元素字体大小
rem 根元素字体大小
vw 100vw总宽度
vh 100vh总高度
rpx 750是总宽度
扫一扫
1815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
