通过盒子模型, 清楚知道大部分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 溢出显示隐藏 但是只是对于溢出的部分处理