3.4 CSS定位
概要
- CSS定位
- CSS浮动
3.4.1 CSS定位
1、CSS定位
改变元素在页面上的位置
2、CSS定位机制
- 普通流：元素按照其在HTML中的位置顺序决定排布的过程
- 浮动
- 绝对布局
3、CSS定位属性：
| 属性 | 描述 |
|---|---|
| position | 把元素放在一个静态的、相对的、绝对的、或固定的位置中 |
| top | 元素向上的偏移量 |
| left | 元素向左的偏移量 |
| right | 元素向右的偏移量 |
| bottom | 元素向下的偏移量 |
| overflow | 设置元素溢出其区域发生的事情 |
| clip | 设置元素显示的形状 |
| vertical-align | 设置元素垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
1、CSS position属性：
| position属性 |
|---|
| static |
| relative |
| absolute |
| fixed |
3.4.2 CSS定位-浮动
1、浮动：
float属性可用的值：
- left：元素向左浮动
- right：元素向右浮动
- none：元素不浮动
- inherit：从父级继承浮动属性
2、clear属性：
去掉浮动属性（包括继承来的属性）
clear属性值：
- left、right：去掉元素向左、向右浮动
- both：左右两侧均去掉浮动
- inherit：从父级继承来clear的值
3.4.3 CSS定位-浮动的应用
3.5 CSS选择器
概要
- 元素选择器
- 选择器分组
- 类选择器详解
- ID选择器详解
- 属性选择器详解
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
元素选择器
1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器
例如： h1{]、a{}
选择器分组
1、例如：
h1、h2{}
2、通配符
* {}
类选择器
1、类选择器允许以一种独立与文档元素的方式来指定样式
例如： .class {}
2、结合元素选择器
例如： a.class{}
3、多类选择器
ID选择器：
ID选择器类似于类选择器，不过也有一些重要差别
例如： #id{}
2、类选择器和ID选择器区别
- ID只能在文档中使用一次，而类可以多次使用
- ID选择器不能结合使用
- 当使用js时候，需要用到id
属性选择器
1、简单属性选择
例如： [title]{}
2、根据具体属性值选择
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素
例如： a[href="http://blog.devtao.com"] {}
3、属性和属性值必须完全匹配 4、根据部分属性值选择
后代选择器
1、后代选择器：
后代选择器可以选择作为某元素后代的元素
子元素选择器
1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
例如： h1>strong {};
相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同父元素
例如： h1 + p {};
3.6.1 CSS常用操作
概要
- 对齐操作
- 尺寸操作
- 分类操作
- 导航栏
- 图片操作
1、对齐操作
1、使用margin属性进行水平对齐 2、使用position属性进行左右对齐 3、使用float属性进行左右对齐
3.6.2 分类
1、尺寸操作
| 属性 | 描述 |
|---|---|
| height | 设置元素高度 |
| line-height | 设置行高 |
| max-height | 设置元素最大高度 |
| max-width | 设置元素最大宽度 |
| min-width | 设置元素最小宽度 |
| min-height | 设置元素最小高度 |
| width | 设置元素宽度 |
2、分类操作
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他的浮动元素 |
| cursor | 规定当指向某元素之上时显示的指针类型 |
| display | 设置是否及如何显示元素 |
| float | 定义元素在哪个方向浮动 |
| position | 把元素放置到一个静态的、相对的、绝对的、固定的位置 |
| visibility | 设置元素是否可见或不可见 |
3.6.3 导航栏
1、垂直导航栏
2、水平导航栏