网页布局总结+元素的显示与隐藏

网页布局总结

通过盒子模型，清楚知道大部分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	超出自动显示滚动条，不超出不显示滚动条