目录
1. CSS基础
1.1 引入CSS样式表
行内式（内联样式）
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
内部样式表（内嵌样式表）
<style>
div {
color: red;
font-size: 12px;
}
</style>
外部样式表（外链式）
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
2.选择器
标签选择器
h1{
color: red;
}
类选择器
.xx {
height: 100px;
clear: both;
background-color: bisque;
}
类选择器 多类名
.xx w{
height: 100px;
clear: both;
background-color: bisque;
}
id选择器
#xx {
margin: 0;
padding: 0;
}
3.css 字体样式
font-size属性用于设置字号
ont-family属性用于设置哪一种字体
ont-weight:字体粗细 400 等同于 normal，而 700 等同于 bold
font-style:字体风格
text-align:文本水平对齐方式
line-height:行间距
text-indent:首行缩进
text-decoration 文本的装饰
| 值 | text-decoration描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
4.复合选择器：
4.1 后代选择器
特点：空格隔开，只要是后代就行，包括孙子
.demo h3{ font-size:22px} 代表选中的是demo类中 H3 元素
4.2 子元素选择器
特点：只能是孩子，最近一级的元素，使用>符号。
.class>H3 {font-size:22px}
4.3 并集选择器
可以选择多组标签，同时为它们设置样式，使用逗号，
可以为任意形式的语法
.class,H3，.pig li {font-size:22px}
4.4 链接伪类选择器
按照LVHA的顺序编写。
.class:hover{font-size:22px}
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接，鼠标按下未弹起 */
a:link{
color:#333;
}
4.5 focus 伪类选择器
焦点选择器，有光标的
获取光标就变色；
input:focus{
color:#ddd
}
5.元素显示模式
以何种方式进行显示。如块元素和行元素。
块元素占用一行。是一种容器。
行元素可以放多个元素。a元素里可以放块元素。
- 块级元素:block;独占一行
- 行内元素:inline ;相邻行内元素在一行上，一行可以显示多个,不可以直接设置宽度高度
- 行内块元素 inline-block
5.1模式转换：
display:
:inline
:block
:inline-block
6. 结构性伪类选择器
css3.0 新增的伪类选择器
<div>ttt</div>
<div>ttt</div>
<div>ttt</div>
<div>ttt</div>
/* 配置整个html标签*/
:root{
background-color: skyblue;
}
/*
first-child:第一个节点的元素
last-child最后一个节点的元素
nth-child(n),父元素的第n个元素.默认从1开始
nth-last_child(n)父元素的倒数第n个元素
only-child：该父元素的唯一子节点
first-of-type:同类型第一个元素
last-of-type ：同类型最后一个元素
nth-child(n):n从0开始， even 偶数 odd 奇数
*/
div:nth-child(3){
background-color: #eb72a9;
}
7. 添加阴影
color:颜色
xoffset:横向上的偏移
yoffset:纵向上的偏移
radius:阴影的模糊半径，半径越大，阴影越模糊
8.CSS背景
css 背景
backgroud-color:默认透明
背景图片：
backgroud-image:url(path) path不加引号
图片显示样式
平铺：backgroud-repeat:
none
repeat 默认平铺
repeat-x
repeat-y
具体位置：backgroud-position: x y
背景附着：
backgroud-attachment:fixed/scroll
背景简写：
backgroud:transparent no-repeat url(path)
背景半透明：
backgroud:rgba(0,0,0,0.3)
9.三大特性：
- 层叠性
冲突的特点，使用最后声明的 - 继承性
内部元素可以继承外部元素的特性 - 优先性
继承
!important 最重要 样式属性后面添加 - 权重叠加
div ul li —> 0,0,0,3 权重值相加
10.盒子模型
盒子边框、盒子内边距、外边距
盒子边框（border）
border-width
border-style: dotted： 点状轮廓。 dashed： 虚线轮廓。 solid： 实线轮廓
border-color
内盒尺寸计算（元素实际大小）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
外边距合并
- 相邻块元素垂直外边距的合并，会取最大值
- 嵌套块元素垂直外边距的合并（塌陷）会取最大值
盒子模型布局稳定性
根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）
圆角边框
border-radius: 50%;
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
11.浮动float
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
11.1什么是浮动
float:left/right
浮动脱离了普通流，让块级元素一行显示。
- 浮：脱离标准流
- 漏：把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置
- 特：浮动——特性 float属性会改变元素display属性
overflow
当内容溢出元素时，如何显示
visible:默认值，显示到边框外
hidden：超出部分不可见
scroll:可以滑动查看
auto:类似scroll
11.2 清除浮动
父亲没有高度，所以高度为0，底部布局回向上挤压。
解决：
1.给父亲添加overflow元素，hidden auto
2.父级添加after元素
3.双伪元素
4.额外标签法：在父亲内部最后的位置添加一个块级元素
.clearPos{
cleart：both;
}
<div class=".clearPos"></div>
12.定位Position
- static 静态定位 默认
- absolute 绝对定位 如果父级有定位，以父级为准，如果没有，以屏幕左上角为准，不保留原来位置。
- relative 相对定位 相对于原来位置进行偏移 top right ,原来的位置还在
- fixed 固定定位 跟父级没有关系，不会跟随
定位在最上面 浮动在中间层 普通流在最底层
12.1 绝对定位的盒子水平居中对齐
left:50%
margin-left:-100px 自身宽度的一半
12.2 堆叠顺序
z-index : 1 数值越大，在顶层
只能运用于相对、绝对、固定定位里
13.css 精灵图
为了提高浏览器的响应速度（减少服务器接收和发送图片的次数），出现了精灵图。针对背景图片使用，把多个小背景组合成大背景。
精灵图：一张大图包含很多小图元素，通过坐标定位的方式显示里面的小图片。
字体图标：本质是文字，可以改变颜色，产生阴影，透明效果，旋转
下载：http://icomoon.io
阿里iconfont字库：
css 三角形
div{
width:0;
height:0;
border:10px solide white;
}
14、元素显示隐藏
14.1.display 显示
display: none 隐藏对象 隐藏之后，不再保留位置
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
14.2 visibility 可见性
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏；隐藏之后，继续保留原有位置
14.3 overflow 溢出(重点)
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
15.用户界面样式
15.1鼠标样式cursor
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
15.2outline轮廓线
outline :
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
15.3防止拖拽文本域resize
<textarea style="resize: none;"></textarea>
15.4 vertical-align 垂直对齐
vertical-align : baseline |top |middle |bottom
baseline:中线
top:顶线
middle:中线
bottom:底线
15.5 去除图片空白缝隙
- 原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决： - 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。
15.6 溢出的文字省略号显示
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
