Html和CSS总结
1、HTML介绍
超文本标记语言
后缀 .html 或者 .htm
作用：写网页结构内容
2、DOCTYPE的作用
文档类型声明
告诉浏览器按当前标准解析代码
HTML4.01 过渡 框架 严格
XHTML：严格的HTML
3、标签、标记
双标记 封闭类型标记
h1-h6,p,div,span,a,b,i,u,del,s,sup,sub,em,strong,ul,ol,li,dl,dt,dd,table,tr,td,th,form,button,header,nav,footer,section,aside,article,video,audio…
单标记 非封闭类型标记 空标记
br,hr,img,input,link,meta,source…
4、元素
块级元素和行内元素的区别：
1）块级元素独占一行，行内元素在同一行显示
2）块级元素默认宽度为100%，行内元素默认宽度由内容撑开
3）块级元素可以设置宽高，行内元素设置宽高不生效
4）块级元素可以margin和padding的四周，行内元素只能设置margin和padding的左右
5）布局时，块级元素可以包含块级元素和行内元素，行内元素一般不要包含块级元素
6）块级元素默认display:block;行内元素默认display:inline;
7）块级元素
div,hn,p,ul,ol,li,dl,dt,dd,table,tr,td,th,form,header,nav,footer,section,aside,article…
8）行内元素
a,span,img,video,audio,b,i,u,s,del,sup,sub,em,strong,input,button…
5、表单
1）作用
提交数据，使页面具有交互性
2）标签
get和post的区别：
①get提交数据不安全，post安全
②get提交数据大小有限制，post理论上没有限制
3）表单元素
4）属性
value 当前值
name 名称
checked 默认被选中，配合单选按钮和多选按钮使用
selected 默认显示，配合option使用
readonly 只读
disabled 禁用
5）HTML5新增type类型（了解）
6）属性
placeholder="" 默认提示
required 必填项
autofocus 自动获取焦点
multiple 可以输入多个，用逗号隔开，一般配合邮箱和网址使用
min和max 最小值和最大值，配合数字和范围使用
minlength和maxlength 最小长度和最大长度
6、HTML5新增语义化布局标签
7、视频和音频
1）视频
<video src="">
<video src="路径" autoplay loop controls muted width="" height="" poster="">
您的浏览器不支持视频
video>
2）音频
<audio src="路径" autoplay loop controls muted>
您的浏览器不支持音频
audio>
3）资源
<video autoplay>
<source src="1.mp4"/>
<source src="1.ogg"/>
<source src="1.webM"/>
您的浏览器不支持视频
video>
8、语义化
正确的标签干正确的事情，看到标签知道表示的意义
优点：
1）有利于搜索引擎取收录
2）有利于屏幕阅读者去读取
3）有利于开发与维护
1、css介绍
层叠样式表 级联样式表 简称样式表
文件后缀 .css
作用：实现了内容与表现的分离，提高了代码的可重用性和可维护性
2、引入css的方式
1）行内样式 内联样式 只对当前元素生效
<div style="css样式">div>
2）内部样式 只对当前页面生效
<head>
<style>
选择器{
属性:属性值;
}
style>
head>
3）外部样式 实现了内容与表现的分离，提高了代码的可重用性和可维护性
<head>
<link rel="stylesheet" href=""/>
head>
4）导入式
<head>
<style>
@import "";
style>
head>
@import和link的区别：
①@import先加载HTML文件，再加载css文件，link是同时加载HTML和css文件
②@import只能引入css文件，link还可以引入其他内容
③@import有兼容性，link没有兼容性
④JavaScript操作DOM时，只能操作link引入的css文件
⑤@import会增加页面http请求
3、选择器
1）基础选择器
1、全局选择器
*{}
选中页面所有元素
2、元素选择器
div{}
a{}
img{}
选中所有指定的元素
3、类选择器
.className{}
类名可以重复，一个class可以起多个名字，用空格隔开
4、ID选择器
#IdName{}
ID名字唯一
优先级：行内样式 >ID选择器>类选择器>元素选择器>全局选择器
权重： 1000 100 10 1
5、合并选择器
选择器1,选择器2,…{}
2）关系选择器
1、后代选择器
选择器1 选择器2{}
选中所有后代
2、子代选择器
选择器1>选择器2{}
选中所有直接子代
3、相邻兄弟选择器
选择器1+选择器2{}
平级 挨着 后面的一个兄弟
4、通用兄弟选择器
选择器1~选择器2{}
平级 后面 的所有兄弟
3）伪类选择器
:link 点击之前
:visited 点击之后
:hover 鼠标悬停
:active 鼠标按下
先爱后恨的顺序
:fist-child 第一个子元素是…
:last-child 最后一个子元素是…
:nth-child(number|even|odd|倍数) 第几个子元素是…
:only-child 唯一一个子元素是…
:empty 空的子元素是…
:not(选择器) 否定
表单：
:focus 获取焦点
:checked 被选中时
4）伪元素选择器
:before|::before{
content:"";l
}
:after|::after{
content:"";
}
5）属性选择器（了解）
[属性]
[属性=属性值]
元素[属性 = “属性值”]
元素[属性 ^= “值”] 以什么开头
元素[属性 &= “值”] 以什么结尾
元素[属性 *= “值”] 包含
4、背景属性
1）背景颜色
background-color: transparent;
2）背景图片
background-image: url("");
3）背景图片是否平铺
background-repeat: no-repeat;
4）背景图片的大小
baseline-shift: x y;
5）背景图片定位
background-position: x y;
6）背景图片固定
background-attachment: fixed;
7）简写
background: ;
5、雪碧图
1）原理
background: url("") no-repeat;
background-position: ;
2）优点
1、减少页面的http请求
2、减少图片的字节数
3、减少命名的困扰
6、字体
1）字体颜色
color: ;
2）字体是否加粗
font-weight: 100-900|normal|bold;
3）字体大小
font-size: 16px;
4）字体样式
font-style: normal|italic;
5）字体
font-family: ;
7、文本属性
1）元素内容的水平对齐方式
text-align:left|center|right;
2）文本装饰
text-decoration:underline|none;
3）英文字母大小写转换
text-transform:uppercase|lowercase|capitalize;
4）首行缩进
text-indent:;
单位：
px 绝对单位
em 相对单位 相对当前字体大小 默认 1em = 16px
8、列表属性
1）设置项目符号
list-style-type:none ;
2）设置项目符号为图片
list-style-image:url() ;
3)设置项目符号位置
list-style-position:outside| inside;
4）简写
list-style: ;
9、表格属性
1）设置边框
border:1px solid red;
2）设置边框折叠
border-collapse:collapse;
3）设置内容距边框的距离
padding:;
4）设置表格的大小
width:;
height:;
5）表格水平居中
margin:0 auto;
6）表格内容水平对齐
text-align:left|center|right;
7）表格内容垂直对齐
vertical-align:middle|top|bottom;
8）表格的背景颜色
background-color:;
9）表格的背景图片
background-image:url();
10、内容溢出
overflow:hidden(溢出部分隐藏)|auto|scroll;
11、一行文字溢出省略号显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
12、盒模型
1）标准盒模型 w3c盒模型
1、组成部分
content+padding+border+margin
2、实际宽度
width+padding+border+margin
3、content 内容区域
width:; 元素的宽度 px %（相对于父元素）
height:; 元素的高度 px %（相对于父元素）
min-width:; 最小宽度
max-width:; 最大宽度
min-height:; 最小高度
max-height:; 最大高度
默认情况下，块级元素宽度为100%，行内元素宽度由内容撑开
默认高度都由内容撑开
块级元素可以设置宽高，行内元素设置宽高不生效
4、border 边框
border-style:solid（实线）|dashed（虚线）|dotted（点线）|double（双实线,要求边框至少为3px）|none（不显示）; 必须属性 默认边框为黑色 3px
border-color:; 边框的颜色
border-width:; 边框的宽度
简写：border:边框的宽度 边框的样式 边框的颜色; 设置四周的边框
例子：border:1px solid red;
单边的边框：
border-top:1px solid red;
border-top-width:;
border-top-style:;
border-top-color:;
border-bottom:1px solid red;
border-bottom-width:;
border-bottom-style:;
border-bottom-color:;
border-left:1px solid red;
border-left-width:;
border-left-style:;
border-left-color:;
border-right:1px solid red;
border-right-width:;
border-right-style:;
border-right-color:;
5、padding 内边距 不能去负值和auto
设置内容与边框的距离
padding:value; 四周
padding:value value; 上下 左右
padding:value value value; 上 左右 下
padding:value value value value; 上 右 下 左
padding-top:;
padding-bottom:;
padding-left:;
padding-right:;
注意：padding会撑大容器
6、margin 外边距 可以取正负和auto
设置元素之间的距离
margin:value; 四周
margin:value value; 上下 左右
margin:value value value; 上 左右 下
margin:value value value value; 上 右 下 左
margin-top:;
margin-bottom:;
margin-left:;
margin-right:;
注意：
1）块级元素水平居中
div{
width:;
margin:0 auto;
}
2）垂直方向上外边距合并问题
当垂直方向上外边距相撞时，取较大值
浮动元素不合并
3）margin-top问题
第一个块级子元素设置margin-top，父元素会一起下来
解决：
1、父元素加overflow:hidden;
2、父元素或者子元素浮动
3、父元素加border:1px solid transparent;
4、父元素加padding-top:1px;
2）怪异盒模型 IE盒模型
1、组成部分
content+padding+border+margin
2、实际宽度
width+margin
width包含了padding和border
3、盒模型相互转换
box-sizing:content-box; 默认值，标准盒模型
box-sizing:border-box; 怪异盒模型
3）弹性盒模型 伸缩盒模型 flexbox
1）父元素上的属性
①开启弹性盒模型
display:flex;
子元素默认水平排列
②设置弹性盒的方向
flex-direction:;
row:默认值 子元素水平排列
column：子元素垂直排列
row-reverse:子元素水平方向倒序排列
column-reverse：子元素垂直方向上倒序排列
③设置子元素在主轴的对齐方式
默认，x轴为主轴，y轴为侧轴
当flex-direction:column;，y轴为主轴，x轴为侧周
justify-content:;
flex-start:默认值 弹性盒的开始
flex-end：弹性盒的结束
center：居中
space-between：子元素之间平均分配父元素剩余的距离
space-around:子元素分配父元素剩余的距离，两端是中间的一半
④设置子元素在侧轴的对齐方式
align-items:;
flex-start:默认值 弹性盒的开始
flex-end：弹性盒的结束
center：居中
2）子元素上的属性
flex-grow:number;
设置子元素宽度之间的比例（分配父元素剩下的距离）
9、定位
1）普通流定位
2）浮动定位
3）相对定位
4）绝对定位
5）固定定位
10、浮动
1）原理
浮动后排除普通文档流之外，
浮动后在页面不占据位置，
浮动是碰到父元素的边框或者浮动元素的边框就会停止，
浮动不会重叠，
浮动只有左右浮动，
浮动后所有元素转换为块级元素
2）语法
float:left|right|none;
3）清除浮动的影响
1、浮动元素的父元素加overflow:hidden;
2、浮动元素的父元素设置高度
3、受影响的元素加clear:both;
4、空div法
浮动元素后面加空div
给空div clear:both;
5、伪对象法
浮动元素的父元素::after{
content:"";
display:block;
clear:both;
}
11、元素定位 position
1）静态定位 static 默认值
2）相对定位 relative
相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动
应用场景：
自己小范围移动或者配合绝对定位使用
3）绝对定位 absolute
相对于已经定位的父元素定位，
如果父元素没有定位，逐级往上找，最后相对于body定位
定位后原位置不保留
定位后原位置保留
配合left、right、top、bottom移动
应用场景：
形成独立的一层
4）固定定位 fixed
相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动
应用场景：
固定在页面某个位置
5）z-index:;
取值越大，层级越往上
可以取负值，不推荐
必须配合定位使用
12、居中问题
1）元素内容水平居中
text-align:center;
2）块级元素水平居中
margin:0 auto;
3）一行文字垂直居中
行高等于高
4）多行内容垂直居中
padding:20px 0;
5）子元素在父元素中水平垂直居中
<div class="parent">
<div class="child">div>
div>
1、弹性盒法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-color: green;
}
style>
2、margin计算法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
overflow: hidden;
}
.child{
width: 200px;
height: 200px;
background-color: green;
margin-top: 150px;
margin-left: 150px;
}
style>
3、padding计算
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
padding-top: 150px;
padding-left: 150px;
box-sizing: border-box;
}
.child{
width: 200px;
height: 200px;
background-color: green;
}
style>
4、margin
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
overflow: hidden;
}
.child{
width: 200px;
height: 200px;
background-color: green;
margin: 150px auto;
}
style>
5、绝对定位计算法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 150px;
left: 150px;
}
style>
6、绝对定位
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
style>
7、translate
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
style>
13、三栏布局
<div class="box">
<div class="left">div>
<div class="center">div>
<div class="right">div>
div>
1）弹性盒
<style>
.box{
display: flex;
}
.left{
width: 200px;
height: 200px;
background-color: palegreen;
}
.right{
width: 200px;
height: 200px;
background-color: palegoldenrod;
}
.center{
height: 200px;
background-color: paleturquoise;
flex-grow: 1;
}
style>
2）绝对定位
<style>
.box{
position: relative;
}
.left{
width: 200px;
height: 200px;
background-color: palegreen;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 200px;
background-color: palegoldenrod;
position: absolute;
top: 0;
right: 0;
}
.center{
height: 200px;
background-color: paleturquoise;
margin-left: 200px;
margin-right: 200px;
}
style>
3）浮动
<div class="box">
<div class="left">div>
<div class="right">div>
<div class="center">div>
div>
<style>
.box{
position: relative;
}
.left{
width: 200px;
height: 200px;
background-color: palegreen;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: right;
}
.center{
height: 200px;
background-color: paleturquoise;
}
style>
14、css3新特性
1）选择器（伪类选择器、伪对象选择器、属性选择器）
2）弹性盒
3）圆角
border-radius: ;
4）盒阴影
box-shadow: 水平方向偏移位置 垂直方向偏移位置 模糊度 扩展值 颜色 位置;
5）字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色 ;
6）背景渐变
①线性渐变
background: linear-gradient(to right,red,yellow,green);
②射线渐变
background: radial-gradient(top,circle,red,yellow,green);
7）转换 transform
1）作用
使元素在位置或者形状上发生一定的改变
2）属性
transform:translate() rotate() scale() skew();
3）属性值
①位移 单位px %
transform:translate(x,y);
当只取一个值，表示水平方向
当取两个值，表示水平和垂直方向
transform:translateX();
transform:translateY();
取正值，右下走
取负值，左上走
②旋转 单位deg（弧度）
transform:rotate();
取正值，顺时针旋转
取负值，逆时针旋转
注意：
a、默认旋转的中心点为宽高的一般
transform-origin:; 修改元素的中心点
b、旋转会旋转整个坐标轴，当位移和旋转同时存在，推荐位移写在旋转的前面
③缩放 取值为number 0-1 缩小 ， >1 放大 ， 默认为1
transform:scale(x,y);
当只取一个值，等比例缩放
当取两个值，表示水平方向和垂直方向
transform:scaleX();
transform:scaleY();
④倾斜 单位deg
transform:skew(xdeg,ydeg);
当只取一个值，表示水平方向
当取两个值，表示水平和垂直方向
注意：
倾斜的弧度不要是直角
transform:skewX();
transform:skewY();
8）过渡
①属性
transition:all 持续时间 速度变化类型 延迟时间;
②属性值
1、过渡的属性
取值为数值
取值为颜色
阴影
转换
背景渐变
简写all
2、持续时间 单位s|ms
3、速度变化类型
ease 默认值 先加速后减速
ease-in 加速
ease-out 减少
ease-in-out 先加速后减速
linear 匀速
4、延迟时间 s|ms
9）动画
①动画和过渡的区别
a、过渡只能制作简单的动画，动画可以制作复杂的动画
（过渡是从一个样式变化到另外一个样式，动画可以控制过程）
b、过渡必须有触发事件，动画可以没有
c、动画可以控制播放次数
②定义动画
@keyframes name{
0%|from{
cs样式
}
任意百分比{
css样式
}
100%|to{
css样式
}
}
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
@-ms-keyframes
③调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数（numbeinfinite） 播放方向（alternate） 动画停在最后一帧（forwards）;
animation: name duration timing-function delay iteration-coundirection fill-mode;
④动画的属性（了解）
animation-name: ; 动画的名称 必选
animation-duration: 0s|0ms; 必选
animation-timing-function:ease|ease-in|ease-out|ease-in-out|linear ; 可选
animation-delay:0s|0ms ; 可选 可以取负值
animation-iteration-count:number|infinite(无限播放) ; 可选
animation-direction: alternate(偶数次倒着播放); 可选
animation-fill-mode: forwards(动画停在最后一帧); 可选
animation-play-state: running（默认值）|paused（暂停）; 动画的播放状态
10）媒体查询
①作用
实现响应式布局
响应式布局：写一次样式适用所有的终端
②viewport 视口
为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。
③语法
宽度>=992 pc端
宽度<992并且宽度>=768 ipad端
宽度<768 移动端
内联：（写在统一css文件内）
@media screen and (max-width:768px){
移动端的样式
}
@media screen and (min-width:768px) and (max-width:992px){
iPad端的样式
}
@media screen and (min-width:992px){
pc端的样式
}
外部：（写在不同的css文件内）
<link rel="stylesheet" href="" media="only screen and (max-width:768px)">
<link rel="stylesheet" href="" media="only screen and (min-width:768px) and (max-width:992px)">
<link rel="stylesheet" href="" media="only screen and (min-width:992px)">
11）厂商前缀
浏览器对css3新特性的支持
浏览器 厂商前缀 内核
谷歌 -webkit- blink
苹果 -webkit- webkit
火狐 -moz- gecko
欧朋 -o- blink
IE -ms- trident
12）css hack
解决IE6 7 8
①条件注释
②属性前缀和后缀
前缀 + - _ * #
后缀 \0 \9 \9\0 !important
13）多列
把一个元素内的文本分成多列
column-count:number; 设置列的数量
column-gap:; 设置列之间的距离
column-rule:; 设置列之间的边框