文章目录
1.HTML5新特性
- 语意化标签 article、footer、header、nav、section
- 新增选择器 document.querySelector、document.querySelectorAll
- 媒体标签 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 增强表单控件（表单类型、表单元素、表单属性、表单事件。） calendar、date、time、email、url、search
- 跨域资源共享(CORS) Access-Control-Allow-Origin
H5移除的元素：
纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes
2.HTML5语义化
Header 页面头部
Nav 导航栏
main 页面主要内容
footer 页面底部
aside 侧边栏
article 加载页面一块独立内容
<title> <!--：页面主体内容。-->
<hn> <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul> <!--：无序列表。-->
<li> <!--：有序列表。-->
<header> <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav> <!--：标记导航，仅对文档中重要的链接群使用。-->
<main> <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article> <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section> <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside> <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer> <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small> <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong> <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em> <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark> <!--：使用黄色突出显示部分文本。-->
<figure> <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite> <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
<q> <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time> <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr> <!--：简称或缩写。-->
<dfn> <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address> <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del> <!--：移除的内容。-->
<ins> <!--：添加的内容。-->
<code> <!--：标记代码。-->
<meter> <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress> <!--：定义运行中的进度（进程）。-->
语义化优点：
1.易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。提升可访问性
2.有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3.有利于开发和维护，语义化更具可读性
3.CSS盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
W3C盒子模型(标准盒模型)
IE盒子模型(怪异盒模型)
- W3C标准模型 和 IE模型（怪异盒模型的区别
计算宽度和高度的不同
标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。
（ 即 width/height 只是 内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。
（ 即 width/height 包含了 padding 和 border 值 ）
CSS如何设置这两种模型
标准：box-sizing: content-box; ( 浏览器默认设置 )
IE： box-sizing: border-box;
盒子塌陷
原因：当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。
盒子塌陷解决方法
（1）最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，缺点是非自适。
（2）给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。
（3）给父盒子添加overflow属性。
overflow:auto; 有可能出现滚动条，影响美观。
overflow:hidden; 可能会带来内容不可见的问题。
（4）父盒子里最下方引入清除浮动块。
（5）用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它。低版本IE不兼容
4. 样式优先级
- 样式类型三类
行间
<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>
内联
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
外部
<link rel="stylesheet" href="css/style.css">
选择器类型
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type=“text”]
6、伪类 :hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
权重计算规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
比较规则
选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
5.CSS继承
css的继承：就是给父级设置一些属性，子级继承了父级的该属性。
6 css 伪类与伪元素区别
1.伪类(pseudo-classes)
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式 等等
伪类用于定义元素的特殊状态。
其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加⼀些选择器的特殊效果。
- 比如:hover :active :visited :link :visited :first-child :focus :lang等
- 由于状态的变化是非静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它又会失去这个样式。
2.伪元素(Pseudo-elements)
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
DOM树没有定义的虚拟元素，CSS 伪元素用于设置元素指定部分的样式。
核心就是需要创建通常不存在于文档中的元素，
- 比如::before ::after选择元素内容的之前内容或之后内容。
- 伪元素控制的内容和元素是没有差别的，但是并不存在于⽂档中，所以称为伪元素。
3.伪类与伪元素的区别
表示方法
CSS2.1 后规定伪类用单冒号表示,伪元素用双冒号::表示，
定义不同
伪类即假的类，可以添加类来达到效果
伪元素即假元素，需要通过添加元素才能达到效果
总结:
伪类和伪元素都不出现在源文件和DOM树中。
伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某⼀特征。
伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。
7. CSS清除浮动
把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。
clear属性用于清除浮动{clear:属性值;}
额外标签法
.clear { clear:both }
<div class="clear"></div>
overflow
给父级元素添加overflow样式方法。
代码比较简洁，可以通过触发BFC方式，会溢出隐藏。
.father {
overflow: auto;
/* 加上这句话，就可以清除浮动 overflow = hidden|auto|scroll 都可以实现*/
}
伪元素法（最常用）
使用after伪元素清除浮动
代表网站：百度、淘宝、网易等
使用before和after双伪元素清除浮动（推荐）
完全符合闭合浮动思想的方法。
父元素中加一个类名为 clearfix,需要兼容IE6、7
代表网站：小米、腾讯
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
8.BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
块格式化上下文对浮动定位和清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。
浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。
规则
BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，不会影响到外部标签
垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算
作用
- 解决高度坍塌
加上一个overflow: hidden - 解决margin重叠问题
- 阻止元素被浮动元素覆盖
9.css字体大小设置（三种）.em rem px
px（绝对长度单位）
em（相对长度单位）
特点：
em的值并不是固定的；
em会继承父级元素的字体大小（参考物是父元素的font-size；）；
em中所有的字体都是相对于父元素的大小决定的；
rem（相对长度单位）
特点：
-
rem单位可谓集相对大小和绝对大小的优点于一身
-
和em不同的是rem总是相对于根元素(如:
root{})，
rem支持IE9及以上，意思是相对于根元素html（网页），不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多。
10.CSS 中可继承与不可继承属性有哪些？
一、无继承性的属性
- display：规定元素应该生成的框的类型
- 文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
-
字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格 -
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是 uppercase、lowercase、capitalize 这三个）
color：文本颜色 -
元素可见性
visibility：控制元素显示隐藏 -
列表布局属性
list-style：列表风格，包括 list-style-type、list-style-image 等 -
光标属性
cursor：光标显示为何种形态
11.替换元素和非替换元素
-
替换元素：指浏览器是根据元素的属性来判断具体要显示的内容的元素。比如 img 标签，浏览器是根据其 src 的属性值来读取这个元素所包含的内容的，常见的替换元素还有
input 、textarea、 select、 object、 iframe 和 video等等，这些元素都有一个共同的特点，就是浏览器并不直接显示其内容，而是通过其某个属性的值来显示具体的内容，比如浏览器会根据 input 中的 type 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。
-
非替换元素：比如 p、label 元素等等，浏览器直接显示元素所包含的内容。
11.z-index 属性在什么情况下会失效？
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。
z-index属性在下列情况下会失效：
- 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
- 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
- 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
12.Flex布局的理解及其使用场景
简单来说：flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。
一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。
以下6个属性设置在容器上：
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
以下6个属性设置在项目上：
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
扫一扫
1227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
