案例:学成在线网页总结
实际开发中不会直接用连接a而是用li包含链接(li+a)的做法
别忘记丢掉px像素单位!!!
记得转换行内块元素 display:block
制作网页之前分区 根据分好的区确定块需要什么容器
一、定位
可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边便宜则决定了该元素的最终位置。
1.定位模式
position
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
1.相对定位
元素在移动位置的时候是相对于它原来的位置来说的
position:relative;
- 相对于自己原来的位置移动的。top:100px;即向下移动100px,顶端与之前相比差了100px
- 保留原来的位置,别的盒子不能占
2.绝对定位(重点)
移动位置的时候相对于祖先元素
position:absolute;
- 如果没有祖先元素或祖先元素没定位则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定),则以最近一级的有定位祖先元素为参考移动位置
- 不再占有原先的位置(脱标)
3.子绝父相(超级重要)
子级是绝对定位的话父级要用相对定位
- 子级绝对定位不会占位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
- 父盒子需要加定位权限盒子在父盒子内显示
- 父盒子布局是需要占位置因此只能是相对定位
4.固定定位
固定到浏览器可视区的位置。页面滚动时候它不动。
position:fixed;
- 以浏览器的可视窗口为参照点移动
- 不随着滚动条滚动
- 固定定位不占有原先的位置
5.固定在版心右侧位置
小算法:
- 让固定定位的盒子left:50%,走到浏览器(版心)的一半位置
- 让固定定位的盒子margin-left:版心宽度一半距离,多走版心宽度的一半
6.粘性定位
相对定位和固定定位的混合(在一定范围内滚动后消失 然后滚出范围后又出现)
position:sticky;top:10px;(距离顶部10px的时候开始固定)
- 以浏览器的可视窗口为参照点移动元素
- 粘性定位占有原先的位置
- 必须添加top、left、right、bottom其中一个才生效
总结
- 是否占有原先位置(是否脱标)
- 以谁为基准点移动位置
- 子绝父相!!!!!
7.定位叠放次序
定位布局时盒子重叠,用此控制盒子的前后次序(z轴)
z-index:1;
- 数值为正负数0,默认auto,数值越大盒子越靠上
- 值相同时后来者居上
- 数值后面没有单位
- 只有定位盒子才有z-index属性,标准流和浮动没有。
8.定位拓展
(1)绝对定位盒子居中
加了绝对定位的盒子不能通过margin:0 auto;水平居中
position:absolute;
- left:50%
- margin-left:盒子自身宽度的一半
(2)定位特性
绝对定位和固定定位类似浮动
- 行内元素添加绝对或者固定定位可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位如果不给宽度高度,默认大小是内容的大小
(3)脱标的盒子不会触发外边距塌陷
浮动、绝对、固定都不会触发外边距合并的问题。
(4)绝对(固定)定位会完全压住盒子
浮动元素不同智慧压住它下面标准流的盒子,但是不会压住标准流盒子里面的文字(图片)
但是绝对(固定)定位会压住下面标准流所有的内容
二、网页布局
三、元素的显示与隐藏
1.display显示隐藏
display:none;隐藏对象(用的最多)
display:block;除了转换块级元素之外,还有显示元素的意思
display隐藏元素后不再占有原来的位置。
2.visibility显示隐藏
visibility:visible;元素可视
visibility:hidden;元素隐藏
隐藏元素后继续占有原来的位置。
3.overflow溢出显示隐藏
overflow:visible;不剪切
overflow:auto;在需要时剪切内容并添加滚动条
overflow:hidden;剪切
overflow:scroll;总是显示滚动条(不管有没有溢出)
一般我们会隐藏溢出内容,但是有定位的盒子慎用overflow:hidden 因为会隐藏多余部分。