在做项目时，总是被css样式困扰，系统的梳理下：
css---层叠样式表
语法：
- 内联样式：样式写在标签对中，一般很少使用，尽量不要写在标签内，不利于代码维护。
- 内部样式：将样式集中写在head标签对中，适用于一个页面。
- 外部样式：将所有样式放在一个或多个.css为扩展名的外部样式表文件中，通过<link>标签将样式链接到HTML文档中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div style="width:100px; height:100px;background:red">内联样式</div>
<div id="div1" class="d1">内部样式</div>
<div id="div2">外部样式</div>
</body>
</html>style.css
#div2{
width:100px; height:100px;background:yellow;
}选择器：
通用选择器: *{...}===可以同时选中页面中的所有元素
标签选择器：div{...}===为元素定义统一样式
类选择器：.class{ }===使用“.”进行标识，为元素定义单独或相同的样式
id选择器：#id{...}===使用“#”进行标识，对应于文档中某一个具体的元素
复合选择器：div #box1{...}===可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
层级选择器：div p {...}
| 层级选择器 | 说明 |
| ancestor descentdant | 在给定的祖先元素下匹配所有的后代元素（儿子、孙子、重孙子、...） |
| parent > child | 在给定父元素下匹配所有的子元素（儿子） |
| prev + next | 匹配所有紧接在prev元素后的next元素（同桌） |
| prev ~ siblings | 匹配prev元素之后的所有siblings元素（兄弟） |
属性选择器：[属性名]或 [属性名=属性值] div[id]{...}
| 属性选择器 | 说明 |
| [class^="icon"] | 用来匹配属性值以”icon”开头的每个元素 |
| [class*=" icon"] | 用来匹配属性值中包含”icon”的每个元素 |
| [class$=" icon"] | 用来匹配属性值以”icon”结尾的每个元素 |
伪类选择器
| 伪类选择器 | 说明 |
|
| a:link | 未访问的链接 |
|
| a:visited | 已访问的链接 |
|
| a:hover | 鼠标划入的链接 | ：hover 非a标签在IE6下是无效的 |
| a:active | 选定的链接 |
|
| input:focus | 焦点 |
|
| div:not(.box) | 否定伪类 |
|
伪元素选择器
| 伪元素选择器 | 说明 |
|
| .demo::after | 内部的后边添加一个微元素，行级元素 | content:”内容” |
| .demo::before | 内部的前边添加一个微元素，行级元素 | content:”内容” |
示例如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
#div {
width: 100px;
height: 100px;
background: green;
}
#div::after {
content: '伪元素'
}
#div::before {
content: '伪元素';
background: red;
}
</style>
</head>
<body>
<div id="div">1111</div>
</body>
</html>效果图：
序号选择器:
| 类别 | 序号选择器 |
| 不区分类型 | :first-child 选中同级别中第一个标签 |
| :last-child 选中同级别中最后一个标签 | |
| :nth-last-child(n) 选中同级别中倒数第n个标签 | |
| :nth-child(n) 选中同级别中第n个标签 | |
| :only-child 选中同级别中唯一子元素标签 | |
| 区分类型 | :first-of-type 选中同级别中同类型第一个标签 |
| :last-of-type 选中同级别中同类型最后一个标签 | |
| :nth-of-type(n) 选中同级别中同类型第n个标签 | |
| :nth-last-of-type(n) 选中同级别中同类型倒数第n个标签 | |
| :only-of-type 选中同级别中唯一同类型子元素标签 | |
| 奇偶选择 | :nth-child(odd) 选中级别中所有奇数 |
| :nth-child(even) 选中同级别中所有的偶数 | |
| :nth-child(xn+y) x,y是用户自定义的 n为计数器,从0开始递增选择, 到元素的总个数停止 |
css优先级：
| 等级 | 类型 | 权重值 |
| 1 | important | >1000 |
| 2 | 内联样式 | 1000 |
| 3 | id选择器 | 100 |
| 4 | class选择器、伪类选择器、属性选择器 | 10 |
| 5 | 标签选择器、伪元素选择器 | 1 |
| 6 | *通配符 | 0 |
注意：选择器的权值加到一起, 大的优先; 如果权值相同, 后定义的优先，写在后边的样式会把写在前面的样式覆盖
css属性
| 属性类别 | 属性 | 描述 | 使用方法 |
| width& height | width | 宽 | width:100px |
| height | 高 | height:100px | |
| 背景相关属性 | background | 背景复合写法 | background:red url(1.jpg) no-repeat 50px 100px; |
| background-image | 背景图片 | background-img:url(1.jpg); | |
| background-size | 背景图片尺寸 |
| |
| background-repeat | 背景图是否重复 | background-repeat:no-repeat; | |
| background-color | 背景颜色 | background-color:red | |
| background-attachment | 设置背景是否随页面滚动 | scroll;默认值，背景图片会随页面一起滚动 fixed;背景图片不随页面滚动，会固定在页面的指定位置,一般这种背景都会设置给body | |
| background-position | 背景图位置 | background-position :50px 100px; | |
| opacity | 背景的不透明度 | 0-1；0表示完全透明，1表示完全不透明 | |
|
| background-origin | 背景图定位区域 |
|
| display& visibility | display | 显示 | display:none; 隐藏，不占用空间 display:inline; 行级元素，多个元素占一行，不可以设置宽高 display:block;块级元素，自己占一行，可以设置宽高 display:inline-block;行级块元素，可以多元素占一行，可以设置宽高 |
| visibility |
| visibility:visible;元素可见 visibility:hidden;元素不可见，但空间占着 | |
| 文本相关属性 | text-indent | 首行缩进 | text-indent:20px; |
| text-align | 文本对齐方式 | text-align:left;左对齐 text-align:center;居中对齐 text-align:right;右对齐 | |
| letter-spacing | 字符间隔 | letter-spacing:2px; | |
| text-transform | 字母大小写 | text-transform:uppercase;大写 text-tansform:lowercase;小写 text-transform:capitalize;首字母大写 text-transform:none;正常 | |
| text-decoration | 文本装饰 | text-decoration:none;无 text-decoration:underline;下划线 text-decoration:overline;上划线 text-decoration:line-through;穿过文本的划线 | |
| 字体相关属性 | font | 复合样式 | font: italic bold 12px arial, sans-serif; |
| font-family | 类型 | “微软雅黑” “宋体” | |
| font-size | 大小 | 20px | |
| font-weight | 粗细 | 100-900，700--bold，默认400--normal | |
| font-style | 风格 | italic斜体 normal正常 | |
| color | 颜色 | red, #ccc,... | |
| css盒子 模型 | padding | 内边距 | padding: 10px 20px 30px 50px; 上 右 下 左 padding:10px 20px;垂直 水平 |
| padding-top | 上内边距 | padding-top:10px | |
| padding-bottom | 下内边距 | padding-bottom:10px | |
| padding-left | 左内边距 | padding-left:10px | |
| padding-right | 右内边距 | padding-right:10px | |
| border | 复合样式 | border: 1px solid red; | |
| border-width | 边框宽度 | border-width:20px | |
| boeder-style | 风格 | dashed 虚线 solid 实线 | |
| border-color | 颜色 | red | |
| margin | 外边距 | margin: 10px 20px 30px 50px; 上 右 下 左 margin:10px 20px;垂直 水平 | |
| margin-top | 上外边距 |
| |
| margin-bottom | 下外边距 |
| |
| margin-left | 左外边距 |
| |
| margin-right | 右外边距 |
| |
| box-sizing |
| content-box标准盒模型 border-box怪异盒模型 | |
| css定位 | position | 位置 | 结合left,right,top,bottom属性使用 relative相对定位，相对于自己的初始位置，定位后空间不释放 absolute绝对定位，相对于最近已定位的祖先元素，如果没有最近已定位的祖先元素，则相对于body，定位后空间被释放 fixed 固定定位，位置相对于可视页面，定位后空间释放 |
| left | 左 | left:-10px; | |
| top | 上 | top:20px; | |
| right | 右 | right:30px | |
| bottom | 下 | bottom:20px; | |
| z-index | 设置元素的层级
层级：定位元素 > 浮动元素 > 文档流中的元素
| 当元素开启了定位以后，可以通过z-index来设置元素的层级 | |
| 浮动 | float | 浮动 | 脱离文档流，空间释放 float:left; float:right float:none |
| clear | 清除浮动 | clear:left clear:right clear:both | |
| 颜色 | color |
| color:red; color:#fff; color:rgb(255,0,0); color:rgba(255,0,0,0.4);0.4为透明度 |
| 光标 | cursor | 显示光标的类型 | cursor: pointer;光标呈现为指示链接的指针（一只手） cursor: move;此光标指示某对象可被移动。 cursor: crosshair;光标呈现为十字线 cursor: help;此光标指示可用的帮助（通常是一个问号或一个气球）。 cursor: wait;此光标指示程序正忙（通常是一只表或沙漏）。 |
| 列表 | list-style |
| list-style:none; |
| 处理内容溢出 | overflow | 控制内容溢出的情况 | overflow:visible;默认值 overflow:scrol;添加滚动条 overflow:auto;根据需要添加滚动条 overflow:hidden;隐藏超出盒子的内容 |
|
| transition |
| transition: 0.25s linear; |
|
| box-sizing | 绘制元素方式 | box-sizing: content-box;在宽度和高度之外绘制元素的内边距和边框 box-sizing: border-box;为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 |
css盒模型：内容+padding+border+margin
- 标准盒模型：width属性=内容宽度
- 怪异盒模型：width属性=内容宽度+padding+border==ie6浏览器及以下浏览器，不写doctype文档声明的时候。
标签元素划分：
| 标签元素划分 | 特点 | 标签 |
| 块级元素 | 独占一行，可以设置宽高 | ul、li、form、h1-h6、hr、p、div、table |
| 行级元素 | 不会独占一行，不可以设置宽高
| a、big、br、em、label、span、strong |
| 行级块元素 | 既可以跟其他元素共占一行，又可以设置宽高 | input、select、textarea、button、img |
块级元素与行级元素相互转换：
把行级元素转成块级元素===display:block
把块级元素转成行级元素===display:inline
转为行级块元素===dipslay:inline-block
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
