CSS基础
概念
CSS指层叠样式表(级联样式表)，作用是用来美化html标签
书写位置
<head>
<style type="text/css">
//样式代码
</style>
</head>
选择器
选择器是一个选择谁的过程
- 基础选择器
- 标签选择器
标签{
属性:值;
}
- 类选择器
.自定义类名{
属性:值;
}
特点：谁调用，谁生效
一个标签可以多个类选择器
多个标签可以调用同一个类选择器
命名规则：不能用纯数字或者数字开头来定义类名
不能使用特殊符号（_除外）来定义类名
不推荐使用汉字来定义类名
不推荐使用标签名，属性值，属性来定义
- id选择器
#自定义类名{
属性:值;
}
特点：谁调用，谁生效
一个标签只能调用一个id选择器
一个id选择器在一个页面只能调用一次
- 通配符
*{
属性:值;
}
- 复合选择器
- 交集选择器
标签+类/id选择器{
属性:值;
}
特点：既是某个标签，而且这个标签调用了类／id选择器
- 后代选择器
选择器+空格+选择器{
属性:值;
}
后代选择器的基本要求：包含/嵌套关系
特点：父在前，子在后
无限制隔代
只要能代表这个标签，可以是标签选择器，类选择器，id选择器自由组合
- 子代选择器
选择器>选择器{
属性:值;
}
特点：选择的是直接下一代
- 并集选择器
选择器,选择器,选择器{
属性:值;
}
文本元素
-
属性
1.1 font-size：文字大小
1.2 font-weight ：文字粗细 100-900 其中700为加粗；不推荐使用font-weight:bold；
1.3 font-family：文字字体，如微软雅黑
1.4 font-style：文字样式，normal正常（默认），italic斜体
1.5 line-height：行高
1.6 color：文本颜色（前景色）
1.7 background-color：背景色
1.8 text-align：内容的水平对齐方式，图片也适用，left／right／center
1.9 text-indent：首行缩进，通常为2em -
文本属性连写
font:italic 700 16px/40px 微软雅黑;(最好按照这个顺序书写属性值，其中连写时font-size和font-family必写) -
font-family的表达方式
1.直接写中文名称，如微软雅黑,宋体，黑体
2.写字体的英文名称，如microsoft yahei，SimSun,SimHei
3.unicode编码,如/5FAE/8F6F/96C5/9ED1,/5B8B/4F53,/9ED1/4F53，获取方法为在console面板中输入escape("XXX")即可获取，把获取到的值中’%u‘改为’／‘
样式表书写位置
- 内嵌式写法
<head>
<style type='text/css'>
样式表内容
<style>
</head>
- 外链式写法
<head>
<link rel='stylesheet' href='css文件路径'>
</head>
-
行内样式表
如<p style='color:red;font-size:20px;'>...</p> -
三种写法特点：
内嵌式样式：只作用于当前文件，没有真正实现结构表现分离；
外链式写法：作用范围是当前站点，范围广，真正实现了结构表现分离；
行内样式表：作用范围仅限于当前标签，范围小，结构表现混在一起，不推荐使用。
标签分类（显示方式）
-
块元素
典型代表：div，h1-h6，p，ul，li
特点：独占一行；可以设置宽高；嵌套（包含）下，子块元素宽度（没有定义的情况下）和父块元素宽度默认一致。 -
行内元素
典型代表：span，a，strong，em，del，ins
特点：在一行上显示；不能直接定义宽高；宽高默认根据内容撑开 -
行内块元素（内联元素）
典型代表：img，input
特点：在一行上显示；可以设置宽高 -
块元素转行内元素：
display：inline;不能再设置宽高 -
行内元素转块元素：
display：block;可以设置宽高 -
块和行内元素转行内块元素：
display：inline-block;在一行上显示并且可以设置宽高
css三大特性：
- 层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行写在下面的样式 - 继承性
继承性发生的前提是包含（嵌套）关系
文字颜色，文字大小，字体，文字粗细，文字样式，行高可以继承，即文字的所有属性都可以继承
特殊情况：
h系列不能继承文字大小，
a标签不能继承文字颜色 - 优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
==>>0<1<10<100<1000<1000以上
优先级的特点
1.继承的权重为0
2.权重会叠加
链接伪类
a:link{属性:值;}<==>a{属性:值;}效果是一样的，链接的默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;}鼠标放到链接上显示的状态
a:active{属性:值;}链接激活的状态，即鼠标放着不松手
:focus{属性:值;}获取焦点
label for id(获取光标焦点)
<label for="...">***</label><input type='text' id='...'>
注意：如果四个链接伪类都使用，按顺序书写。
文本修饰
text-decoration 默认为none，下划线underline ，删除线line-through
背景属性
- background-color 背景颜色
- background-image 背景图片url("")
- background-repeat 背景平铺 no-repeat／repeat（默认）／repeat-x／repeat-y
- background-position背景定位left／right／center／top／bottom
当方位值只写一个的时候，另外一个值默认居中；
当写两个方位值的时候，顺序没有要求
写两个具体值的时候，如20px 30px，第一个值代表水平方向距左边框的距离，第二个值代表垂直方向距上边框的距离 - background-attachment 背景是否滚动scroll （默认）／fixed
如果为fixed，position是相对浏览器的；如果为scrol，position是相对父标签的
背景属性的连写
background:red url("") no-repeat bottom fixed;
连写的时候没有顺序要求，url为必写项
行高
浏览器默认文字大小：16px
行高：基线与基线之间的距离即文字高度➕上下边距
基线：一段文字内容中底部最高的底线
下边距：文本盒子的最下面
上边距：文本盒子的最上面
顶线：文字内容的最上面
底线：文字内容的最下面
一行文字行高和父元素高度一致时，垂直居中显示
行高的单位
| 行高单位 | 文字大小 | 行高值 |
|---|---|---|
| px | 20px | 20px |
| em | 20px | 40px |
| % | 20px | 30px |
| 2 | 20px | 40px |
总结：
单位除了像素以外，其余单位情况下行高都是与文字大小乘积
| 父元素行高单位 | 父元素文字大小 | 子元素文字大小 | 子盒子行高值 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
总结：
不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘，行高以像素为单位，就是定义的行高值
推荐行高使用像素为单位
盒子模型
作用：页面布局
-
border：边框
border-top-style线型solid（实线）／dotted（点线）／dashed（虚线）
border-top-color线的颜色
border-top-width线的宽度
border-top：5px solid red；（连写特点：无顺序要求,但是线型不能少）
border：5px solid red；
border：0 none；（input标签去除原始边框）
outline-style：none；（input focus状态时去除轮廓线） -
padding：内边距
padding-left／padding-right／padding-top／padding-bottom
连写：padding：20px；上下左右都是20px；
padding：20px 30px；上下20px，左右30px；
padding：10px 20px 30px；上10px ，左右20px，下30px；
padding：10px 20px 30px 40px；上10px 右20px 下30px 左40px；
内边距影响盒子大小：
内边距会撑大盒子，会影响盒子的宽度 -
margin：外边距，盒子和盒子之间的距离
margin-left/margin-right／margin-top／margin-bottom
连写：margin：20px；上下左右都是20px；
margin：20px 30px；上下20px，左右30px；
margin：10px 20px 30px；上10px ，左右20px，下30px；
margin：10px 20px 30px 40px；上10px 右20px 下30px 左40px； -
垂直方向外边距合并：
垂直方向的两个盒子，如果都设置了垂直方向外边距，取得是设置的比较大的值。 -
外边距塌陷
嵌套的盒子，直接给子盒子设置垂直方向的外边距，会发生外边距塌陷
解决方法：
1.给父盒子设置边框（不推荐使用）
2.给父盒子设置overflow：hidden；（bfc ：格式化上下文）
-
盒子的宽度=定义的宽度+左右边框的宽度+左右内边距的宽度。
嵌套／包含的盒子如果子盒子没有定义宽度，给子盒子设置左右内边距且内边距小于父盒子的宽度，不会撑大盒子，但是如果左右内边距大于父盒子宽度，不会撑大盒子，自己会变大
边框合并（table的属性）
border-collapse：collapse；
行内元素可以定义左右的内外边距，上下会被忽略（不起作用）。
行内块可以定义内外边距。
文档流（标准流）
元素自上而下，自左而右。块元素独占一行，行内元素在一行上显示，碰到父元素的边框换行
浮动布局
float： left／right;
-
特点：
1.元素浮动之后不占据原来的位置（脱标）；
2.浮动的盒子在一行显示；
3.行内元素浮动之后转为行内块元素（不建议使用，因为脱标了，最好使用display） -
浮动的作用
1.文本绕图
2.制作导航
3.网页布局 -
清除浮动
1.当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生未知错误，会顶上去；
2.清除浮动不是不用浮动，而是清除浮动产生的不好的影响；
3.清除浮动的方法：
clear：left／right／both
工作中最常用的是clear：both；
3.1 额外标签法：在最后一个浮动元素后添加标签（不推荐使用，因为需要添加很多额外的标签）
如<div style=“clear：both；”></div>
3.2 给父级元素使用格式化上下文：overflow：hidden；（不推荐使用，因为当如果有内容在盒子之外就会被剪裁，不能使用）
3.3 给浮动元素的父元素添加伪元素清除浮动
.clearfix:after{
content:"."／" ";
display :block;
height：0；
line-height：0；
visibility:hidden;
clear：both；
}
//为了兼容ie浏览器，加上以下代码
.clearfix{
zoom:1;
}
css初始化
为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没有对css初始化，往往会出现浏览器之间的页面差异。
- overflow：
1.visible（默认，内容不会被修剪，内容会呈现在元素框之外）
2.hidden（元素框之外的会被修剪）
3.scroll（超出的内容被藏起来，需要滚动显示，不管有没有超出，都会显示滚动条）
4.auto（内容超出s才会显示滚动条，反之不会）
定位
position
- 静态定位
position：static；：（默认，就是文档流／标准流）
方向left／right／top／bottom
如left：100px； - 绝对定位
position：absolute；
特点：
1.元素使用绝对定位之后，不占据原来的位置（脱标）；
2.元素使用绝对定位，位置从浏览器出发；
3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子的位置从浏览器出发；
4.嵌套的盒子，父盒子子盒子都使用了绝对定位，子盒子的位置从父盒子出发；
5.给行内元素使用了绝对定位，会变成行内块元素（不推荐使用，最好使用display：inline-block；）
z-index:调整元素的层叠顺序，默认值0-999，值越大，元素越在上面 - 相对定位
position：relative；
特点：
1.使用相对定位，位置从自身出发；
2.没有脱标，还占据原来的位置；
3.⭐️子绝父相（父元素相对定位，子元素绝对定位，不使用父元素绝对定位是因为父元素会脱标，下面的元素会顶上去），子元素的位置会从父元素出发；4.行内元素使用相对定位不能转成行内块元素。 - 固定定位
position:fixed;
特点：
1.固定定位之后，不占据原来的位置，会脱标；
2.元素使用固定定位之后，位置从浏览器出发；
3.行内元素使用固定定位之后会变成行内块元素（不推荐使用，因为会脱标，最好使用display：inline-block；）。
定位的盒子居中显示
1.margin：0 auto；只能让标准流的盒子居中；
2.定位的盒子居中（脱标），先向右走父元素盒子的一半，再向左走子盒子宽度的一半
left：50%；
margin-left：-width／2.0px；//(当前元素宽度的一半，向右为正数，向左为负）
标签包含规范
1.div可以包含所有的标签
2.p标签不能包含div，h1-h6等块标签
3.h1可以包含p，div等标签
4.行内元素尽量包含/嵌套行内元素
5.行内元素不要包含块元素
规避脱标流
1.尽量使用标准流
margin-left：auto；将盒子左侧充满，代替浮动float：right；
2.标准流解决不了的时候用浮动
3.浮动解决不了用定位
图片和文字垂直居中对齐
vertical-align对inline-block效果最好，默认属性是vertical-align：baseline；
给图片设置vertical-align：middle；可以让图片和文字垂直对齐；
vertical-align的其余值：top／bottom等
css可见性
overflow：hidden；溢出隐藏
visibility：hidden；隐藏元素，但是还占据原来的位置
display：none；隐藏元素，不占用原来的位置
display：block；元素可见
display：none／block常配合js使用
css之内容移除（写了文字但是又不需要被看见，网页优化）
1.使用text-indent，如
a{
display:inline-block;
text-indent:-5000em;
}
2.使用overflow：hidden，如
div{
width:300px;
height:0px;
padding-top:100px;
over-flow:hidden;
}
css精灵图
属性选择器
如input[type=text][class]
emmet语法（插件）
