网页布局综合总结 与 显示和隐藏专题

通过盒子模型, 清楚知道大部分html标签是一个盒子

通过CSS浮动,定位可以让每个盒子排列成为网页

一个完整的网页, 是标准流, 浮动, 定位一起完成布局, 每个都有自己的专用用法

1.标准流

可以让盒子上下排列或者左右排列, 垂直的块级盒子显示就用标准流布局

2.浮动

  可以让多个块级元素一行显示或者左右对齐盒子, 多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念, 就是可以让多个盒子前后叠压来显示. 如果元素自由在某个盒子内移动 就用定位布局

---

元素的显示与隐藏

类似于网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现

本质: 让一个元素在页面中隐藏或者显示出来

1) display显示隐藏

2) visibility显示隐藏

3) overflow 溢出显示隐藏

---

display 属性

display 属性用于设置一个元素应如何显示

display: none;   主要用来隐藏对象

display: block; 除了转换为块级元素之外, 同时还有显示元素的意思

display 隐藏元素后, 不再占有原来的位置

这个后面应用很广泛, 搭配 JS可以做网页特效

---

visibility 属性

visibility 属性用于指定一个元素应可见还是隐藏

        visibility: visible; 元素可视

        visibility: hidden; 元素隐藏

visibility 隐藏元素后, 继续占有原来的位置

如果隐藏元素想要原来的位置, 就用visibility: hidden

如果隐藏元素不想要原来位置, 就用 display: none;

---

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框 (超过其指定高度以及宽度) 

值	描述
visible	默认值. 内容不会被修剪, 会呈现在元素框之外
hidden	内容会被修剪, 并且其余内容是不可见的
scroll	内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow属性的值

总结:

        display显示隐藏元素 但是不保留位置

        visibility 显示隐藏元素 但是保留原来的位置

        overflow 溢出显示隐藏 但是只是对于溢出的部分处理