css

css:层叠样式表(Cascading Style Sheets)控制网页样式
样式表的几种类型：
1、元素样式 <标签 style=''>
2、内部样式表 style标签只能存放css的样式表，可以有多个style(多套样式表)，只能放在head内部
3、引用外部样式表：可以提取网页的公共样式放在外部样式表，将结构和表现进行分离
<link rel="stylesheet" href="外部css文件路径" type="text/css"/>
4、浏览器自定义样式5、浏览器默认样式(这两个一般不关心)
样式属性一样的优先级：元素样式 > 就近原则，谁离元素近，作用谁；
层叠：多个样式表作用于一个元素时，首先筛选有没有重复的属性，有的话就就近原则，没有的话就层叠为一套最终的样式作用在元素身上。

选择器：
元素选择器：
元素名{设置样式} 针对页面上的所有的元素

id选择器： 
#id{设置样式} 为标有特点id的元素设置样式(id设置时不能重复，选择时可以重复，依旧遵循就近原则)

class选择器：
.class{设置样式} 表示同一元素的相同样式(class可以重复，一个元素可以设置多个class，用空格分开)

属性选择器：
input[name=""]{设置样式}通过元素和属性的值选择
[title][href]{设置样式}通过带有指定属性的元素选择
[title~=""]{设置样式}通过元素中属性包含完整的特定文本的元素选择
[title|=""]{设置样式}[title^=""]{设置样式}通过元素中属性包含完整的特定文本开始的元素选择
[title*=""]{设置样式}通过元素中属性中包含特定文本的元素选择

后代选择器：
ul li{设置样式} 选择当前元素里面的所有的li元素
ul > li{设置样式} 选择当前元素的子元素(只找下一级)

相邻兄弟选择器：
li + li{设置样式} 找指定元素的指定同级元素，不包含自己

伪类选择器：
input:focus{设置样式}向拥有键盘输入焦点的元素添加样式。
p:first-child{设置样式}向元素的匹配的第一个子元素添加样式。

伪元素：
p:first-letter{设置样式}向文本的第一个字母添加特殊样式。
p:first-line{设置样式}向文本的首行添加特殊样式。
p:before{设置样式}在元素之前添加内容。
p:after{设置样式} 在元素之后添加内容。

#{设置样式} 页面所有元素

选择器分组(多个选择器同时作用)：用逗号 ， 分开
优先级(在同一个css样式里面)：id选择器 > class(类)选择器 > 元素选择器


浏览器解析html和css
解析html文件加载到dom树(此时没有任何样式的)，同时解析css文件加载到dom树，再通过一系列解析做显示


css样式属性：
px：像素 %：相对容器大小偏移
width height
颜色： 3种方式rgba(,,,透明度);
颜色： color:背景色：background-color
文本：
字符间距： letter-spacing;
行高： line-height;
文本居中： text-align:center;
添加/去除下划线： text-decoration:underline/none;
缩进文本： text-indent
设置文本字母： text-tramsform:大小写;
展示编译格式： white-space:pre;
文本段落间距： word-spacing;
字体：
文本大小： font-size
字体： font-family
字体风格： font-style：斜体：italic
字体粗细： font-weight:100-900/bold(粗体);
超链接：
color,font-family
a:link{} 未访问的链接 
a:visited{} 已访问的链接
a:hover{} 当有鼠标悬停在链接上
a:active{} 被选择的链接
超链接顺序必须按照顺序来，如果来visited放在最后，执行完第一次以后就默认visited的样式
列表：
list-style-image将图象设置为列表项标志
list-style-position设置列表中列表项标志的位置
list-style-type设置列表项标志的类型


背景图片： background-image
不平铺：background-repeat:no-repeat;X轴铺满：background-repeat:xrepeat;
设置背景位置：background-position:X轴(center中间/left top),Y轴(center中间)
设置背景固定：background-attachment:fixed;

复合属性：
background: url() center norepeat;
控制背景图片大小
background-size:widthPX,heightPX;(css3的新属性)

overflow:scroll;div添加滚动条

行级元素和块级元素：
块级元素：<k>、<p>、<h>、<hr>、<table>、<ul>、<ol>、<form>等
独占一行，块级元素后面无法再放任何内容，有高和宽属性
一个网页的布局类似于一篇报纸的排版，先将网页分成大的模块，然后在模块里面分成小的模块，所以块级元素多用来作为容器、布局。

行级元素：<a>、<span>、<lable>、<input>、<textarea>、<br>、<img>等
在一行中只占自己的宽度，后面可以进行放元素，没有高和宽属性，高和宽属性根据元素的内容决定
行级元素也称为行内标签，内联标签，使用块级元素将网页结构搭建好了后，使用行级元素组织内容。

行/块级元素转换：
将块级元素转换为行级： display:inline;
将块级元素转换为行内块级元素(支持高宽)：display:inline-block; 例如：<img>
将行级元素转换为块级元素： display:block;
隐藏标签： display:none;(隐藏元素不会再占据原来的空间)
overflow:hidden(使用overflow会产生一个bfc)
visibility:hidden:(隐藏的元素看不见，但是还是占据原来的空间)

边框：
复合属性设置边框
border: 粗细 线型 颜色
圆角：
border-radius: 50%;


内边距：(塞海绵，容器内容针对容器做偏移)
容器的大小：
width + padding * 2 + border*2,改变内边距会影响盒子的大小
使用：
padding-方向/padding：

外边距(容器针对外容器做偏移)：
使用：
margin-方向/margin：
margin 0 auto;上下为0，左右居中
如果多个外边距作用于同一方向会取最大值(外边距重叠)
如果上层容器没有边框，设置margin-top会将外边距传递到上层容器


标准文档流(定位)：
指在不适用定位或者特殊的css排版的时候，各个元素的排列规则。css规定网页元素的默认排列方式
position:
relative(相对定位)：
1、不影响元素本身的特性。
2、破坏当前的文档流，但是不会脱离文档流。 
3、如果没有设置偏移量，元素是不会移动的。
4、偏移量：left/top/right/bottom;

fixed(固定定位):
不受文档流影响，固定在屏幕上
absolute(绝对定位):
1、 脱离文档流,默认漂浮在上一个元素的左上角。
(有父类的话是默认在父类的左上角,如果父类及以上为相对父类，那就会以定位父级作为父类)

2、文档范围 > html > body
3、设置绝对定位后，元素不会占据原来的空间，也不会影响标准文档流的排列
4、默认给元素设置一个display:inline-block;(将块级元素转换为行内块级元素(支持高宽))

static静态定位(默认的)
遵循标准文档流
z-index:设置定位层级，值大显示到前面

浮动：float:left/right
一行里面想要放多个块级元素使用
1、脱离文档流
2、漂浮到父类元素的边界
3、默认给元素设置一个display:inline-block;(将块级元素转换为行内块级元素(支持高宽))
清除浮动：clear:both(left/right)(不是取消浮动，只是分割上面浮动对下面元素的影响)