Web前端开发笔记-----10.css盒子模型以及一些常见问题和扩展

Web前端开发笔记-----10.css盒子模型以及一些常见问题和扩展

---

一、css盒子模型

组成：content -> padding ->border ->margin
      物品    填充物   包装盒   盒子与盒子之间的间距



content：内容区域，width和height组成

padding：内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下 左右）
写四个值：30px 40px 50px 60px（上 右 下 左顺时针方向）
单一样式：padding-left/right/top/bottom

margin：外边距（外填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下 左右）
写四个值：30px 40px 50px 60px（上 右 下 左顺时针方向）
单一样式：margin-left/right/top/bottom

注：
1.背景颜色会填充到margin以内的区域（不包括margin区域）。
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。


box-sizing：
盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box：width、height -> content
border-box:width、height -> content padding border

<style>
        #box{
    width: 300px;