您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
好程序员 HTML5 培训教程 -html 和 css 的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！
布局步骤
第一步：
清除默认样式
第二步：
划分模块
第三步：
设置模块的大小以及位置
第四步：
划分下一级模块
html
和
css
引入网页头像
<link rel="shortcut icon" href="img/...ico">
css
样式表的引入方式
css
样式表的引入方式
1
、外链式
<link href = "" rel = "stylesheet" >
2 、嵌入式
<style></style>
3 、行内样式
<div style = "width:200px;height:200pxs;" ></div>
文件命名以及变量命名
命名规范
1
、严格区分大小写
2
、可以采用字母数字下划线
$,
数字不开头
3
、命名语义化
4
、可以采用驼峰命名法
清除默认样式
清楚边距
*{
margin : ;
padding : ;
list-style : none;
}
a 标签清楚下划线和颜色
a {
color : black;
text-decoration : none;
}
css 中颜色的表示方式
css
中颜色的表示方式：
1.
预定义的颜色【关键字颜色】
red pink blue yellow
2.#6
位数的色值
#00-00-00
红绿蓝
3.rgb
（红，绿，蓝）
：
rgb([0-255],[0-255],[0-255])
4.rgba
（
red
，
green
，
blue
，透明度）
：
rgba([0-255],[0-255],[0-255]
，
[0-1])
0-1: 0 全透明， 1 不透明
html
中的标签和属性
html
：
标签：
按照语法分类：
1. 单标签：只有开始标签
meta img a
2. 双标签：有开始标签和结束标签
<html> </html>
3. 属性的语法
语法：
属性名 = " 属性值 "
属性名 = " 属性值 1 属性值 2"
注意 :
1 、标签名和属性名之间要有空格
2 、多个属性之间要有空格
3 、多个属性值之间要有空格
4. 开始标签 标签名后有空格
按照标签在页面中的呈现效果分类：
1 、行内元素
行内元素定义 : 在一行内显示，只能设置左右间距，不可以设置上下间距。
举例： span del i em b strong a(title= " 鼠标移入时显示的文字 " ;target= " " ( 新窗口打开的位置 _self: 在本窗口打开 ;_blank: 在新窗口打开 ) ...
2 、块元素
块元素定义：可以设置宽高，独占一行。
举例： div 标题标签 列表标签 段落标签 ...
3 、行内块元素
行内块元素定义：可以设置宽高，在一行显示。
举例： img 【 title= " 鼠标移入时显示的文字 " 】 表单控件
元素的转换
块元素： display: block;
行内块元素： display: inline-block;
行内元素： display: inline;
元素的级别
块元素 > 行内块元素 > 行内元素
元素嵌套规范
1 、同一级别可以相互嵌套
2 、级别高的元素可以嵌套级别低的元素
3 、段落标签只能嵌套行内元素
4 、 a 标签不可以嵌套 a 标签； p 不能嵌套 p
盒子模型及其问题
四部构成：
1 、 margin 外间距 盒子与盒子之间的距离
2 、 border 边框
3 、 padding 内填充（内间距） 边框与内容之间的距离。
4 、 content 内容
margin-top margin-right margin-bottom margin-left
margin: 50px; 上 右 下 左
margin: 50px 100px; 上下 左右
margin: 0 auto; auto 自动
margin: 50px 100px 150px; 上 左右 下
margin: 50px 100px 150px 200px; 上 右 下 左
border: 1px solid red;
border-top \ border-right \border-bottom \ border-left
border-top-width ：上边框的宽度
padding:
设置方法同
margin
content: ;
width : 数值 百分比 auto
height: 数值 百分比 auto
盒子模型的问题：
1. 大部分元素的 margin 和 padding 默认为 ，但有一部分的 margin 和 padding 不为 ，例如 body 标题标签（ h2-h7 ）（ ul ol il 等列表标签） 段落标签
2. 想领的两个块元素的 margin 会重合，值会取最大值
3.margin 可以为 [ 负数 ] ， padding 不可以设置 [ 负数 ] 。
4. 行内元素 margin 只有左右，没有上下
5. 如果（ 1 ）发生嵌套关系的元素，（ 2 ）父元素没有上边框，（ 3 ）上 padding ，（ 4 ）父元素与子元素之间没有别的内容，此时子元素 margin-top 就会作用到父元素身上
margin-top 的解决方式：
1. 用父元素的 padding-top 代替子元素的 margin-top ；
2. 给父元素添加 overflow ： hidden ；
宽高的设置和计算
height
：
auto /
百分比
/ px
；
width
：
auto /
百分比
/ px
；
height
：
auto
；
参照与父元素
width
：
auto
；参照与内容
box-sizing
：
border-box
；
将边框算入盒子内；
一个元素实际的宽高
实际宽度
= border-left + padding-left + width +paddint-right + border-right;
实际高度
= border-top + padding-top + height + padding-bottom + border-bottom;
浮动
作用：让块元素横排排列
样式：
float
：
left
；从左往右排列
float ： right ；从右往左排列
原理：让元素脱离文档流，让元素从文档层浮动到浮动层。
引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）
* 解决方式一：给父元素添加 overflow ： hidden ；（超出部分隐藏）
* 解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。
clear ： right/left/both ； 别的浮动对它的影响清除掉
例：
.box ： after{
content: "";
display: block;
width: 0;
height: 0;
clear: both;
}
* 解决方式三：父元素能设置高度的尽量设置高度
浮动之后的块元素参照内容：属性值
auto
定位
定位的元素脱离文档层，到达定位层
定位的元素会多出
5
个样式：
top right bottom left z-index ： 999
上 右 下 左 层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】
层级：
z-index
：整数；
定位的几种方式：
1.
相对定位：
相对于自身来定位，在文档层中保留原来的位置
用法：
position ： relative ；
2. 绝对定位：
相对于最近的 定位的 祖先元素 来定位，完全脱离文档流（其他顶替其位置）
用法：
position ： absolute ；
+ 方向值
3. 固定定位：
相对于浏览器的四条边，完全脱离文档流
用法：
position ： fixed ；
top 与 bottom 同时定义，那个样式会作用到元素身上的判断关系：
top 的权重比 bottom 的权重大
left 的权重比 right 的权重大
元素作用时：
1. 如果是
position ： relative ；
left ：；
margin ：；
先作用 margin ，在作用 relative ；
2. 如果是
position ： absolute ；
left ：；
margin ：；
先作用 absolute ，在作用 margin ；
定位元素的居中方式：
方法一：
1 . 水平居中：
position ： absolute ；
left ： 50 % ；
margin- left ： - 自身长度的一半；
2 . 垂直居中：
position ： absolute ；
top ： 50 % ；
margin-top ： - 自身长度的一半；
3 . 绝对居中：
position ： absolute ；
left ： 50 % ；
top ： 50 % ；
margin- left ： - 自身长度的一半；
margin-top ： - 自身长度的一半；
方法二：
1 . 水平居中：
position ： absolute ；
left ： ；
right ：
2D 和 3D
2D
和
3D
属性：
1.
平移样式
transform :translate(x, y ); 向上为负， 向下为正
transform :translateX(100px);
transform ： rotate （ 180 deg ） ； （ 1 turn ）转一圈
平移 transform :translate （） 例子： translate （ x ， y ） translateX （）
旋转 transform :rotate （） 例子 rotate （ 180 deg ）顺时针 -180deg 逆时针
transform ： rotate （）空格 translate （）；
transform-origin :px px ; 变换的中心点；
left center ；
缩放 transform :scale （） 例子： scale （ 2 ） 放大为原来的 2 倍 scale （ 0.n ）缩小为原 来的 0.n scale （ m ， n ） x 轴 m ， y 轴 n
斜切 transform :skew （） 例子： skew （ 45 peg ） 左拉伸 45° skew （ 45 peg ， m ）
全部 时间
3. 过渡的属性样式： transition-property: ， ;
可以为：属性的全部样式
4.
过度的总时间：
transition-duration
：；
5.
过渡的时间函数：
transition-timing-function
：；
linear （匀速） ease （开头结尾慢，中间快）
cubic-bezier （ 1 ， 0.07 ， 0.54 ， 0.21 ） 贝塞尔曲线
6.
延迟
transition-delay
：；
3d
效果：和
2d
的一样
transition
，
transform
；
prespective ：给父元素加 prespective （灭点的值）
prespective-origin ： x y ；灭点的位置 调整观察的角度（大多数情况不设置）
transform ： ratate3d （ 0-1 的值 , 0-1 的值 , 0-1 的值 , 45 deg ）
transform ： ratateY （ 45 deg ）
transform ： translate3d （ 0-1 ， 0-1 ， px ）
父元素：
transform-style
：
preserve-3d
；
动画
动画规则：
@ keyframes 动画名（随便给） {
（动画规则）
from {}
to {}
}
@ keyframes 动画名（随便给） {
（动画规则）
0%{}
50%{}
100%{}
}
@ keyframes animation1{
from {
background-color :red;
}
to {
background-color :blue;
}
}
挂载动画
:
将动画加到元素身上
. 元素 {
animation ： animation1 时间 步数 时间函数 延迟时间 次数 ；
}
挂载多个动画：
. 元素 {
animation ： animation1 时间 ,animation2 时间 ,animation1 时间；
其他动画的相同的可以附件通过 animation 属性；
}
animation
的样式
动画名：
animation-name
时间：
animation-duration
步数：
animation-steps
：
8
；
时间函数：
animation-timing-function
延迟：
animation-delay
动画次数：
animation-iteration-count
：
infinite
（无限次）
/2
；
指定下一次动画是否逆向：
animation-direction
：
alternate
（逆向）
/ normal
（常规）；
最后的状态：
animation-fill-mode
：
backwards
（默认（保持一开始的状态））
/forwards
（保持当前的状态）；
状态即指定动画是否运动：
animation-play-state: running
（运行）
/paused
（静止）
;
元素分类
按照在页面中的呈现效果：
1.
行内元素：在一行内显示
，不可以设置宽高
：（存放文字）
span a b i strong del
2. 行内块元素：在一行内显示，可以设置宽高：（有缝隙 不常用）
img 表单控件
3. 块元素 ：可以设置宽高，独占一行
div 标题标签（ h2-h7 ） 列表标签（ ul-li ol-li dl>dt+dd 段落标签 （ p pre ））
元素嵌套规范：
1. 同一级别可以相互嵌套
2. 级别高的可以嵌套级别低的元素
3.p 标签只能嵌套行内元素
4.a 链接不能相互嵌套
元素的转换：
1. 块元素： display ： block ；
2. 行内块元素： display ： inline -block ；
3. 行内元素： display ： inline ；
背景图片以及浏览器内核
背景图
先设大小，在引 background ；
background: url( ' 路径 ' ) no-repeat left bottom/contain ；
// 图片位置 禁止重复 位置（ top bottom left right ）
4. background- repeat ： no- repeat ， repeat ；（无重复）
5. background- repeat ： repeat -x （ x 方向重复）
background- repeat ： repeat -y （ y 方向重复）
background-position ： x y ；（数值 方位值（ top/bottom left / right center （可以省略）） ）
8. padding- box ；（默认）从 padding 位置开始渲染
9. border- box ；从边框的位置开始渲染
content- box ；从内容的位置开始渲染
11. padding- box ；（默认）从 padding 位置结束渲染
12. border- box ；从边框的位置结束渲染
content- box ；从内容的位置结束渲染
8. 可以简写：
background ：空格隔开；
// 渐变开始的方向（默认 top ） 类似 25deg （ 25 度）
10. 浏览器内核 // 背景色渐变
1. /* 标准语法 */
例子： background : linear-gradient ( top , #3bbcff , #47eaff );
2. /* 谷歌内核 -webkit- */
例子： background : -webkit-linear-gradient ( top , #3bbcff , #47eaff );
3. /* 火狐内核 -moz- */
例子： background : -moz-linear-gradient ( top , #3bbcff , #47eaff );
4. /* 欧鹏内核 -o- */
例子： background : -o-linear-gradient ( top , #3bbcff , #47eaff );
5. /* IE 内核 -ms- */
例子： background : -ms-linear-gradient ( top , #3bbcff , #47eaff );
文件的读取方法路径
绝对路径：从盘符开始的一条完整路径
相对路径：两个文件的位置关系
边框的相关属性【圆角，边框形状】
border-radius
：边框的半径
设置圆角
n%
或者
num
像素
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
透明度
透明性的选择：（整个容器都变）
opacity
：；
0-1
之间的值；
字体
font-family =“
字体
” //
字体样式可以被继承
鼠标移入样式
span
标签
cursor
：
pointer
；
鼠标样式：手型
阴影
box-shadow
：
x
轴偏移量
y
轴偏移量
阴影的模糊程度
阴影的大小（
和本身一样大小）
阴影的颜色；
引入字符图标
引入字符图标：
行内元素
随意
span class=“iconfont
图标类名
”
可调节样式：
同文字
文档流
文档流：
标准情况下 ，页面元素从左往右 从上往下 依次排列
flex 布局 ( 规范的设计稿 )- 弹性布局
容器（父元素）的属性：【 display:flex; 】
*flex-direction: 决定主轴方向。
row 主轴在水平方向，从左向右（默认）。
row- reverse 主轴在水平方向，从右向左
column 主轴在垂直方向，从上到下
column- reverse 主轴在垂直方向，从下到上
*flex- wrap : 决定项目换行
wrap : 项目换行
nowrap: 项目不换行（默认值）
wrap - reverse ： 项目换行且反转
*justify-content: 决定项目在主轴的对齐方式
flex-start; 主轴的起点
flex- end ; 主轴的终点
center; 主轴的中心
space-between; 两端对齐
space-around; 项目两侧距离相等
*align-items ：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）
flex-start: 交叉轴的起点
flex- end ：交叉轴的终点
Center ：交叉轴的中心
baseline ： 基线对齐（文本底部）
*align-content: 定义项目在交叉轴上的对齐方式（仅适用于多根轴线）
flex-start; 交叉轴的起点
flex- end ; 交叉轴的终点
center; 交叉轴的中心
space-between; 两端对齐
space-around; 两侧距离相等
子元素（项目）的属性：
*order ：定义项目的排列顺序，数值越小，越靠前，默认值为 （可以取负值）。
*flex- grow: 定义项目的放大比例。默认值为 ，即使存在剩余空间，也不放大。
*flex-shrik ：定义项目的缩小比例，默认值为 1 ，空间不足，项目缩小 ; 值为 时 , 空间不足 , 项目也不缩小 .
*flex- basis: 定义项目占据的主轴空间 . 默认 auto 或者自己添加像素 ;
*align- self: 定义单个项目在交叉轴的对齐方式 .
flex- start: 交叉轴的起点
flex-end ：交叉轴的终点
Center ：交叉轴的中心
滚动条
overflow-x ： auto ；超出部分在 x 轴的表现形式。
auto ：自动；（如果超出，就自动以滚动条的形式显示）
去滚动条： 加在具有 overflow 属性的元素身上
::-webkit-scrollbar {
height ： ；
}
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值
描述
测试
visible
不裁剪内容，可能会显示在内容框之外。
测试
hidden
裁剪内容
-
不提供滚动机制。
测试
scroll
裁剪内容
-
提供滚动机制。
测试
auto
如果溢出框，则应该提供滚动机制。
测试
no-display
如果内容不适合内容框，则删除整个框。
测试
no-content
如果内容不适合内容框，则隐藏整个内容。
测试
轮播图
swiper(.js).com
表格
[ 行 ] [ 列 ]
|
|
table
身上的属性
table 身上的属性：
border ：表格边框 cellspacing ：单元格间的间距
cellpadding ：单元格的内容与其边框的内边距
bgcolor ：表格的背景颜色 background ：表格的背景图片
width ：表格宽度 height ：表格高度
border-collaspe ： collaspe ：边框合并，不叠加 cellspacing ： ：边框合并，但合并之后的边框宽度等于 前两个边框宽度之和
caption ：表格标题
background: 表格背景图
cellspacing: 单元格之间的间隙宽度
align: 表格的水平对齐方式，通常是 left ， center ， right
表格的标题
<caption align="
水平对齐方式
" valign="
标题与表格的相对位置
"></caption>
单元格【
tr
】【
td
】
width
：单元格宽度
height
：单元格高度
align
：单元格内文本的对齐方式
,
通常是左，中，右
left
，
center
，
right
valign
：单元格内文本的对齐方式
,
通常是上，中，下
top
，
middle
，
bottom
nowrap
：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行
<tr align = "center" valign = "bottom" >
<td align = "center" nowrap > 手机空中免费充值 </td>
<td width = "100px" > IP 卡 </td>
<td width = "100px" bgcolor = "#006400" valign = "top" > 网游 </td>
</tr>
表格的跨行与跨列【 td 】
rowspan
：跨行标签，表示跨了多少行
colspan
：跨列标签，表示跨了多少列
|
|
|
|
|
|
|
|||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
表格标签拓展及其属性
thead ：定义表格的表头。
tbody ：定义表格主体（正文）。
tfoot ：定义表格的页脚（脚注或表注）。
colgroup ：标签用于对表格中的列进行组合，以便对其进行格式化。
注意：不管 thead 、 tbody 、 tfoot 的代码先后顺序如何， html 显示时，始终是先显示 thead ，再显示 tbody ，最后显示 tfoot 。
1
、
<thead>
内部必须拥有
<tr>
标签！
2
、
<tfoot>
元素内部必须包含一个或者多个
<tr>
标签。
3
、
<tbody>
元素内部必须包含一个或者多个
<tr>
标签。
4
、必须在
table
元素内部使用这些标签。
5
、当不同行间的单元格合并时各单元格所在的行不要加
tbody
标签。
标题栏
《 tr 》 <th></th> 《 /tr 》 用法和 td 相似 知识自动将单元格内容以粗体显示
表单控件表单标签
<form action=" " method=" ">
action: 表单信息提交的位置；
method ：提交的方式
get ：地址栏，信息量少，安全性低
post ：信息量多，比较安全
1. 输入文本【输入框】：
用户名： <input type = "text" placeholder= " 请输入用户名 " maxlength= "10" value= " " name= "username" class = "" >
placeholder ：默认提示文本 ;
maxlength: 规定输入的最大字符数
name: 本文本框的名字，与后台进行数据交互用
class : 定义本文本框的样式，相当于盒子
placeholder 下的缩进
text-indent ： 2 em ；缩进
2. 输入密码【密码框】：
密码： <input type = "password" placeholder= " 请输入密码 " maxlength= "10" value= " " name= "psw" class = "" >
3. 单选按钮 [name 的值必须相同 ] ：
请选择你的性别：
<label for = "man" > [label 实现点什么就选中 ， for 中的值和 id 中的值相同 ]
男： <input type = "radio" name= "sex" id= "man" checked> //checked 默认选项
</label>
<label for = "woman" >
女： <input type = "radio" name= "sex" id= "woman" >
</label>
4. 多选按钮 [name 的值必须相同 ] ：
请选择你喜欢的音乐：
摇滚： <input type = "checkbox" checked>
摇滚： <input type = "checkbox" checked>
摇滚： <input type = "checkbox" checked>
5. 下拉列表【下拉框】：
选择你的学历：
<select name= "" id= "" >
<option value= "" > 学士 </option>
<option value= "" > 博士 </option>
<option value= "" > 硕士 </option>
</select>
6. 上传文件：
选择你的照片：
<input type = "file" >
7. 留言文本空间：
<textarea name= "" id= "" rows= "" col= "" >
</textarea>
8. 用户是否允许重新设置 textarea 大小 css 属性：
resize: none/both/vertical/horizontal; 不允许 / 上下允许拖动 / 只能在垂直方向拖动 / 只能在水平方向 拖动
9. 重置按钮：
<input type = "reset" >
10. 提交按钮：
<input type = "submit" >
11. 自定义按钮：
<input type = "button" value= " 按钮 " >
<button> 搜索 </button>
12. 颜色：
<input type = "color" >
13. 时间日期：
年月： <input type = "month" >
年周： <input type = "week" >
时分： <input type = "time" >
年月日： <input type = "date" >
年月时分： <input type = "datetime-local" >
14. 验证
<input type = "email" > 邮箱验证
<input type = "tel" autofocus> 电话
15. autofocus 自动获取焦点
</form>
文本模型
文本换行
使非中日韩文本换行
word-break: break-all ;
文本禁止换行
white-space:nowrap;
单行文本溢出部分以省略号显示
overflow: hidden;(
放文本的容器
)
text-overflow: ellipsis;
多行文本溢出
音频视频标签
音频标签
<audio src="" controls loop autoplay></audio>
controls 空间向用户显示：
loop 循环播放
autoplay 当前页面加载完自动播放
视频标签
<video src="" controls loop autoplay></video>
H5
语义化标签
<header>
头部
</header>
<nav>
导航
</nav>
<aside>
侧导航
<aside>
<section>
页面中的某一部分
</section>
<main>
主体
</main>
<footer>
底部
</footer>
meta
标记【签】
name="
关键字
" cantent="
内容
"
<mate http-equiv="Refresh" content="10";url="
跳转路径
"> //
每
10s
刷新一次并且跳转到跳转路径知识的文件
bgsound
标签
<bgsound src="
路径
" loop="
播放次数
">
body
属性
对文字操作的标签
列表标签
2. <li>
<li>
</ul>
4. <li>
<li>
</ol>
a 标签
<a href="
路径
" title="
鼠标移入时显示的文字
" target=" "(
新窗口打开的位置
_self:
在本窗口打开
;_blank:
在新窗口打开；
_parent:
在当前窗口的父窗口打开链接；
_top:
在整个浏览器窗口打开
) ...
[
字符实体
]
常用的转义字符
显示结果
描述
实体名称
空格
< 小于号
大于号
&
和号
"
引号
'
撇号
(IE
不支持
)
￠
分（
cent
）
£
镑（
pound
）
¥
元（
yen
）
€
欧元（
euro
）
§
小节
©
版权（
copyright
）
®
注册商标
™
商标
×
乘号
÷
除号
选择器
分类
css
选择器
1.
通用选择器：
* ｛｝ // 选择所有的标签
2. 群组选择器：
E1,E2,E3.. ｛｝ // 选择 E1 E2 E3
3. 标签选择器
标签名｛｝
4. 类名选择器：
. 类名｛｝
5. 后代选择器
.E1 .E2 ｛｝ // 选择 E1 的后代 E2
6. 交叉选择器
标签名 . 类名｛｝
7.id
选择器
例如
创建
id
<div id = “box” ></div>
#id 名｛｝ // 选择页面中 id 为 ** 的标签
8. 伪类选择器：
鼠标移入状态
E ： hover { } E 元素选择鼠标移入状态
E ： hover . 子类 { } 选择 e 元素下鼠标移入时子类的变化
获取焦点，用于表单的输入
E : focus {
outline : none;
}
9. 伪结构选择器：
E ： first-child ｛｝ 作为子元素的第一个孩子的 E 标签
E ： last-child ｛｝ 作为子元素的最后第一个孩子的 E 标签
E : nth-child(n){} // 作为子元素的第 n 个孩子的 E 标签
E : nth-last-child(n) 作为子元素的倒数第 n 个孩子的 E 标签
E ： first- of - type ｛｝ 作为子元素的同类型的第一元素
E ： last- of - type ｛｝ 作为子元素的同类型中的最后一个元素
E : nth- of - type （ n ） 作为子元素的同类型中的第 n 个元素
E : nth-last- of - type ( n ) 作为子元素的同类型中的倒数第 n 个元素
（ n ） n 可以以为 num/even （偶数） /odd( 奇数 )/ 3 n （ 3 的倍数）
例子： 5.15 / 伪结构选择器
10. 伪元素选择器：
::after{} 在元素之后加入一个
::before{
content ： “ 内容之前 ” ；
color ：；
} 在元素之前
属于行内元素
::after{} ::before{}
伪元素
content
：
""
；
样式必须写
11.
子类选择器
相邻兄弟选择器
E1+E2 ｛｝ 选择 E1 的下一个兄弟元素 E2 （不能选中上一个兄弟元素）
div .box>a+img a 和 img 统计
子类选择器
E1>E2{} 选择 E1 的子类元素 E2
例子： div .box> div .item{$}* 20
div .box>a>img
12. 属性选择器
[ 属性名 ]{} 选择所有拥有属性为 属性名 的元素
[ 属性名 =“value”] ｛｝ 选择拥有属性名的属性 且属性值为 value
E [ 属性名 =“value”]{} 选择拥有属性名的属性 且属性值为 value 的 E 元素
E [ 属性名 ~=“value”]{} 选择拥有属性名的属性 并且属性值一个或者多个，其中一个属性值为 value 的 E 元素
E [value^=“1”]{} 选择拥有 value 的属性 并且属性值一个或者多个，其中一个属性值以 1 开头的 E 元素
E [value$=“1”]{} 选择拥有 value 的属性 并且属性值一个或者多个，其中一个属性值以 1 结尾的 E 元素
E [value*=“1”]{} 选择拥有 value 的属性 并且属性值一个或者多个，其中一个属性值包含 1 的 E 元素
例子：属性选择器
选择器的优先级
宗旨：越具体的优先级越高
id (100 ) > class( 10 )>
标签名
( 1)
. box .son{ } 10 + 10 = 20
abcde 优先级（ e 为个位）：
a: 行内样式
b: id 选择器
c: 类名选择器 伪类选择器（： hover ） 属性选择器
d: 标签选择器 伪元素选择器 （：： after ）
e: 通用选择器有一个
选择有中有一个
abcde
在其位置
+1
移动端布局步骤
视口：视觉视口，布局视口，理想视口
em:
当前字体的倍率
100px=10em
rem
：
html
字体的倍率
移动端窗口 375 * 667
html{
font-size ： 0.5 rem ；
}
. box {
width ： 750 rem ； //375px=750rem*0.5px ； 100px=1rem
height ： 1334 rem ；
}
未完待续，感谢关注 好程序员 前端教程分享！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。