HTML-css-2020/07/14 (7)

1.水平布局
子元素margin+border+paddding+width=父元素内容区宽度
margin-right过度约束;自动调整使上面等式成立

优先调  auto
系统优先调 width:auto;          //width默认就是auto
如果两个外边距auto则会调整使左右等宽（内容居中）

上下0；左右auto

2.竖直方向
溢出
-x单独处理水平溢出
-y……

3.margin外边距重叠


两种解决方案

a.父元素加border-top(边框)使他们外边距不重合
   （1）border-top:width color solid;
    (2)重新设置数据
b.不用外边距，用内边距padding
  （1）设置父元素padding
  （2）重新设置父元素宽度

不影响布局；不会使其他元素移动；只会覆盖其他元素

要想强制设置行内元素width和height就要改变类型用display

注意none和display的区别
行内块尽量少用性质类似于字符（俩字符中间有空隙）
每一个元素都是一个盒子模型

5.去除浏览器默认

*{
	padding:0;
	margin: 0;                  //不一定清除干净
}

清除浏览器默认表


6.<nav>导航栏
<span>行内元素
文字居中

END

https://www.bilibili.com/video/BV1XJ411X7Ud?p=57