CSS3-网页布局

一、CSS浮动概念

1.浮动：让元素脱离原本的文本结构，使其向左或向右漂浮起来

左浮动用的较多，浮动会影响原来的文本结构

float（left,right,none）

如果还有向左浮动的div，接着第一个浮动向右排列

2.清除其他浮动带来的影响：（自身可以再浮动）

clear（both,left,right）

绿色的div清楚了左浮动带来的影响

• 练习：用浮动做成横向的导航栏

二、相对定位与绝对定位

使用到的属性：position

移动属性：left,top；

2.1相对定位: relative

relative:相对定位，相对自己，在自己的位置偏移（左上角）

自己的位置还在，不会影响其他的文本结构位置

2.2绝对定位: absolute

absolute:绝对定位

1.默认情况下，0,0点是在浏览器的左上角

2.如果父级或者父父级使用了relative，absolute，fixed中的任何一个定位，那就以他们的定位为0,0点，都有的话以父级为准

3.绝对定位会脱离文本结构

2.3静态的：static

默认值

2.4固定定位：fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

**注意：**默认情况下，如果元素的父级元素（或者父父级）没有设置定位（relative,absolute,fixed）的话，那么自身的定位的（0，0）是在浏览器最左上角；如果元素的父级元素（或者父父级）设置了定位（relative,absolute,fixed）的话，那么自身的定位的（0，0）是依据该元素的父级元素（或者父父级）的左上角。

• 做一个w3school的横向导航栏：

三、其他属性

3.1 层级覆盖(z-index用于定位的情况下)

红色z-index值为21，所以会在上层进行一个覆盖，默认值为0

3.2 内容溢出

overflow：hidden隐藏超出的部分；scroll有下拉条；

默认情况下div以单词和中文词汇换行

div不设置高度，内容多大div就多高，

min-height：内容超过了div高度 ，div会自动增加高度（不设置，超出会默认隐藏）

3.3 其他

opacity：不透明度

outline：用法和border一样，位置在border之外（用border，一般就不同outline）

display：显示和隐藏（none）；块级用行级元素显示（display：inline），行级用块级元素显示（display：block）常用的是none和block

none不占用文本结构，消失了

宽度用百分比来划分布局！（不同电脑像素不同，高度无所谓，网页本身就带滚动条）

visibility：visible默认可见；hidden隐藏不见，但是还是占用文本结构，所以一般用display的none来隐藏

CSS中的hover只能操作自己。js是可以的

visibility：inherit继承父级的这个元素的属性

四、盒模型

margin：外边距

border：边框

padding：内边距

内容：content

4.1 margin距离

在块级元素中：左右是叠加、上下取的是最大值

在行级元素中：左右叠加，没有上下外边距

4.2 padding

用法和margin一样

padding慎用

内容大小不变，但会被挤下来

也会用、自己计划好网络布局

• **作业：**用浮动完成下方图示效果