页面笔记
DOCTYPE : DOC -document文档，TYPE类型， 文档类型，作用告诉浏览器这是个什么文件
html:根元素 head:头部标签
meta:设器标签， charset编码
title:标题标签， body:身体标签单标签:
双标签:开始标签结束标签， html
css引入方式
1.行内样式:写到标签里，style属性引出，属性跟到引号里面
2.内部样式: head标签里面加上style标签
3.外部样式:
标签分类
块级元素:默认占整行,宽度可设，但是独自占一行行
内块元素:默认宽度和内容一样，可设宽
行内元素:默认宽度和内容样，宽度不可设
-----------------------------------------------------------------所有css---------------------------------------------------------
*{ padding:0; margin:0; box-sizing:border-box; }
html,body { width:100%; height:100%; background-color:#f9f9f9; }
img{ display:block; } li{ list-style:none; } .cen{ width:1200px; }
------------------------------------------------------------------------------------------------------------------------------------
引入css样式<link rel="stylesheet" href="css/style.css" />
------------------------------------------------------------- 常规属性------------------------------------------------------------
文字颜色color 宽度 width 高度 height 字体厚度 font-weight
外边距 margin 内边距 padding 浮动 float 鼠标经过时 hover
字体大小font-size 变成块 display:block 去序列号list-style:none 行高 line-height
去边框border:none 去轮廓：outline：none 底部边框border-bottom 去文本修饰text-decoration: none;
边框 border 轮廓 outline 虚线 dashed 层级 z-index
按钮 button 实线 solid 缩进 text-indent:1em 锁盒子box-sizing:border-box;
居中 text-align 第一个 first-child 第好几个 nth-child(2 ) 最后一个 last-child
插入超链接 <a href> li 列表 ul 无序 ol有序
盒子（文字）阴影 box(text)-shaow 5px（向右） 5px（向下） 5px（模糊度） red 权重：！important
不换行white-space: nowrap 文本框<textarea placeholder="。。。"></textarea>
设置背景图 background-image: url 四个透明度：visiblity opacity transparent rgba
固定位置：position:fixed 超出部分隐藏：overflow: hidden;
------------------------------------------------------------------设置背景--------------------------------------------------
背景位置 background-position:center （20px） 背景重复 background-repeat 背景固定background-attyachment:fixed
背景阴影值： rabg(30,29,24,7) 不透明度：opacity：0
----------------------------------------------------------------文本装饰---------------------------------------------------
字符转换（处理文本的大小写）text-transform：none不变 uppercase全大写 lowercase全小写 capitalize首字母大写
下划线 text-decoration：underline 上划线 overline 贯穿线 line-through 缩进 text-indent: 5em;
字间隔《文本 text》《文字letter》word-spacing: 30px 鼠标变成手cursor: pointer; 边框圆角化：border-radius:10px;
允许对长度单位进行拆分，并换行到下一行word-wrap:break-word
复选框--------------------------------------------------------------定位 平移-------------------------------------------------
定位总结position 相对定位relative 绝对定位 absolute 固定定位 fixed
（相对自己定位） （相对父级定位） （相对浏览器视窗定位）
变形:transform 翻转 rotate 平移 translate 放大（缩小）比例scale
倾斜 skew（单位deg）
------------------------------------------------------------------过渡---------------------------------------------------
过渡时长transition-duration:0.5s; 规定在过渡效果开始之前需要等待的时间 transition-delay：2s；
------------------------------------------------------------动画 --------------------------------------------------------
所有动画属性的简写属性animation 规定动画 @keyframes+名字 所费时间animation-duration：2s；
规定动画何时开始animation-delay: time; 动画播放次数animation-iteration-count: n | infinite（无限次）;
是否逆向播放animation-direction: alternate（逆向）; 匀速 linear
-----------------------------------------------------------兼容----------------------------------------------------
—moz— 火狐 —webkit— 谷歌 —o— Opera —ms— IE浏览器
------------------------------------------------------------适配------------------------------------------------------------------
@media (min-width:1366px) and (max-width:1920px) {
.banner{
height: 600px;
}
}
