【前端八股】之HTML、CSS基础

@【前端八股】之HTML、CSS基础TOC

HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等；
这些新特性都有兼容性问题，基本是IE9+以上的版本浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性；

HTML5新增的语义化标签

之前布局，基本用div来做，div对于搜索引擎来说，是没有语义的；

：头部标签

：导航标签

：内容标签

：定义文档某个位置

：侧边栏标签

：尾部标签
注意：
这种语义化标签主要是针对搜索引擎的；
这些新标签，页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
移动端更喜欢使用这些标签
HTML5还增加了许多标签

HTML5新增的多媒体标签

使用他们可以很方便的在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件，主要包含两个：

音频标签
当前标签支持三种视频格式：MP3，Wav，Ogg，尽量使用MP3格式

<audio src="URL" controls="controls"> </audio>
		<audio controls="controls">
			<source src="audio.mp3" type="video/mp3">
			<source src="audio.ogg" type="video/ogg">
			您的浏览器不支持audio标签
	</audio>

audio常见属性：
autoplay=“autoplay” 音频就绪自动播放（谷歌禁用）
controls=“controls” 向用户显示播放控件
loop=“loop” 播放完是否继续播放该音频，循环播放
src=“URL” 音频URL
视频标签
当前标签支持三种视频格式：MP4，WebM，Ogg，尽量使用MP4格式

<video src="URL" controls="controls"> </video>
		<video width="320" height="240" controls="controls">
			<source src="movie.mp4" type="video/mp4">
			<source src="movie.ogg" type="video/ogg">
			您的浏览器不支持video标签
	</video>

video常见属性：
autoplay=“autoplay” 视频就绪自动播放（谷歌禁用，谷歌浏览器需要添加muted来解决自动播放问题）
controls=“controls” 向用户显示播放控件
width=“像素” 设置播放器宽度
height=“像素” 设置播放器高度
loop=“loop” 播放完是否继续播放该视频，循环播放
preload=“auto/none” 预先加载视频/不预先加载（有autoplay属性时会忽略该属性）
src=“URL” 视频URL
poster=“imgURL” 加载等待的画面图片
muted=“muted” 静音播放

HTML5新增的input表单

验证的时候必须添加form表单域，点击提交按钮就可以验证表单；
type=“email”：限制用户输入必须为Email类型
type=“url”：限制用户输入必须为URL类型
type=“date”：限制用户输入必须为日期类型
type=“time”：限制用户输入必须为时间类型
type=“month”：限制用户输入必须为月类型
type=“week”：限制用户输入必须为周类型
type=“number”：限制用户输入必须为数字类型
type=“tel”：手机号码
type=“search”：搜索框
type=“color”：生成一个颜色选择表单

HTML5新增的input表单属性

required=“required”：必填，不能为空
placeholder=“”：提示文本，存在默认值时不显示
修改颜色：input::placehoder { color: pink;}
autofocus=“autofocus”：自动聚焦
autocomplete=“off/on”：当用户在字段开始输入时，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。默认已打开，需要放在表单内，同时加上name属性，同时成功提交
multiple=“multiple”：可以多选文件提交

CSS3的新特性

CSS3现状

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段主要学习：新增选择器，盒子模型以及其它特性

新增选择器

属性选择器（类选择器，属性选择器，伪类选择器，权重都是0.0.1.0）
属性选择器可以根据元素特定属性来选择元素，这样可以不借助类或者id选择器。
E[att]：选择具有att属性的E元素
E[att=“val”]：选择具有att属性且属性值等于val的E元素
E[att^=“val”]：选择具有att属性且属性值以val开头的E元素
E[att$=“val”]：选择具有att属性且属性值以val结尾的E元素
E[att*=“val”]：选择具有att属性且属性值含有val的E元素

结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用语根据父级选择器里面的子元素
E :first-child：匹配父元素中的第一个子元素E
ul li:frist-chlid（权重0.0.1.2）
E :last-child：匹配父元素的最后一个E元素
E :nth-child(n)：匹配父元素中的第n个子元素E，n可以是数字（从1开始），关键字(even偶数/odd奇数)和公式（里面只能是n字母，从0开始，3n，2n，n+1（第一个后面），-n+5（前5个））
E :first-of-type：指定类型E的第一个
E :last-of-type：指定类型E的最后一个
E :nth-of-type(n)：指定类型E的第n个
区别：
nth-child会把所有的子元素排序号，先看序号，之后看前面的E，全部匹配才能选择出来；
nth-type-of会把指定元素的盒子排列序号；

