html+css重点内容

复习yuan
html
1.web组成 html-结构层 css-表现层 js-行为交互

2.html：标签 元素 标记
分类 ：单标签： <标签名：属性=“属性值” 属性=“属性值” > /加不加都可以
双标签 ：<标签名：属性=“属性值” ></标签名>
常用单标签： br hr img input
常用双标签： div p h6- h1 span a

3.元素类型：
display：inline{行内} 不能设置宽高 一行之内排列
display：block{块} 独占一行 可以设置宽高
display：inline-block{行内块} 可以设置宽高 独占一行 textarea{多行文本} input img
display-none 隐藏元素
如何将元素变成块元素
display：block
float：right/left
position：absolute/fixed
display：grid
display：flex

如何隐藏元素

display ：none 不占位置
height：0{overflow：hidden} 不占位置

opacity：0 占位置 透明度0 范围0-100
visibility：hidden 占位置
transform：scale{0} 占位置

opacity和rgba 透明度区别
rgba{255，0，0，1/0} rgba 背景透明

opcity 0 会将图片文字全部透明 {兼容性问题低版本ie}
4.盒模型

盒子：内容 内边距 边框 外边距
标准盒子：
盒子宽度：content+padding+border+margin
怪异盒子：改变了盒子计算方式
属性：box-sizing:border-box
盒子宽度：content{包含显示的宽 左右外边距 左右边框}+margin
内边距:padding 上 右 下 左
会撑大盒子 解决方法：怪异盒子 去掉padding
背景颜色会蔓延到padding上面
取值不可以为负数
边框：border
实现三角形
宽高设置0
boder：100px solid transparent
boder-方向此 100px solid color
外边距：margin
背景颜色不会蔓延到外边距上
取值可以为负数
特殊情况
兄弟关系中：
元素水平排列：外边距相加和的关系
元素水平排列：外边距取最大值
父子关系中：
子元素margin-top作用到父元素上面
解决方法：
1.父元素添加1像素透明边框
2.父元素添加padding-top
3.添加浮动
4.添加定位
5.父元素overflow：hidden{常用}

5.浮动
float：left/right/none
标准文档流：元素默认的排列方式
特点：1.脱离文档流 ，不占位置， 不浮动元素自动补位
2.自动换行，换行位置取决于倒数第二个浮动元素的高度和剩余宽度

父元素高度塌陷{父元素没有固定高，子元素浮动，父元素高度有变化}
解决方法：1.父元素固定高度
2.清除浮动 clear：both{前提两个子元素}
3.添加清除浮动元素 div{可以设置宽高}
4. 父元素overflow：hidden
5. 万能清除法
.claerfix：after{

content：“”
display：block
cleaer:both

}

***6.溢出
单行文本省略号
p{
固定宽
white-spance：nowrap
overfolw：hidden
text-overflow：ellipses
}

7.定位
position：
static
relative--参照物元素本身位置
absolute--参照物1.为有父元素且父元素有定位
2. 没有父元素参照物浏览器窗口的第一屏
{位置微调}
fixed-----参照物浏览器从窗口-左上角 固定在浏览器某一位置
sticky----参照物：离他最近带有滚动条的区域 实现吸顶效果
{子绝父相}

8.宽高自适应
两栏或者三栏布局
calc{}函数

9.html5和css3
html5新增

1.语义化标签
2.智能表单 type的取值 file /range/color/mouth
3.视频.音频标签----contro --auto-play
4.相关的api{封装好的方法}--calc{}
5.存储{本地存储 离线存储}
6.地图相关内容

css3新增
1.新增选择器 属性选择器 [] 伪类选择器【】 ui状态选择器{用于表单} 否定选择器：：not[] 超链接动态选择器 link visited hover
2.渐进增强和优雅降级
渐进增强：先针对低版本浏览器构建页面，然后再针对高级浏览器进行效果，交互改进和追加功能达到更好的体验
优雅降级：一开始就构建完整的功能，在针对低版本浏览器进行兼容
3.文本阴影：text-shadow：水平 垂直 模糊的距离 颜色；
（加逗号可以添加多个阴影）
1.可以取负值
2.层级关系
4.盒子阴影：box-shadow：
5.多背景图 background：url（）no-repeat center center
1.单一属性 background-image:url(),url()
6.字体模块 @font-face
7.iconf字体图标

10.弹性盒子
容器属性：
项目属性：

11.移动端
1.百分比
2.等比缩放 rem ，vw 100vw一个完整视口宽
3.flexble.js{封装好了}
*****4.多列布局：column 给页面头尾定位 给section加padding

12.渐变
1. background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
2.background: radial-gradient(center, shape, size, start-color, ..., last-color);
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；farthest-side：最远边； closest-corner：最近角； farthest- corner：最远角

13.***过度***

transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
1、translate()
水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；
垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);
对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

translateX()：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
translateY()：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。
2、scale()
让元素根据中心原点对对象进行缩放。默认的值1。
0.01到0.99之间的任何值，使一个元素缩小；
而任何大于或等于1.01的值，让元素显得更大。

、 3、rotate()
旋转rotate()
如果这个值为 正值，元素相对原点中心顺时针旋转；
如果这个值为负值，元素相对原点中心逆时针旋转。

4、skew()
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

5、transform-origin
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

14.***动画 animatin小动画

1.keyframes
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}

2.@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}（中间再可以添加关键帧）

3.animation和transition的区别
相同点：都是随着时间改变元素的属性值。
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以 显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

4.animation
animation复合属性。检索或设置对象所应用的动画特效。
1.animation-name 检索或设置对象所应用的动画名称
说明：必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove

2.animation-duration 检索或设置对象动画的持续时间
说明：animation-duration:3s; 动画完成使用的时间为3s

3.animation-timing-function 检索或设置对象动画的过渡类型
说明：linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
4.animation-delay 检索或设置对象动画延迟的时间
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)

5.animation-iteration-count 检索或设置对象动画的循环次数
说明：animation-iteration-count: infinite | number;
infinite：无限循环
number: 循环的次数

6.animation-direction 检索或设置对象动画在循环中是否反向运动
说明：normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7.animation-play-state 检索或设置对象动画的状态
说明：animation-play-state:running | paused;
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

响应式布局 1、媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽 略。

2、媒体查询结构

@media all and (min-width:320px) {
body { background-color:blue;}
}

重点 ：1.表格 table
合并单个colspan（）rowspan{}
2.bfc 块级格式化上下文
理解一个大箱子 里面形成独立盒子 里外互不干扰
如何触发bfc
html默认时一个bfc
float的值不是none
overflow：不是visible
display 取值都会触发
position absolute/fixed

为什么要触发bfc
1.两个相邻box margin发生重叠 给其中一个加一个盒子 overflowhidden
2.两栏布局 bfc区域不与元素浮动区域重叠
第一个浮动 第二个栏不要写宽度100%加overflow；hidden
auto不等于100% auto等于宽度自适应{}跟父元素宽度大小一样
3.计算bfc高度时，浮动元素参与计算{清除浮动}

移动端{添加滚动条}
overflow：auto
flex shrunk：0

 

锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置

7、理想视口

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />