前言
嗨，老伙计们，你们好吗？我是lucky赵赵，请大家多多指教呀！
菜鸟赵赵重走前端之路，今天学CSS！
不喜勿喷，不喜勿喷，接受任何善意的指教 ^ _ ^
css
一 样式表引入方式
1.行内样式表
给标签直接设置style属性
2.内部样式表
嵌套在头部标签内部
xml
<head>
<style type="text/css">
样式
</style> </head>3.外部样式表
链接引入 <link rel="stylesheet" type="text/css" href="index.css">
二 基础选择器
作用：找标签
1.标签选择器
通常和类搭配使用
例如：.top a 表示找到类名为top的标签里的后代a
2.类选择器
类名前打点，不能以数字开头，尽量有意义，一个标签里可以引入多个类名，一个类名可以使用多次（类名的复用性）
3.id选择器
CSS里不用，在js中使用，具有唯一性
4.通配选择器
适用所有标签，大型项目中影响性能，少用
三 字体样式
1.普通使用
css
.garden{
width: 300px;
height: 200px;
text-align: center;
color: red;
/*font-weight: bold;
font-size: 20px;写的是单独字体声明时，line-height写在上面下面都能生效*/
line-height: 200px;/*不生效*/
font: bold 18px "黑体";
line-height: 200px;/*生效*/
text-decoration: underline;
background: #ccc;
}
<div class="garden">
掘金
</div>2.自定义字体样式
css
声明一种字体
@font-face{
font-family:字体的名字;
src:url(字体原文件路径);//ttf结尾的文件
}
只有调用后才会生效
font-family:字体名字;//字体名字要与声明时的字体名字一致四 文本样式
注意：color 4种颜色取值方式
text-align 取值 left right center
letter-spacing 字之间的间距
word-spacing 非块级标签之间的间距 设在他们的父级上
text-indent 对行内标签不生效，因为行内标签的宽高不生效，所占位置由内容撑开的
五 CSS特性
1.css样式的嵌入分三种：
行内式：放在html文件的head头部标签中。
内嵌式：（也叫嵌入式，或内联式），也放在html文件的head头部标签中。
外联式：（也叫做外嵌式，或外链式），写在css文件中的执行代码，由 <link rel="stylesheet" href="xxx.css" type="text/css''>引入
2.层叠性
层：可以通过不同选择器，给同一个标签设置多个样式
叠：有多层样式时，不同的层里有相同的样式名，后一个替换前一个
css
css：
//第一层
div{
font-size:40px;
color：red； //相同的样式名
}
//第二层
.one{
text-align:center;
background:green;
color:yellow;//相同的样式名
}
最终div上使用的样式有
{
font-size:40px;
text-align:center;
background:green;
color:yellow;
}
<div class="one">
div里的文字
</div>3.继承(子标签继承父标签样式)
子级/后代继承父级/祖先里的关于font，对齐方式，字的颜色等样式
如果子级没有就用父级的，子级有就用子级自己的
css
.wrap{
text-align: right;
}
.wrap p{
text-align: center;
}
<div class="wrap">
<h1>标题</h1> //自己没有对齐方式，继承父级的右对齐
<p> //p有自己的对齐方式，居中对齐
p里面的文字
</p>
</div>4.选择器权重/优先级
标签1分，类10分，id 100分，行内1000分 ， !important 最高，跟在一条样式声明的后面
六 display 标签的显示方式
1.取值
①display：block；
把行内，行块标签转换为 块级标签
将标签显示在页面上
②display:inline-block(相当于float的作用)
把块级，行内标签转换为 行块标签
③display:inline;
把块级，行块标签转换为 行内标签
④display:none;(在display的属性中层级最高，不会被float覆盖)
将标签在页面上隐藏
2.总结将标签在页面上隐藏的方法
| 样式 | 效果 | 特点 | 使用场景（默写） |
|---|---|---|---|
| visibility：hidden； | 标签不可见/隐藏 | .......................保留 | 使用少，一般用于抽奖时已抽取的方块不可见 |
| display:none; | 隐藏标签 | 标签的原位置消失 | 底部广告，侧边栏内容，二级菜单，一般配合js做特效 |
| opacity:0; | 标签完全透明/隐藏 | .......................保留 | 配合c3过渡/js定时器，实现淡入淡出的效果(范围0-1，1为完全不透明) |
| overflow:hidden | 溢出的部分隐藏 | 标签的原位置消失 | 父级无定高，子级无定位时用它扩展父级盒子高度，起到清除浮动的作用。确保子级内容不超出父级，不影响布局 |
注意：overflow：hidden；将标签里溢出的内容部分隐藏，并非是标签本身隐藏
七 行高 line-height
控制行间距
一行时，将行高和高设为一样的值，达到内容上下居中的效果，
多行时，将行高设为高/行数，实现每行间距相等效果，
也可以根据需要设置行高值，调整行间距
八 background背景
有一说一，关于它的内容其实还蛮多，我就写一下我日常用的最多的吧！
1.background-color
给盒子增加背景颜色 background-color: rgb(0,0,0)
2.background-image
给盒子增加背景图 background-image: url()
3.background-repeat
设置背景图是否重复 background-repeat：no- repeat
其他值
repeat：重复加载整个盒子 repeat-x：水平重复 repeat-y：垂直重复
4.background-attachment
设置背景图片是否要随着页面或者盒子的滚动而滚动
建议background属性的设置，综合设置，不要分开写 例如：background: url() no-repeat center top scrol red;
九 布局
1.本质
把标签/盒子放到合适的位置，再把相应的内容放到合适的盒子里
2.盒模型
解决合适的位置，包含5个常用样式：width宽，height高，border边框，padding内容到边框距，margin边框到边框距
3.width宽，height
块级标签：默认继承父级的宽，高度默认由内容撑开，可以重新设置宽高且生效
行块标签：默认由内容撑开宽高，可以重新设置宽高且生效
行内标签：默认由内容撑开宽高，可以重新设置宽高但不生效
4.标准文档流(浮动、绝对定位、固定定位可以脱离标准文档流)
指浏览器上展示的顺序和编辑器一致
块级标签：从上往下
行内/行块：从左往右
十 边框 border
1.常用简写模式
css
border:宽度 风格 颜色;/*常用的简写模式，没有顺序要求*/
例如：
border:1px solid #000;2.分样式
①border-style 边框风格，必须写，常用取值
solid实线，dotted点线，dashed虚线，double双线，none没有（默认值）
②border-width 边框宽度，一般会写，不写的默认值是1px
③border-color 边框颜色，一般会写，不写的默认值是#000 transparent透明的
总结：border-style分样式后面可以取1-4个值，1个值，4边一样，多个值按照上右下左的顺序取值，没有的和对边一样
3.各边单设的简写样式
border-top/right/bottom/left,取值是风格，宽度，颜色
十一 内边距padding
1.定义
内容到边框的距离
2.取值
简写：padding：1-4个值；1个值，4边一样，多个值按照上右下左的顺序取值，没有的和对边一样
分样式: padding-left/right/bottom/top
不可为负值
3.盒子尺寸
添加padding之后，会撑大盒子，加样式box-sizing：border-box；
盒子的模型有两种，它们尺寸分别为：
①标准盒模型(内容盒模型)：
盒子的实际宽度 = width + 左右的padding + 左右的边框
盒子的实际高度 = height+ 上下的padding + 上下的边框
②边框盒模型/IE盒模型
盒子的实际宽度 = width （ 内容的宽度+左右的padding + 左右的边框）
盒子的实际高度 = height（内容的高度+上下的padding + 上下的边框）
十二 外边距margin
1.引入
盒子在页面中实际占据的位置（宽高）= 盒子尺寸 + 外边距margin
2.定义
盒子和盒子之间的距离
3.取值
简写：margin：1-4个值；1个值，4边一样，多个值按照上右下左的顺序取值，没有的和对边一样
分样式: margin-left/right/bottom/top
正负皆可
4.让盒子水平居中
①要居中的标签是块级(block)方式展示
②外层盒子一定要设置宽度
③左右的margin值必须是auto
5.img和背景图的使用场景
①img 占位置 调整位置使用margin padding 渲染快 页面一打开就要看到的图建议使用img引入
②背景图 不占位置 调整位置使用background-position 文字可以显示在背景图的上面
6.margin合并问题
①条件：垂直方向，中间无遮挡（相邻的兄弟关系，紧贴的父子关系）
②效果：空白距离为较大值
③解决方案：相邻的兄弟关系的情况，只要把margin设给一个标签即可
？紧贴的父子关系：a.给父级加边框 b.给父级加padding值 c.在父级内加overflow
十三 浮动（默写）(只要是用了浮动的地方都需要清除浮动)
1.语法
样式名：float 取值：none（默认值） left（左浮动） right（右浮动
2.特点
①脱离标准文档流，块/行块/行内标签都可以加float，加了浮动的标签会变成一个行块标签
②用法：外层标准文档流父盒子 + 内层浮动的盒子，一般内层浮动的盒子不会超出父级，兄弟之间最好保持一致，实现同一行展示
3.清除浮动
设置了向左浮动的元素会自动紧靠在左边，而右边会留出一块空白，如果该元素后的元素宽度足够小，就会跟在该浮动元素的后面，因此需要清除浮动，设置了clear：both的元素会忽略掉上一个的浮动声明，不去填补浮动元素后面空出的位置
1)方法一：给父级加固定的高
优点：简单易行
缺点：内容数量不定的时候，会溢出
适用场景：内容数量确定
2)加空的div
<div class="clear"></div>,加样式 .clear{clear:both}
clear:both清除浮动的原理：该属性设置为both表示清除该元素周围的浮动，但要注意：在清除浮动时，只有在设置了清除浮动的元素之前有其他的浮动元素，清除浮动才会生效，否则不生效(浏览器是按顺序渲染元素的,所以设置清除浮动的元素一般都放在需要清除浮动元素的最后一个位置)
样式名clear 表示清除 取值 left：清除左浮动 right：清除右浮动 both：清除两边的浮动 none：不清除（默认值）常用取值是both
空div加在浮动结束的位置
优点：适用性好
缺点：找到结束浮动的位置，页面代码冗余（空div多，可以在父级里加伪类处理）
适用场景：所有需要清除浮动的情况都可以
css
理解
*{margin:0px;padding:0px;}
li{list-style: none;}
.wrap{
width:500px;
border:2px solid red;
}
.wrap li{
width:50px;
height: 50px;
background: #ccc;
margin:10px;
float: left;
}
.two{
width:200px;
height: 100px;
background: red;
float: left;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
}
xml
<ul class="wrap clearfix">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<!-- <div class="clear"></div> 等价.clearfix:after 产生的效果-->
</ul>
<div class="two">
div1111
</div>3)父级无定高时，父级中加样式overflow：hidden
优点：简单易行
缺点：子元素有定位的情况下会失效
适用场景：无定位时可用
十四 overflow
1.作用
处理溢出父级的内容
2.取值
visible 可见 （默认值）
hidden 隐藏 常用，可用于扩展盒子高度
auto 自动生成滚动条 一般只有纵向滚动条查看溢出内容 常用
scroll 生成横向和纵向滚动条（不常用）
3.针对文本溢出，以...展示
css
.text{
white-space:nowrap;/*让文字一行展示，不换行*/
overflow:hidden;/*溢出部分隐藏*/
text-overflow:ellipsis;/*溢出的文本显示为...*/
}
<div class="text">
适用场景：div里的文字，文字长度不确定，例如需要经常更换的新闻标题等，短的直接显示，长的超出div宽度的就变为省略号...
</div>十五 定位
1.作用
调整标签的位置
2.取值
样式名：position
| 取值 | 参照物 | 原位置 | 适用场景 |
|---|---|---|---|
| relative 相对定位 | 自身原本的位置 | 保留，未脱离标准文档流 | 调整标签本身如图片和文字对齐 |
| absolute绝对定位 | ①离他最近，有定位的祖先元素 ②没找到①参照浏览器 | 消失，脱离.............. | 二级菜单，轮播图等 |
| fixed固定定位 | 浏览器 | 消失，脱离............. | 顶部搜索导航，侧边栏，广告栏 |
共同点：都可以设置偏移方向（top right bottom left）和偏移量（px，正负皆可），绝对定位和固定定位的标签会自动转换为行块
3.定位后重叠问题(z-index用法总结)
1)定义：
z-index 只适用于元素有定位的情况，表示层级 数值越大 层级越高 展示的位置越靠前。
2)用法：
①同级关系：
z-index值较大的元素将叠加在z-index值较小的元素之上 （值可以为负数）
z-index值相同时，按照文档流顺序(html在未添加css样式时原本的特性顺序)排列
②父子关系：
如果设置了父元素的z-index，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方
③同级元素下的子元素关系
同级元素的z-index生效，那么其子元素覆盖关系由父元素决定，
（父元素z-index值大的覆盖父元素z-index值小的 子元素在各自父元素的上方）
十六 移入时的鼠标样式
1.样式名
cursor
2.取值
重点：pointer 移入之后边小手（超链接的标志）
其它取值用时可以查
十七 轮廓线
1.样式名
outline
2.取值
重点：在input获取光标时展示，一般不用它，所以设置为outline：none；
css
语法：
outline:outline-color outline-width outline-style;
取值及用法同border十八 行内/行块标签的垂直对齐方式
1.样式名
vertical-align(只能给img标签图片中设置，其他无效)，且必须和行高一起用
2.取值
常用：middle 中线对齐
其它取值：baseline基线对齐（默认） top（顶线对齐） bottom（底线对齐）
十九 精灵图
1.定义
将常用的小的背景图整合到一张大图上（UI的活儿，但如果你自己可以做，就更好了），做成一张精灵图(雪碧图)
2.作用
①减少项目中图片素材所占的空间大小，加快整个项目加载速度
②减少浏览器向服务器发送图片请求的次数，提升加载速度，优化用户体验
3.用的的css样式
xml
<!DOCTYPE html>
<html>
<head>
<title>精灵图</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
li{list-style: none;
.list li>i{
display: block; /*①要标签是宽高能生效的块级/行块*/
width:25px; /*②要给标签给宽高*/
height: 25px;
border:1px solid green;
margin:13px auto; /*③调整标签的位置*/
background: url(taobao.png) 0px -43px;
/*④引入精灵图，注意定位，一般取负值*/
}
</style>
</head>
<body>
<ul class="list">
<li>
<i></i>
这里有个瓜
</li>
</ul>
</body>
</html>