选择器
*选择所有的标签
标签选择器：直接通过标签名选择
类名选择器:直接通过类名选择标签 类名前面一定需要加点 .+class名字
后代选择器：被包裹的都称为后代 div p 使用空格隔开 一般不能超过四级
清除样式
*{
margin: 0px;
padding:0px;
list-style: none;
}
div绝对水平居中
margin-left:auto;
margin-right: auto;
浮动可以让标签变成水平排列 float:left水平靠左 float:right水平靠右
一个标签浮动，同级(同一个父级)标签必须浮动
在标准流中(不浮动)，父级可以检测到子级的高度
如果父级不够宽的时候，子级会自动落下来
子级浮动，父级检测不到高度。浮动塌陷
解决：
1、给父级增加高度
2、给父级加overflow:hidden;
取类名相当于人名，可以有多个 类名需要使用英文开始，不能和标签名一样
img{
/* 图片的值，只需要设置一个方向即可，另外一个值，计算机自动计算 */
width: 20px;
标签分类：
第一种：单双标签
双标签:<标签></标签>
单标签:<标签>或<标签 />
第二种：行内标签和快级标签
行内标签：和其他标签并排排列 span b u i a
行内标签设置宽高无效，上下外边距无效，左右有效
上下内边距有效，不占位。左右有效且占位
块级标签：独占一行ul li h1-h6 p div
行内块：在一行排列，设置宽高有效 img input td tr table
标准流：行内标签水平，块级标签垂直。
做网站的时候，首先需要考虑的是标准流。再次是浮动。
浮动以后，脱离标准流，变成行内块
外边距塌陷
标准流中：
1、左右外边距可以叠加,上下外边距的值取决于最大的
2、父标签内部有一个子标签。如果给子标签增加margin-top父级会跟着下来。
解决方法：
1、不要使用margin-top 给父级增加padding-top
2、给父级增加overflow:hidden
浮动以后的值上下左右都可以叠加
多个类名中间使用空格
<a href="" class="left my" >
css书写方式
第一种：内联
第二种：外链 不需要加style标签对(做项目的时候)
第三种：行内样式(不推荐使用)
div{
/* 文字颜色 */
color:red;
/* 文字大小 */
font-size: 20px;
/* 行高 */
line-height: 30px;
/* 字体 */
font-family: "楷体";
/* 文字居中 */
text-align: center;
/* 盒子模型 margin padding border width height */
/* 浮动 ，让标签水平排列 */
}
div{
/* 文字颜色 */
color:red;
/* 文字大小 */
font-size: 20px;
/* 行高 */
line-height: 30px;
/* 字体 */
font-family: "楷体";
/* 文字居中 */
text-align: center;
/* 盒子模型 margin padding border width height */
/* 浮动 ，让标签水平排列 */
}
固定定位的标签 position: fixed 不会随着窗口的滚动而滚动
参照物是当前的窗口 left top bottom right
左右只能存在一个，上下只能存在一个
固定定位，脱离标准流，变成行内块
相对定位 position: relative相对自身位移，一般用来做微调
top left right bottom参照物是自身
占位:占的是原来的位置
绝对定位 position: absolute一般实现的效果是一个标签放置在另一个标签的上面
子级绝对定位，父级相对定位。可以把子级固定在父级的任何位置 left top right bottom
绝对定位：不占位
绝对定位以后，标签变成行内块
/* 文字垂直居中，设置行高等于当前标签的高度 */
line-height: 40px;
/* 增加圆角，值越大圆角越明显 值是50%的时候就是圆形*/
border-radius: 50%;
/* 旋转 deg度数单位 正值顺时针，负值逆时针 */
transform: rotate(30deg);
display
inline把标签转化为行内标签
inline-block把标签转化为行内块
block 把标签转化为块级标签
none隐藏标签
转化完了以后，只是为了工作方便。原来标签的语义没有变化
css层叠性和继承性
选择器权重 *<标签名1g<类名1kg
选择器权重可以叠加
层叠性：
css同样的样式，权重一样的话后写的生效
权重不一样，取决于权重高的
继承性：
与文字有关的样式，都可以继承
如果一个标签没有某一个与文字有关的样式(一定要考虑到内置的一些样式)，会向上寻找，直到找到该样式，
css3样式
/* linear-gradient(to 方向,色值,色值) */
/* background: linear-gradient(to top,red,#ffff00,blue); */
background: lime;
/* 投影
第一个值水平方向 正值右边 负值左边
第二个值垂直方向
第三个值虚实程度
第四个值影子大小
第五个值影子颜色 可以书写成透明色
*
html5常用标签 用法和div一模一样，只是语义更重了
<header>头部</header>
<nav>导航</nav>
<main>主要内容</main>
<section>大区域内容</section>
<aside>侧边栏</aside>
<footer>底部</footer>
<article>文章</article>
转化模块
转换模块，对于行内标签没有效果 占得是原来的位置
/同样的样式后写的生效
旋转
transform: rotate(30deg);
缩放 0-1缩小 大于1的时候放大
transform: scale(0.3);
位移，第一个值代表水平方向，第二个值垂直方向
transform: translate(100px,100px);
可以书写多个值，使用空格隔开
transform: scale(0.3) rotate(12deg) translate(100px ,100px);
旋转以后，整个坐标系也跟着改变
transform: translate(100px,100px) rotate(90deg);
transform: rotate(90deg) translate(100px,100px) ;
过度模块
/* 过渡模块，中间变化过程可见 all代表所有的可以专门设置一个样式 */
/* 第一个值代表样式 第二个值动画持续时间 第三个值延迟时间(可选) */
/* transition: all 2s 2s; */
transition: background 1s 0s,transform 1s 1s,border-radius 1s 2s,width 1s 2s;
}
/* 选择器:hover鼠标移入以后才生效 */
动画模块
/* 使用动画 动画名字 动画持续时间 次数(可以书写具体的次数) infinite无穷 linear平缓过渡*/
animation:circle 2s infinite linear;
/* transform-origin: x y; 旋转中心点 第一个值代表水平 left center right，第二个值代表垂直top center bottom*/
}
/* 定义动画
@keyframes 动画名字{
书写各个状态的样式条
状态就是百分比来划分
}
*/
/* :nth-of-type(n)可以选择到具体的某一个 */
/* 定位以后的标签，如果叠加的话，后写的在上面
定义以后的标签，可以通过z-index调整图层顺序
默认值0值越大越靠上。可以是负值但是不建议
*/
/* 加此样式，才可以进入三维坐标 */
transform-style: preserve-3d;