0基础学习网页结构编程

目录

一、盒子可见宽

二、垂直布局

三、外边距折叠

---

一、盒子可见宽

默认情况下：盒子的可见宽的大小由内容区，内边距，边框共同决定（可以用来鼠标移入抖动问题）
box-sizing   用来设置盒子尺寸的计算方式，用来规定width，height指的是谁

可选值：
content-box   width，height指的是内容区的宽高，默认情况
border-box    width，height指的是内容区，内边距，边框加起来的大小

二、垂直布局

（1）块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开的。
在垂直布局中，一般情况下，高度是不设置的，让它被元素撑开

（2）使用overflow属性设置父元素如何处理溢出的子元素
可选值：
visible    默认值，文本正常出现
hidden   隐藏文本
scroll     生成双向的滚动条，可以通过滚动条查看完整内容
auto       根据实际的内容出现滚动条

了解：
overflow-x  水平方向溢出的内容设置，垂直方向根据实际需要自动生成

overflow-y  垂直方向溢出的内容设置，水平方向根据实际需要自动生成

三、外边距折叠

（1）垂直外边距

①兄弟元素
~如果两个值都是正值，谁大听谁的
~如果两个值都是负值，谁绝对值大听谁的
~如果两个值是一正一负，那最终的值是两者相加

②父子元素
~如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，导致父元素的位置发生变化，会影响到父元素下面的布局，所以这个问题必须要解决
面试题<如何解决父子元素外边距的重叠问题？>