网页布局总结
通过盒子模型,清楚知道大部分html标签是一个盒子。
通过CSS浮动,定位可以让每个盒子排列成为网页。
一个完整的网页,是标准流,浮动,定位一起完成布局的,每个都有自己的专门想法。
标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。
定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
元素的显示与隐藏
本质:让一个元素在页面中隐藏或显示出来
1.display显示隐藏
display属性用于设置一个元素应如何显示。
- display:none;隐藏对象
- display:block;除了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不在占有原来的位置
2.visibility显示隐藏
visibility属性用于指定一个元素应可见还是隐藏
- visibility:visible;元素可视
- visibility:hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置
如果隐藏元素想要原来位置,就用visibility:hidden;
如果隐藏元素不想要原来位置,就用display:none;(用处多 重点)
3.overflow溢出显示隐藏
overflow属性指定了如果内容溢出一个元素的框(超过其指定的宽度及高度)时,会发生什么
属性值 | 描述 |
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管是否超出内容,总显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |