CSS——CSS基础（一篇就够用）
一.CSS概述1.什么是css2.作用3.css和html属性的使用原则
二.CSS语法规范1.css的使用方式①行内样式，内联样式②内部样式③外部样式
2.css的样式特性①继承性②堆叠性③优先级④调整优先级
三.基础选择器1.通用选择器2.元素选择器3.ID选择器4.类选择器类选择器的其它用法①.多类选择器②.分类选择器③.类名的定义规范
5.群组选择器6.后代选择器7.子代选择器8.伪类选择器9. 选择器权值
四.尺寸和边框1.尺寸2.页面中允许设置尺寸的元素有哪些3.溢出处理4.边框①边框的简写方式②单边的设置③单属性设置④单边单属性
5.边框的倒角（圆角）6.元素阴影7.轮廓
五.盒子模型1.外边距 margin①语法：②简写方式：③margin自我冲突
2.外边距的特殊情况①外边距的合并②完整的块级元素、行内元素、行内块的总结③默认自带外边距的元素④外边距溢出
3.内边距 padding①语法
4.设置盒子模型的计算方式
六.背景1.背景颜色2.背景图片的定位3.简写方式4.最简方式
七.渐变1.线性渐变2.径向渐变3.重复渐变4.线性渐变的浏览器兼容问题
八.文本格式化1.字体属性2.文本属性
九.表格的样式1.表格的常用样式2.表格的专属样式4.设置表格显示规则
十.浮动定位十一.其他重要样式属性1.显示方式2.显示效果3.透明度4.垂直对齐方式5.光标的管理6.列表的样式
十二.定位1.相对定位2.绝对定位3.固定定位4.堆叠顺序
一.CSS概述
1.什么是css
css:cascading style sheets 层叠 样式 表
2.作用
html：搭建网页的结构，承载页面的数据 css:美化页面，修饰标签 (亚洲4大邪术)
3.css和html属性的使用原则
html的属性只对当前标签有效，没有可重用性，导致没有可维护性 css 具备一定的代码重用性，提高了可维护性 但是css没有把重用性做到极致。使用scss可以做到极致 W3C建议使用css替代html属性，如果css无法替代的属性，就使用html属性就可以了
二.CSS语法规范
1.css的使用方式
每个样式属性之间用分号连接，例： color:red; 字体颜色 background-color:yellow; 背景颜色 font-size: 50px; 字号大小
①行内样式，内联样式
在元素中，写style属性，在style属性中编写样式 <元素 style="样式声明;样式声明.....">
只对当前元素生效，代码没有可重用性 内联样式默认优先级最高 内联样式只在学习和测试中使用，项目基本不用
②内部样式
在head标签中，编写style标签，在style标签内部，编写属性 选择器{样式声明;样式声明…} 选择器：定义页面中使用这个样式的元素条件
p{
color:purple;
background-color: pink;
}
只能在当前页面中使用，项目中使用较少， 学习和测试使用较多
③外部样式
创建一个.css文件，在html中的head标签里，使用link引入
必须有rel=“stylesheet”，代表当前文件和引入文件的关系 项目中大量使用
2.css的样式特性
①继承性
文本样式和字体样式的继承 绝大多数文本字体样式，可以被继承 a标签不会继承字体颜色
②堆叠性
为一个标签定义多个样式规则 如果样式属性不冲突，都会作用到这个标签上
③优先级
默认优先级 高 内联样式 中 内部样式，外部样式-------就近原则 低 浏览器默认样式 f12关于优先级的显示 默认情况下，f12中样式是按照默认优先级顺序从上往下显示
④调整优先级
设置最高优先级 !important，比内联都高 写在某一个值与分号之间，!important与值之间有空格 color: red !important ; 注意，内联样式不允许设置!important，语义要求
三.基础选择器
选择器，规范了页面中哪些元素能够使用当前设置的样式 就是一个条件，符合这个条件的元素都可以使用这个样式
1.通用选择器
{样式声明} （匹配所有元素，但是的效率非常低，不建议使用） 例：*{margin:0；padding:0}
2.元素选择器
标签关键字{样式声明;} div{} p{}
3.ID选择器
<元素 id=“id值”> #id值{样式声明} id在一个页面中不能重复，所有id选择器只被一个元素应用
4.类选择器
使用.定义样式，哪个元素想用，用class都能调用 <元素 class=“类名”> .类名{样式声明}
类选择器的其它用法
①.多类选择器
<元素 class="类名1 类名2 类名3.......">
②.分类选择器
元素选择器.类选择器{样式声明} .类选择器.类选择器{样式声明} .tooltip.show{}
③.类名的定义规范
①必须有. ②不能以数字开头 ③只能包含- 或者_ v④尽量见名知意
5.群组选择器
选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}
6.后代选择器
通过元素的后代关系，来匹配元素 后代关系：一层嵌套或者多于一层嵌套称为后代 选择器1 选择器2 选择器3{样式声明}
7.子代选择器
通过元素子代关系，来匹配元素 子代关系，一层嵌套为子代 选择器1>选择器2>选择器3{样式声明} 子代和后代选择器可以混合使用 #d1>p span{color:red;}
8.伪类选择器
匹配元素在某一个状态时的样式 只适用于a标签的伪类 ①未被访问:link a:link{color:red} ②已被访问:visited a:visited{color:green} 所有元素都能用的伪类 :hover 鼠标悬停的状态 :active 激活状态 :focus 元素获取焦点时的状态（input button）
9. 选择器权值
选择器权值，代表选择器的重要程度 重要程度高，优先显示 !import >1000 内联样式 1000 id选择器 100 类选择器 10 伪类选择器 10 元素选择器 1 通用选择器 0 继承的样式 无 权值的特点
当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示有多个选择器的权值一样大，按照就近原则添加了!important当前css样式直接获取最高优先级群组选择器，不相加，个算个的选择器权值的计算，不会超过本选择器权值的最大数量级
四.尺寸和边框
1.尺寸
width:
height:
取值：1.px为单位的数字，rem
2.% 但是如果设置高度，当前元素的父元素是body，%失效
min-width
max-width
min-height
max-height
2.页面中允许设置尺寸的元素有哪些
具备属性，width和height的元素，都能设置宽高（img，table,td）
块级元素行内元素行内块(input/button)设置宽高有效设置宽高无效设置宽高有效默认宽，父元素100%默认高靠内容撑开宽高靠内容撑开浏览器默认设置一个宽高不同浏览器给的宽高不同。一般要写兼容，css reset
3.溢出处理
overflow:visible; 溢出部分显示，默认值
overflow:hidden;溢出部分隐藏
overflow:scroll; 带滚动条，不管是否溢出，都添加x/y轴的滚动条
overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条
overflow-x:scroll; 单独让x轴出现滚动条
overflow-y:scroll; 单独让y轴出现滚动条
4.边框
①边框的简写方式
同时设置4个方向的边框
border: width style color;
width- - - - 边框的粗细
style - - - -边框样式 solid 实线
dotted 小圆点虚线
dashed 短线虚线
doubel 双实线
color - - - -合法颜色，transparent
取消边框 border:none / 0 ;
最简方式 border: style; border:solid;
②单边的设置
border-top: 20px solid #f00;
border-right: 20px dotted #00f;
border-bottom: 20px dashed #0ff;
border-left: 20px double #f0f;
取消某个边框
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left:0;
③单属性设置
border-width: 100px;
border-style: solid;
border-color: #CCFF00;
④单边单属性
border-top-width: 上边框宽度
border-top-style: 上边框样式
border-top-color: 上边框颜色
border-right-width:
border-right-style:
border-right-color:
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left-width:
border-left-style:
border-left-color:
5.边框的倒角（圆角）
把直角倒成圆角
border-radius:圆角的半径
取值：1.px为单位的数字
2.% 50%就是圆
单角的定义，圆角之间会相互影响
border-top-right-radius: 值;
border-bottom-right-radius: 值;
border-top-left-radius: 值;
border-bottom-left-radius: 值;
6.元素阴影
box-shadow: h-shadow v-shadow blur spread color;
h-shadow x轴偏移量
v-shadow y轴偏移量
blur 阴影模糊程度
spread 阴影大小
color 阴影颜色
inset 内部阴影
7.轮廓
多用于修饰文本框和按钮 绘制于边框外部一圈线条，不占页面空间 一般我们会把轮廓清除掉
outline:width style color;
outline:0;
五.盒子模型
默认盒子模型计算公式： 元素占地宽度： 左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距 元素占地高度： 上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
1.外边距 margin
①语法：
margin：v1； 同时设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：
px为单位的数字% 上右下左都是父元素宽的百分比auto 上下外边距无效 让块级元素本身在当前父元素内水平居中
②简写方式：
margin:v1; 同时设置4个方向
margin:v1 v2; v1为上下 v2为左右
margin：v1 v2 v3； v1上 v2左右 v3下
margin：v1 v2 v3 v4； 上 右 下 左 123
③margin自我冲突
左右冲突，以左为准 默认布局的元素：不要用右外边距设置元素的水平位移，用左外边距设置位移 右外边距值负责控制当前元素与后面元素的距离
2.外边距的特殊情况
①外边距的合并
两个垂直边距相遇时，会合并成一个，值以大的为准 解决方案：
只写一个元素的上边距，或者另一个元素的下外边距页面设计的时候规避
②完整的块级元素、行内元素、行内块的总结
块级元素行内元素行内块设置宽高有效设置宽高无效设置宽高有效默认宽：父元素%100默认高：靠内容撑开宽高靠内容撑开浏览器默认设置一个宽高4个方向外边距都有效上下外边距无效4个方向外边距都有效改变行内块上外边距行内块会带着同一行的其他行内元素/行内块一起位移
③默认自带外边距的元素
p , h1~h6 , ul , ol body 4个方向8px ul 上下外边距16px 左内边距40px
④外边距溢出
在特殊情况下，子元素的上外边距会作用到父元素上 特殊情况：
父元素没有上边框子元素内容区域的上沿与父元素内容区域的上沿重合 解决方案给父元素上上边框，增加了父元素的实际占地高度给父元素添加上内边距，增加了父元素的实际占地高度给父元素设置overflow:hidden/auto, 如果想溢出显示，就不行了给父元素添加一个大儿子，一个空
3.内边距 padding
①语法
padding:v1;
padding:v1 v2;
padding:v1 v2 v3;
padding:v1 v2 v3 v4;
padding-top;
padding-right;
padding-bottom;
padding-left;
取值：
px为单位的数字% 父元素宽度的百分比内边距不能设置auto
4.设置盒子模型的计算方式
box-sizing: content-box默认值，设置的width为内容区域宽度 左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距 border-box 设置的width包含(左边框+左内边距+内容区域+右内边距+右边框) 左外边距+width+右外边距 width设置百分比的时候，一般使用border-box比较好控制
六.背景
1.背景颜色
background-color : 合法颜色值; 背景颜色
background-image : url(img/02.png); 背景图片
background-repeat: repeat; 背景图片的平铺
no-repeat 不平铺
repeat-x 设置x轴平铺
repeat-y 设置y轴平铺
2.背景图片的定位
background-position:
取值：
x y 分别设置x轴和y轴 以px为单位的数字 关键字 x：left/center/right y：top/center/bottom一个值 只设置x轴，y轴默认居中
background-size:
取值：
两个值设置宽高 px为单位的数字一个值同时设置宽高contain 图片根据元素尺寸自动等比缩放，正好全部显示图片cover 图片根据元素尺寸自动等比缩放，正好把元素铺满
3.简写方式
background：color img repeat position；
简写方式没有size。size需要单写
4.最简方式
background：color / img；
七.渐变
1.线性渐变
background-image: linear-gradient(方向，色标1，色标2……);
取值：方向
写终点
to top
to right
to bottom
to left
写角度 0deg
色标 颜色+位置
%px不写位置只写颜色
2.径向渐变
background-image: radial-gradient(半径 at 圆心x 圆心y，色标1，色标2…….);
取值 圆心
px为单位的数字%关键字 X：left/center/right Y：top/center/bottom
色标 位置为%，是半径长度的%
3.重复渐变
background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);
4.线性渐变的浏览器兼容问题
-webkit-chrome safari-o-欧朋浏览器-moz-火狐浏览器-ms-IE浏览器
八.文本格式化
1.字体属性
字体大小
font-size: px 、rem 、 pt
字体系列
font-family:系列1，系列2，……
字体加粗
font-weight: lighter 300 normal 400 bold 600 bolder 700
字体样式
font-style:normal 没样式
italic 斜体
小型大写字母
font-variant: small-caps;
字体的简写方式
font: style variant weight size fmily; 一定按照顺序写
font: italic small-caps bold 36px "mv boli";
最简方式
font：size family;
2.文本属性
文本颜色 color: 文本的堆砌方式
text-align:left; 左对齐
right 右对齐
center 居中
justify 两端对齐
text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承，但不会让块级元素居中 margin：0 auto； 让当前块级元素水平居中 line-height垂直对齐方式——行高 一般会把行高设置为容器高度，让文本在容器中垂直居中 取值： line-height：
px为单位的数字无单位的数字，代表字号的倍数 一般只对一行文本设置行高，设置多行文本使用内边距算！！！ 文本线条修饰
text-decoration:underline; 下划线
overline 上划线
none 删除所有线条
line-through 删除线
首行缩进
text-indent: px为单位的数字
文本阴影
text-shadow:h-shadow v-shadow blur color;
九.表格的样式
1.表格的常用样式
①table 尺寸、边框、背景、文本、内外边距都有效 ②td/th 高度正常使用，宽度靠内容撑 边框、背景、文本、内边距都有效 外边距无效
2.表格的专属样式
①td/th属性 vertical-align:top/middle/bottom 设置td/th中文本的垂直对齐方式 ②table的属性
边框合并
border-collapse:separate; 默认值，边框分离状态
collapse 边框合并
边框之间的距离，前提边框处于分离状态
border-spacing:20px;
边框标题
caption-side:top; 标题在表格上面
bottom 标题在表格下面
4.设置表格显示规则
表格自动布局(默认布局)表格的固定布局table-layout:autotable-layout: fixed;单元格尺寸会自动适应内容单元格大小取决设置的尺寸比较灵活表格不够灵活表格越大，加载速度越慢任何情况，加载速度都快适用于不确定每列大小并且不复杂的表格适用于确定每列大小的表格
十.浮动定位
float:none; 默认值，不浮动
left 左浮动
right 右浮动
右浮动必须使用margin-right进行位移 没有定义宽度的元素，脱离文档流之后，宽度靠内容撑开 元素一旦脱离文档流，会变成块级元素 清除浮动带来的影响
clear：left； 清除左浮带来的影响
right 清除右浮带来的影响
both 同时清除左右浮动的影响
解决高度坍塌
给父元素设置高度（适合元素较少的情况下）给父元素也设置浮动（会影响父元素的兄弟元素以及父元素的父元素，完全不能用）overflow：hidden/auto；（不能溢出显示了）给父元素添加一个空的块级元素当做小儿子，并给小儿子设置clear:both;
十一.其他重要样式属性
1.显示方式
display:block; 让元素按照块级元素去显示
display:inline; 让元素按照行内元素去显示
display:inline-block; 让元素按照行内块方式显示
display:table; 让元素按照表格的方式显示
display:none; 隐藏，脱离文档流的隐藏
2.显示效果
visibility:visible; 默认值，显示
visibility:hidden; 隐藏，不脱离文档流的隐藏
visibility:hidden;和display:none;的区别 visibility:hidden是不脱离文档流的隐藏 display:none是脱离文档流的隐藏
3.透明度
opacity:0.5; 取值0~1 0全透明，1不透明 opacity和rgba的区别 rgba只改变当前颜色的透明度 opacity元素以及元素后代所有与颜色相关的都会变透明
4.垂直对齐方式
vertical-align: 使用场合 ①表格th/td 控制内部内容垂直对齐方式 top/middle/bottom ②行内块 控制行内块前后行内元素、行内块元素、文本的垂直对齐方式 top/middle/bottom 默认值middle ③img 控制img和前后行内元素、行内块元素、文本的垂直对齐方式 top/middle/bottom/baseline 默认值 baseline基线
5.光标的管理
设置属性之后，会直接调用操作系统的默认光标
cursor:default; 默认值 小箭头
cursor:pointer; 小手
cursor:text; 提示文本输入 的 I
cursor:wait; 等待加载
cursor:help; 帮助
cursor:crosshair; 十字
6.列表的样式
list-style-type:disc; 实心圆
square; 实心小方块
circle;空心圆
none; 去除列表标识项
list-style-image:
list-style-position:outside; 默认值，在li外侧显示列表标示
inside； 在li中显示列表标识
简写方式
list-style:type URL position;
list-style:none; 最简方式，清除列表标识项
十二.定位
相对定位、绝对定位、固定定位 position:static 默认值 默认文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 注意：元素一旦设置了position，并且取值为relative/absolute/fixde其中一种时
这个元素被称为已定位元素解锁四个方向的定位属性：top / right / bottom / left 左右冲突以left为准会解锁堆叠属性z-imdex
1.相对定位
position:relative; 配合偏移属性 不脱离文档流，不影响周围元素 如果一个元素设置了相对定位，并且不写偏移属性，这个元素对页面没有任何影响 如何偏移：相对自己原先位置偏移 使用场合： ①做元素位置的微调 ②作为绝对定位的祖先级已定位元素
2.绝对定位
position:absolute;配合偏移属性 绝对定位，脱离文档流 如何偏移： ①如果元素没有已定位的祖先元素，绝对定位元素相对body左上角进行偏移 ②以“最近的”“已定位的”“祖先级”元素左上角做偏移，子绝父相 使用场合：页面布局中使用，可以让页面移动到页面的任何位置
3.固定定位
position:fixed; 配合偏移属性 如何偏移：相对于body左上角 使用场合：把元素永远固定在页面可视区域的一个位置
4.堆叠顺序
z-index: 注意事项
HTML代码中后写的元素堆叠顺序高z-index：默认值大于0小于1浮动在第几层 小于0 大于-1只有已定位的元素才能设置堆叠堆叠顺序对父子级元素无效，儿子永远压着父亲