CSS基础

一.CSS9中选择器
1.标签选择器 – 元素就是最基本的选择器
例子： p{
border:1px black solid;
color: blue;
}
2.ID选择器 --为要添加样式的元素添加一个id（唯一） 用#调用
例子： #test{
color: red;
}
3.class选择器 --为要添加样式的元素添加一个class属性（可重复） 用.调用
例子： .test1{
color: blue;
}
4.并集选择器 --将一个样式运用于多个选择器，中间用逗号隔开
例子： header,main{
border: 1px black solid;
width: 600px;
margin: 0 auto; /上右下左/
}
5.后代选择器 --多个选择器以空格分开，且从左到右为包含关系
例子：div h1{
color=red;
}
6.子元素选择器 --第一个选择器>第二个选择器 只作用于元素的第一代后代
例子： tr>td{ color=red;} //作用于tr下的所有td子元素（即第一代td），对于子元素下的子元素不起作用
后代选择器和子元素选择器的区别
后代选择器指的是该父元素下的所有后代，包括子元素下的子元素（第二代及以后）
子元素选择器只对该父元素下的子元素（即第一代）起作用，对子元素的子元素（第二代及以后）不起作用
例子：
/food元素的所有li元素下的第一个li元素/
.food li:first-child{
background-color: yellow;
border: 1px red solid;
}
/food元素下的li子元素（第一代）的最后一个li元素/
.food>li:last-child{
background-color: gray;
}
7.兄弟选择器 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
例子：.p2 +p{
color: blue;
};
8.伪类选择器
:link选择器 选择未访问链接元素
:visited选择器 选择已访问的链接元素
:hover选择器 鼠标悬停在其上的元素
:active选择器 被用户激活的元素，通常意味着用户即将点击该元素
a:link{} a:visited{} a:hover{} a:active{}

9.属性选择器 – 对带有指定属性的 HTML 元素设置样式
例子：a[href="#"]{
color: red;
font-size: 26px;
}

二.CSS样式引入
1.行内样式 在标签里写样式
例子：

使用行内样式该表这段文字的颜色

2.内部样式 在style标签中添加样式
例子：style
p{
color: red;
}
/style
3.外部样式 编写css文件用link进行引入
例子：link rel=“stylesheet” href="…/css/css.css"
link中的属性：
type：文件类型
rel:使用的外部样式表
href:文件路径
注意，当上面3种样式有2种及以上同时存在且对某一元素的某种属性同时进行修改时，css会采用就近原则以避免冲突，采用离此元素近的样式

三.CSS基本样式
1.span标签 行元素
span标签时CSS中属于一个行内元素，在行内定义一个区域，也就是一个行内可以被span划分成好几个区域，从而实现某种特定效果，不会换行，用来组合文档中的行内元素
2.字体样式
Font-style:设置字体风格
1.普通字体：normal 默认
2.斜体样式：italic
3.倾斜体样式：oblique
Font-weight:设置字体粗细(normal400、bold700、blder、lighter)
Font-size:设置字体大小
Font-family:设置字体类型（楷体，宋体等）
Font:顺序为字体风格——字体粗细——字体大小——字体类型 缺一不可，顺序不可换
3.文本样式
Text-align:设置文本水平对齐方式 left right center
Line-height:设置行高
Text-indent:文本首行缩进
Text-decoration:设置文本装饰 none underline overline line-through
Color
字体默认大小为12px
4.超链接
A:link 未访问的样式
A:visited:已访问的样式
A:hover:鼠标移到超链接
A:active:鼠标点击时
同时设置超链接样式顺序:爱恨原则LoVe HAte
最常用的是a:link a:hover 不要在超链接中添加过多的连接样式，兼容性太差
5.背景样式
Background-color:red;
Background-image:url();
Background-repeat:no-repeat 设置背景不平铺，如果图片大小小于内容大小，默认会进行x轴和y轴的平铺
Background-position:设置背景图片的开始位置
可以进行简写，顺序无所谓
6.列表样式
List-style-type
none 无标记符号
disc 实心圆，默认类型
circle:空心圆
square:实心正方形
decimal：数字
List-style-image: url(图标地址)

四.CSS盒子模型（DIV）
理解：CSS中的盒子模型可以理解为生活中的盒子，有边框、内容、和填充物，站在盒子的角度与内容的距离为内边距，站在内容的角度与盒子的距离为外边距
1.外边距margin属性
margin-top:1px 上外边距
margin-bottom:1px 下外边距
margin-left:1px 左外边距
margin-right:1px 右外边距
margin:1px 上下左右均为1px
margin: 1px 2px 上下为1px 左右为2px
margin: 1px 2px 3px 上1px 左右2px 下3px
margin：1px 2px 3px 4px ； 顺序为上右下左（顺时针）
页面居中对齐属性：margin： 0 auto;
2.内边距padding属性
尽量不要使用，因为padding可能会改变盒子的大小，尽量使用margin
padding与margin属性和方向顺序一致，不再赘述
3.边框border属性
border-width: 2px; 边框宽度
border-style: solid; 边框风格
border-color: red; 边框颜色
border: 2px solid red; 同时设置时顺序为宽度–风格–颜色
4.标准文档流和非标准文档流
标准文档流：按标签的顺序正确进行执行的称为标准文档流
非标准文档流：比如一个标签加入了浮动和定位
5. 行内元素和块元素
行内元素又叫内联元素 特点：只是占的内容的宽度
块元素 特点：内容不管有多少，都独占一行
6.display属性
display:行内块元素相互转换 常用值：
inline:将元素转换为行内元素
block:将元素转换为块元素
none:设置后该元素将不会被显示
7.浮动
浮动后将脱离标准文档流，向左或者向右浮动，直到它的外边距碰到父元素的边框或者另一个浮动元素的边框。（对块元素和行内元素都生效）
块元素浮动后，将失去独占一行的特征，相当于变成了一个特殊的“行内元素了”
元素向左或者向右移动后就相当于让出了自己的左边或者右边，别的元素浮动后都会在它的左边或者右边排列。
浮动元素将紧贴着 上一个浮动元素或者父元素的边框，如果宽度不够，将换行
float:left 左浮动 float:right 右浮动
8.清除浮动
（1）.一个块元素如果没有浮动，父元素没有设置高度，那么高度就是由里面的子元素撑开的
（2）.如果子元素设置了浮动，脱离了标准文档流，那么父元素的高度将被其忽略
（3）.如果不清楚浮动，父元素会出现高度不够，那样的话，background等属性将得不到正确的解析
（4）.清除浮动影响的是元素本身的浮动，对其他元素浮动没有影响，只能对块元素有效
clear:left 清除左浮动 clear:right清除右浮动 clear:both清除两边的浮动
9.内容溢出overflow属性
visible：默认值。内容不会被修剪，会呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow还可以去除浮动，在浮动的元素的父元素中添加overflow: hidden;即可去除该元素的浮动
10.position相对定位与绝对定位
相对定位是相对于自己的位置进行偏移，而绝对定位先看父元素或父元素的父元素有没有定位，若是有就对于父元素进行偏移，若是没有就对于body进行偏移，最后，绝对定位不占位置
position:relative 相对定位
position:absolute 绝对定位
left 20px right -20px 向右偏移20像素
top 20px bottom -20px 向下偏移20像素