目录
1. CSS基本语法
CSS是层叠样式表
1.1. CSS基本定义
CSS的定义方法时：
选择器{ 属性： 值； 属性： 值；}div{ width:100px; height:100px; background:gold;} - 选择器是将样式和页面元素关联起来的名称
- 属性是希望设置的样式属性，每个属性有一个或多个值
CSS引入页面的方法
- 在HTML中通过外联方法
- 内联式，通过标签的style属性，直接在标签上写样式
..
- 嵌入式： 通过style标签
1.2. CSS布局属性
| 属性 | 说明 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景颜色 |
| border | border: 1px solid gold;设置元素边框 |
| padding | 设置内容和元素边框距离 |
| margin | 元素和容器的距离， margin: 10px auto 0居中 |
| float | 设置元素浮动 |
1.3. CSS文本常用属性
常用的应用文本的css样式
| 属性 | 说明 | 值 |
|---|---|---|
color | 文本颜色 | 颜色值 |
font-size | 文字大小 | px值 |
font-family | 文字字体 | 字体名称 |
font-style | 字体是否倾斜 | normal:不倾斜italic：倾斜 |
font-weight | 字体是否加粗 | normal:不加粗bold:加粗 |
font | 同时设置上面的属性 | 加粗 字号 /行高 字体 |
line-height | 文字的行高 | px值 |
text-decoration | 文字的下划线 | none去除下划线 |
text-indent | 文字的首行缩进 | 首行缩进24px |
text-align | 文字的水平对齐方式 | center字体居中 |
2.CSS选择器
2.1. 标签选择器
- 直接通过html中的标签名字来选择对于的元素
- 选择面太广，很少用
/* 直接选择html中所有的div元素 */div{ color: red;} 2.2. id选择器
- 在html中设置一个id，在css中引用设置它
- id只能是一个全局唯一样式
- 一次只能选择一个元素
- 很少用
#box{ color: pink;} 666
2.3. 类选择器
- 为了补偿id选择器的缺点，可以一下子设置多个元素样式
.lei{ color: red;}.indent{ text-indent: 20px;} 12345
2.4. 层级选择器
- 主要用于选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用
.list{ height: 30px;}/* 这是一个两层的层级选择器 */.list a{ text-decoration: none; color: #333;}.list .num{ color: #333;} 2.5.组选择器
- 多个选择器，有相同的样式设置，可使用组合选择器
/* 设置3个类的公共属性 */.box1,.box2,.box3{ font-size: 14px; text-indent: 28px;}/* 然后在使用类选择器个性化 */.box1{ color: red;}.box2{ color: green;}.box3{ color: orange;}/* 更多设置形式 *//* 匹配所有的p,b,i,span元素 */p,b,i,span { color: green;} 345
2.6. 伪类和伪元素选择器
- 常用的伪类选择器为hover，表示鼠标悬停在元素上时的状态
/* 鼠标放到list类下的a时，会变色 */.list a:hover{ color: gold;} - 伪元素选择器有before和after，它们可通过样式在元素中插入内容
/* 块级首行 *//* 在p,div，body等块级元素才有效果 */::first-line{ color: red;}/* 块级首字母 */::first-letter{ color: red;}/* 文本前插入内容 *//* 变成：点击百度 */a::before{ content: '点击-';}/* 文本后插入内容 *//* 百度搜索 */a::after{ content: '搜索';} 3. 块元素、内联元素和内联块元素
3.1. 块元素（行元素）
- 块元素，也称为行元素，比如
div,p,ul,li,h1-h6,dl,dt,dd等都是块元素 - 它的行为有：
- 支持全部的样式
- 如果没有设置宽度，默认宽度是父级宽度的100%
- 盒子占据一行，即使设置了宽度
...这是一个div元素这是二个div元素这是三个div元素
3.2. 内联元素（行内元素）
- 内联元素，也是行内元素，布局中常用的有
a, span,em,b,strong,i等都是行内元素 - 他们在布局中的行为是：
- 支持部分样式(不支持宽，高，margin上下，padding上下)
- 宽高由内容决定
- 盒子挤在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用
text-align属性设置子元素水平对齐方式，用line-height设置垂直对齐方式
...
解决内联元素之间的间隔问题
- 去掉内联元素之间的换行
- 将内联元素的父级设置font-size为0，然后再设置自身的font-size
这是一个a标签这是二个a标签
3.3. 内联块元素
- 结合了块元素和内元素的优点，通过
display转换 - 他们的行为是：
- 支持全部样式
- 如果没有设置宽高，由内容决定
- 盒子并在一行
- 代码换行，由间距
子元素是内联块元素，父元素可以通过text-align设置水平对齐方式，用line-height设置垂直对齐
display属性
| 属性 | 说明 |
|---|---|
| none | 隐藏不占用位置 |
| block | 块元素 |
| inline | 内联元素 |
| inline-block | 内联块元素 |
3.4. 实例： 设置导航栏
4.CSS表格
.goods{ /* 通用属性 */ width: 300px; height: 300px; text-align: center; /* 设置的单元格相邻边是否被合并 separate: 单元格边框独立，默认 collapse： 边框合并（变成实心的实现） */ border-collapse: collapse; /* 设置单元格边框边距，只有在border-collapse为separate情况下才有用 */ border-spacing: 10px; /* 标题方位 top, bottom */ caption-side: top; /* 空内容单元格的是否显示,hide */ empty-cells: hide; /* 表格的排版方式 auto: 内容过长的时候，会拉伸整个单元格，挤压其他单元格 fixed： 内容过长时，不会拉伸，会换行处理 */ table-layout: fixed;}/* 设置表头的背景颜色 */.goods th{ background-color: green; color: #ffffff;} | 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 25 |
| 李四 | 女 | 34 |
| 王五 | 男 | 43 |
5.盒模型
5.1. 什么是盒子模型
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是现实盒子的比喻，帮组我们设置元素对应的样式
- 盒子的边框：
border - 盒子内的内容和边框的间距：
padding - 盒子和盒子之间的间距：
margin
5.2设置边框
border：长度值或者百分比border-top/bottomborder-left/right
.box{ width: 200px; height: 100px; background-color: red; /* 设置顶部边框的宽度，颜色 */ /* border-top-width: 10px; border-top-color: #000; */ /* 设置线的样式，实线solid， 虚线dashed， 点线dotted */ /* border-top-style: solid; */ /* 全部一下子来写 */ /* border-top: 10px solid #000; */ border: 10px solid orange;} 
5.3. 盒子内边距
padding：长度值或者百分比padding-top/bottompadding-left/right
.box{ padding: 20px; /* 上，右，下，左 */ /* padding: 10px 20px, 10px, 20px; */} 
5.4. 盒子外边距
根据body文档的左上角为起点
marginmargin-top/bottommargin-left/right
注意
- 当两个垂直外边距相遇时，它们将形成一个新的外边距，这个新的外边距长度等于两个发生合并的外边距的高度中的最大值，解决方法是
- 只设置
margin-top,不设置margin-bottom - 将元素浮动或者定位
- 盒子水平居中方法 :使用
auto平分水平距离
.box{ margin: 100px auto;} 5.5. 盒子尺寸大小
盒子宽度 = width + 左右padding值 + 左右的border值
盒子高度 = height + 上下的padding值+ 上下的border值.box1,.box2,.box3{ width: 50px; height: 50px; background-color: gold; margin: 20px;}.box2,.box3{ border: 50px solid #000;}.box3{ padding: 50px;} 123
如何解决盒子尺寸动态变化的问题？
- 使用
indent： 首行缩进 - 文本垂直居中
line-height - 文本水平居中
text-align - 盒子水平居中
margin: 10px auto;
假设设置一个高宽45*400px的盒子
.box2{ width: 400px; height: 50px; border-top: 1px solid #f00; border-bottom: 3px solid #666; font-size: 20px; font-family: "Microsoft Yahei"; text-indent: 15px; /* 让文字居中 */ line-height: 50px;} 
5.6. 盒子元素溢出
5.6.1. margin-top塌陷
在两个盒子嵌套的时候，内部的盒子设置的margin-top会加到外部的盒子上（只有外部的盒子有margin-top），导致内部的盒子margin-top设置失败，解决方法如下：
- 外部盒子设置一个边框
- 外部盒子设置
overflow: hidden - 外部盒子使用伪元素类(常用)
/* 类似于加边框 */.clearfix:before{ content: ""; display: table;}/* */ 5.6.2. 元素溢出
当子元素的尺寸超出父元素的尺寸时， 需要设置父元素显示溢出的子元素的方式，设置的方法通过overflow属性设置
| 属性值 | 说明 |
|---|---|
visible | 内容不会被修剪，会呈现在元素框外部，默认 |
hidden | 内容会被修剪，并且其他内容不可见，此属性还有清除浮动、清除margin-top塌陷的功能 |
scroll | 内容会被修剪，通过滚动条显示 |
auto | 如果内容被修剪，就通过滚动条显示 |
inherit | 规定应该从父元素继承overflow属性的值 |
什么是溢出
.con{ width: 500px; height: 300px; border: 1px solid #333; margin: 50px auto;}.box{ width: 400px; height: 600px; background-color: gold;} 以下这个图就是溢出
设置溢出方法
.con{ width: 500px; height: 300px; border: 1px solid #333; margin: 50px auto; overflow: scroll;} 
6. CSS浮动
文档流
文档流，是指按照html标签编写的顺序一次从上到下，从左到右排列，块元素占一行，行内元素在一行只能从左到右排列，先写的先排，后写的后排，每个盒子都占据自己的位置， 浮动，定位可以打破这种规律
6.1. 浮动的特性
- 浮动元素有左浮动(
float:left)和右浮动(float:right) - 浮动的元素会向左或者向右浮动，直到碰到了父元素边界，浮动元素，或者未浮动元素才会停下来
- 相邻浮动的块元素可以并在一行，超出父级宽度就换行
- 浮动会让行内元素或者块元素自动转为行内块元素
- 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果--也就是说浮动元素像是浮起来一样，后面的元素就占据了浮动起来空的位置，但是其中的文字会避开浮动的元素 浮动相当于飘起来了，到了天上，空出来的位置就会被占据（但是文字不会，从而形成文字饶图）
- 父元素内整体浮动的元素无法撑开父类，需要清除浮动
- 浮动元素之间没有垂直
margin的合并
浮动特性1-5
/* 碰到父元素边界停下 */.box1{ float: left;}/* 碰到父元素边界停下 */.box2{ float: right;}/* 碰到box1浮动元素边界停下 */.box3{ float: left;} 
6.2. 清除浮动
- 父级上增加属性
overflow: hidden（在定位的时候会有问题 ） - 在最后一个子元素的后面加入空的
div，给它样式属性clear: both(不推荐) - 使用成熟的清浮动样式类(推荐)
/* 既可以清除margin-top的bug，也可以清除浮动 */.clearfix:after, .clearfix:before{ content: ""; display: table;}.clearfix:after{ clear: both;}.clearfix{ zoom: 1;} 清除浮动的用法(在父级上添加)
7. 定位
7.1. 定位简介
可以使用CSS的position属性来设置元素的定位类型，position的设置项如下：
relative： 相对定位元素，元素所占的文档流位置不变，元素本身相对文档流进行位置偏移absolute： 绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，就相当于body元素定位fixed： 固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为为漂浮在文档流的上方，当有滚动条的时候，元素会跟随滚动条一直显示static: 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性inherit: 从父元素继承position的值
7.1.1. 相对定位
.con{ width: 400px; height: 400px; border: 1px solid #000; margin: 100px auto 0;}.con div{ width: 200px; height: 100px; margin: 20px; background-color: gold; font-size: 40px; text-align: center; line-height: 100px;}.box01{ position: relative; top: 80px; left: 50px; background-color: green;} 
7.1.2. 绝对定位
.box01{ position: absolute; top: 50px; left: 50px; background-color: green;} 
我们也可把外部容器设置为定位的起点
.con{ width: 400px; height: 400px; border: 1px solid #000; margin: 100px auto 0; position: relative;}.box01{ position: absolute; top: 50px; left: 50px; background-color: green;} 
7.1.3. 固定定位
- 跟随滚动框走
.box01{ position: fixed; top: 50px; left: 50px; background-color: green;} 7.2. 定位元素的特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
7.3. 定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
7.4. 典型的 定位布局
- 固定在顶部的菜单
- 水平垂直居中的弹框
- 固定的侧边的工具栏
- 固定在底部的按钮
7.5. 浮动定位的范例
1. 导航栏
.menu{ width: 950px; height: 40px; margin: 50px auto 0; list-style: none; background-color: #55a8ea; padding: 0; position: relative;}.menu li{ float: left; width: 100px; height: 40px; text-align: center; line-height: 40px;}.menu li a{ font-size: 14px; font-family: 'Microsoft Yahei'; color: #fff; text-decoration: none;}.menu .active{ background-color: #00619f;}.menu li:hover{ background-color: #00619f;}.menu .new{ width: 30px; height: 30px; background: url(new.png) no-repeat; position: absolute; left: 433px; top: -20px;}.menu .new:hover{ background: url(new.png) no-repeat;} 
2. 新闻列表
新闻标题
- 特征布局：新闻列表所需要的至少2016-12-25
- 特征布局：新闻列表所需要的至少2016-12-25
- 特征布局：新闻列表所需要的至少2016-12-25
- 特征布局：新闻列表所需要的至少2016-12-25
- 特征布局：新闻列表所需要的至少2016-12-25
- 特征布局：新闻列表所需要的至少2016-12-25
.news_list_con{ width: 600px; height: 290px; border: 1px solid #ddd; margin: 50px auto 0; overflow: hidden;}.news_list_con h3{ height: 50px; width: 560px; border-bottom: 1px solid #ddd; margin: 0px auto;}.news_list_con h3 span{ display: inline-block; height: 50px; border-bottom: 2px solid red; font-size: 18px; line-height: 50px; font-family: 'Microsoft Yahei'; padding: 0 15px;}.news_list_con ul{ list-style: none; padding: 0; width: 560px; height: 238px; margin: 7px auto 0;}.news_list_con ul li{ height: 38px; border-bottom: 1px solid #ddd;}.news_list_con ul a{ float: left; height: 38px; line-height: 38px; font-size: 14px; font-family: 'Microsoft Yahei'; text-decoration: none; color: #000;}.news_list_con ul a:before{ content: ".";}.news_list_con ul a:hover{ color: red;}.news_list_con ul span{ float: right; height: 38px; line-height: 38px; font-size: 14px; font-family: 'Microsoft Yahei'; color: #000;} 
8. CSS背景
页面上放图片的方法
| 方法 | 说明 |
|---|---|
| 直接通过src | 占用空间 |
通过backgound-image | 图片不占用空间，只是作为背景，可以在上面写字.. |
backgound-image属性解释
background是CSS中很重要的一个属性，它复制给盒子设置背景图片和背景颜色的，background是一个复合属性，他可以分解成如下几个设置项
backgound-color： 设置背景颜色image postion color repeat
backgound-image： 设置背景图片地址backgound-repeat： 设置背景图片如何重复平铺repeat(default),repeat-X,repeat-Y, no-repeat
backgound-position： 设置背景图片位置水平(left/right/center) 垂直(top/bottom/center)同时设置:必须在no-repeat情况下使用水平偏移(10px) 垂直偏移(0px)：参考点是 父元素的左上角
backgound-attachment： 设置背景图片是固定还是随着页面滚动条滚动fixed：不随着滚动
.box{ width: 200px; height: 200px; border: 1px solid red; background-image: url(news.png);}