60 lines
1.5 KiB
Plaintext
60 lines
1.5 KiB
Plaintext
盒子 模型:
|
||
|
||
有 内边距(padding) ，外边距(margin)，边框(border)，内容（content）
|
||
|
||
padding 变大
|
||
|
||
padding 和 margin 写法一样
|
||
|
||
margin: 10px; /** 同时对 上右下左 四个方向设置一样的数值**/
|
||
margin: 10px 20px; /** 同时对 上下 左左右 设置数值 **/
|
||
margin: 10px 20px 30px; /** 对 上 左右 下 设置数值 **/
|
||
margin: 10px 20px 30px 40px; /** 上 右 下 左 **/
|
||
|
||
/* margin-bottom: 17px;
|
||
margin-left: 42px;
|
||
margin-top: 31px;
|
||
margin-right: 10px;*/
|
||
|
||
|
||
border: 10px solid #050505;
|
||
border-top: 10px solid #050505;
|
||
border-right: 10px solid #050505;
|
||
border-bottom: 10px solid #050505;
|
||
border-left: 10px solid #050505;
|
||
|
||
|
||
主要是为了方便将布局和现实映射
|
||
|
||
盒子模型的计算规则：
|
||
|
||
标准盒子模型：
|
||
|
||
元素真实宽高 = 你写的宽高（content宽高） + padding & border
|
||
|
||
在你写的宽高 基础上向外拓张
|
||
|
||
怪异盒子模型 box-sizing: border-box; ：
|
||
|
||
content 宽高 = 你写的宽高（元素真实宽高） - padding & border
|
||
|
||
在你写的宽高 基础上向内缩减
|
||
|
||
|
||
|
||
|
||
|
||
浮动：
|
||
|
||
让元素（块）排一行，或者实现 左右布局
|
||
|
||
注意：
|
||
浮动会让元素从原本的位置删除（文档流中删除），下面的元素会钻下去
|
||
|
||
如何解决：
|
||
|
||
1：clear: both; 加在受影响的那个元素上
|
||
2：手动加高度
|
||
3：overflow: hidden;
|
||
|
||
float: left right |