伪元素选择器
利用CSS创建新标签元素，而不需要HTML标签，简化HTML结构（遮罩层，等）
::before：在元素内部前面插入内容
::after：在元素内部后面插入元素
注意：
before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中找不到，所以称为伪元素
语法element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容后面插入元素
伪元素选择器和标签选择器一样，权重为0.0.0.1

伪元素字体图标（记得加载字体文件）

p::before {
		position: absolute;
		right:20px;
		top: 10px;
		content: "\e91e"
		font-size: 20px;
	}

仿土豆效果

.demo::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
		background-color: rgba(0,0,0,.3);
	}


	.demo:hover::before{
		display: block;
	}

清除浮动

.clearfix:agter {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

CSS3盒子模型

box-sizing: content-box/boder-box;
content-box：盒子实际大小等于原大小+padding+border（默认）
boder-box：盒子实际大小等于指定大小

图片模糊

filter: 函数();滤镜
eg: filter: blur(5px);：blur模糊处理，数值越大越模糊；

calc函数（计算）

width: calc(100%-80px);‘±*/’：可计算

过渡：

不使用flash，JS，经常和:hover一起使用，
transition:要过渡的属性 花费时间 运动曲线 何时开始;
属性：想要变化的CSS属性，宽高，背景颜色，内外边距等，所有：all；
花费时间：单位秒
运动曲线：默认ease（渐慢），liner（匀速），ease-in（加速），ease-out（加速），ease-in-out（先加速后减速）（可以忽略）
何时开始：延迟触发，默认0s（可忽略）
谁做过渡给谁加

块级元素和行内元素

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>标签是最典型的块元素。

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、
<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）

注意：

1. 只有文字才能组成段落,因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
3. a里面可以放块级元素

块级元素和行内元素区别

块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。

行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。 （4）行内元素只能容纳文本或则其他行内元素。

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，
可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

盒模型

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框，它描述了一个文档元素在网页布局汇总所占的位置大小。每个盒子除了有自己的大小和位置外，还影响着其他盒子的大小和位置，因此正确了解css盒子模型对我们前端页面布局十分重要。
css的盒子模型包括标准盒子模型和IE盒子模型（怪异模型） 。

借用网络上的两张图片

标准盒子模型：

IE盒子模型：

从上面两张图中我们可以看出，两种盒子模型的主要区别就是width的包含范围：
标准盒子模型：width就是content的内容，盒子的宽度是 content + padiing + border
IE盒子模型：width是content + padding + border这是三部分的宽度，盒子的宽度就是width

CSS 选择器及优先级

选择器

• ==id选择器(#myid)
• ==类选择器(.myclass)
• 属性选择器(a[rel=“external”])
• ==伪类选择器(a:hover, li:nth-child)
• 标签选择器(div, h1,p)
• 相邻选择器（h1 + p）
• 子选择器(ul > li)
• 后代选择器(li a)
• 通配符选择器(* )

优先级：

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/伪元素选择器（0001）
• 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

伪类和伪元素

• 伪类：以冒号(:)开头，用于选择处于特定状态的元素。
• 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。

css

复制代码

a:visited:hover { color: red; }

效果如下：

可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。

注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的，因为无痕不记录访问历史，我们可以点击控制台的 :hov 图标手动勾选 :visited 和 :hover 来模拟 a 标签「已访问」和「悬浮」两种状态。

我们再来看一下伪元素的案例，下面的语法表达的意思是： div 标签里面首字的颜色为红色。

css

复制代码

div::first-letter { color: red; }

效果如下：

与伪类不同的是，首字并不是 div 元素的某种状态，而是浏览器创建出来的一个虚拟的元素，我们可以在上图的右下角看到 Pseudo ::first-letter element提示，相当于浏览器自动选中了「彻」字。

注意：::first-letter 伪元素只作用于块状元素上面，如果把 div 换成 span，就无法选中首字了，除非手动设置 span 的 display 属性为 block 或 inline-block 等块状值。

从上面的案例当中，我们可以得出两个结论：

• 伪类用于向某些已经存在的选择器添加特殊效果（当状态改变时）
• 伪元素用于将特殊效果添加到不存在的虚拟元素中（浏览器自动创建）

也就是说伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件；而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。

伪类有哪些？

按照功能，可划分为以下几类：

• 动态伪类：:visited、:focus、:hover等
• 状态伪类：:disabled、:empty、:required 等
• 结构伪类：:first-child、:nth-of-type等
• 其他伪类：:target、:lang、:not()等

下面的表格详细记录了各种伪类及其描述：

伪类	描述	兼容性
:active	元素处于活动状态时	✅
:focus	元素已获取焦点时	✅
:hover	元素处于悬浮状态时	✅
:link	链接未访问时	✅
:visited	链接已访问时	✅
:first-child	元素是首个子元素时	✅
:last-child	元素是最后一个子元素时	✅
:nth-child()	元素是第 n 个子元素时	✅
:nth-last-child()	元素是倒数第 n 个子元素时	✅
:only-child	元素是唯一子元素时	✅
:first-of-type	元素是首个特定类型的子元素时	✅
:last-of-type	元素是最后一个特定类型的子元素时	✅
:nth-of-type()	元素是第 n 个特定类型的子元素时	✅
:nth-last-of-type()	元素是倒数第 n 个特定类型的子元素时	✅
:only-of-type	元素是唯一的特定类型的子元素时	✅
:not	不满足指定条件时	✅
:target	元素 id 匹配到哈希值时	✅
:root	元素是文档树的根元素时	✅
:lang()	匹配到指定语言时	✅
:empty	元素处于没有子元素状态时	✅
:invalid 和 :valid	表单项是否有效	✅
:required 和 :optional	表单项是否必填	✅
:in-range和 :out-of-range	表单项是否超出范围	✅
:read-only和 :read-write	表单项是否只读	✅
:enabled和 :disabled	表单项是否禁用	✅
:fullscreen	当前处于全屏显示模式时	⚠️
:blank	输入框处于输入为空状态时	❌
:dir()	匹配到特定文字书写方向时	❌

上表中的兼容性表示：

• ✅ 代表主流浏览器都支持（至少 95% 以上）
• ❌ 代表大部分主浏览器都不支持（仅 20% 以下浏览器实现该特性）
• ⚠️ 代表部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等）

伪元素有哪些？

与伪类相比，伪元素就少很多了，常用的如下：

伪元素	选中或创建出来的元素	兼容性
::first-letter	选中块状元素中的首字母	✅
::first-line	选中首行	✅
::before	在之前创建一个不在文档树中的元素	✅
::after	在之后创建一个不在文档树中的元素	✅
::placeholder	选中表单元素的占位文本	✅
::file-selector-button	选中类型为 file 的 input 里面的 button	✅
::selection	选中被用户高亮的部分	⚠️
::backdrop	选中视觉聚焦元素后面的背景元素	⚠️
::marker	选中 list 的 marker	⚠️

CSS常见布局

1. 两栏布局(左边固定右边自适应)
2. 三栏布局(左右固定中间自适应)
   流体布局（浮动）
   BFC三栏布局
   双飞翼布局
   圣杯布局
   flex
   table布局
   绝对定位布局
   网格布局(Grid布局)

两栏布局

左边固定，右边自适应

1. 通过设置浮动实现。
   需要两个div实现，一个div设置浮动，并设置宽度，另一个div可以不用设置任何东西

如果要给右边块设置什么的话下面两种方法也行：
left左浮动并设置宽度right设置margin-left为left的宽度也能实现
left设置左浮动并和宽度right，right设置over-flow:hidden也能实现

2. 通过相对定位和绝对定位实现。
   需要三个div，其中一个div是父容器，包含两个子元素。
   两个子元素设置相对定位，给上边的子元素设置宽度，下边的子元素设置left,值为上边子元素的宽度，再设置right:0。
   给父容器设置相对定位是因为可以让其设置绝对定位的子元素相对它进行移动；给上边的子元素设置绝对定位可以让下边的子元素跟它在同一行。

3. 通过弹性盒子flex实现
   需要三个div，其中一个div是父容器，包含两个子元素。
   父元素设置display:flex;上边子元素设置宽度，下边子元素设置flex:1

   div{
   height:300px;
   }
   .parent{
   display:flex;
   }
   .left{
   flex:0 0 100px;
   }
   .right{
   flex:1 1 auto;
   }

三栏布局

左右固定，中间自适应

1. 流体布局（浮动）
   原理: 左右模块各自向左右浮动，并设置中间模块的margin值使中间模块宽度自适应

缺点: 主要内容无法最先加载，当页面内容较多时会影响用户体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局——float</title>
    <style>
        div {
            height: 200px;
        }

        .left {
            float: left;
            width: 100px;
        }

        .right {
            float: right;
            width: 100px;
        }

        .center {
            margin-left: 100px;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <div class="left" style="background-color:rgb(6, 235, 44)"></div>
    <div class="right" style="background-color:rgb(9, 134, 236)"></div>
    <div class="center" style="background-color:red"></div>
</body>

</html>

2. BFC 三栏布局
   原理: BFC规则有这样的描述：BFC 区域不会与浮动元素重叠, 因此我们可以利用这一点来实现 3 列布局

缺点: 主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局——BFC</title>
    <style>
        div {
            height: 200px;
        }

        .left {
            float: left;
            width: 100px;
        }

        .right {
            float: right;
            width: 100px;
        }

        .center {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="left" style="background-color:rgb(6, 235, 44)"></div>
    <div class="right" style="background-color:rgb(9, 134, 236)"></div>
    <div class="center" style="background-color:red"></div>
</body>

</html>

3. 双飞翼布局。
   原理：给center添加一个容器元素container，设置center的margin值避开侧边栏，让left、right飘在两边

优点: 主要内容模块可以优先加载，当页面中内容较多时不会影响用户体验。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三栏布局——双飞翼</title>
    <style>
        .container {
            float: left;
            width: 100%;
        }

        .center {
            margin-left: 100px;
            margin-right: 100px;
            height: 100px;
        }

        .right {
            float: left;
            margin-left: -100px;
            /*自身宽度*/
            width: 100px;
            height: 100px;
        }

        .left {
            float: left;
            margin-left: -100%;
            /*基于父元素百分比的外边距*/
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center" style="background-color:red"></div>
    </div>
    <div class="left" style="background-color:rgb(6, 235, 44)"></div>
    <div class="right" style="background-color:rgb(9, 134, 236)"></div>
</body>

</html>

4. 圣杯布局
   和与双飞翼布局的区别: 与双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三栏布局——双飞翼</title>
    <style>
        .container {
            margin-left: 100px;
            margin-right: 100px;
        }

        .center {
            float: left;
            width: 100%;
            height: 100px;
        }

        .left {
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
            width: 100px;
            height: 100px;
        }

        .right {
            float: left;
            margin-left: -100px;
            position: relative;
            right: -100px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center" style="background-color:rgb(9, 134, 236)"></div>
        <div class="left" style="background-color:red"></div>
        <div class="right" style="background-color:rgb(6, 235, 44)"></div>
    </div>
</body>

</html>

5. flex
   原理： 设置父元素 display:flex;再设置子元素的flex；

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性：

flex-grow：项目将相对于其他灵活的项目进行扩展的量
flex-shrink：规定项目将相对于其他灵活的项目进行收缩的量
flex-basis：项目的默认长度
优点：可以先写center，让他先加载，然后用order属性，把他排到中间的位置

.container{
    display:flex;
    width:100%;
    height:100px;
}
.left{
    flex:0 0 100px;
    order: 0 /*默认为0*/
}
.right{
    flex:0 0 100px;
    order:2
}
.center{
    flex:1 1 auto;
    order:1
}

<div class="container">
        <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="left" style="background-color:red"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>

6. table布局
   缺点：无法设置栏间距

.container{
    display:table;
    width:100%;
}
.left,.center,.right{
    display:table-cell;
}
.left{
    width:100px;
    height:100px;
}
.right{
    width: 100px;
    height:100px;
}

<div class="container">
    <div class="left" style="background-color:red"></div>
    <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div> 

7.绝对定位布局
优点: 简单实用，并且主要内容可以优先加载。

.container{
    position:relative;
}
.center{
    margin-left:100px;
    margin-right:100px;
    height:100px;
}
.left{
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
}
.right{
    position:absolute;
    right:0;
    top:0;
    width:100px;
    height:100px;
}

<div class="container">
    <div class="left" style="background-color:red"></div>
    <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div> 

8. 网格布局(Grid布局)
   grid-template-columns: 100px auto 100px;
   用于设置网格容器的列属性 其实就相当于列的宽度 当我们需要几列展示时
   就设置几个值 这个属性可以接收具体数值比如100px 也可以接收百分比值
   表示占据容器的宽度
   需要注意的是: 当给容器设定了宽度时
   grid-template-columns设定的百分比值是以容器的宽度值为基础计算的
   如果未设置宽度时 会一直向上追溯到设置了宽度的父容器 直到body元素。
   grid-template-rows: 100px;
   用于设置网格容器的行属性 其实就相当于行的高度
   其特性与grid-template-columns属性类似

.container{     
    display: grid;            
    grid-template-columns: 100px auto 100px;                     
    grid-template-rows: 100px;                
    }    

     <div class="container">
    <div class="left" style="background-color:red"></div>
    <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>