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-play-state: running（默认值）|paused（暂停）; 动画的播放状态

10）媒体查询
①作用
实现响应式布局
响应式布局：写一次样式适用所有的终端

②viewport 视口
为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

禁用其缩放（zooming）功能：

③语法
宽度>=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-                  blinkIE                 -ms-                 trident

12）css hack
解决IE6 7 8
①条件注释