CSS网页布局3
一、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慎用
内容大小不变,但会被挤下来
也会用、自己计划好网络布局
- **作业:**用浮动完成下方图示效果