CSS盒子模型

CSS盒子模型

• 所有HTML元素都可以看作一个盒子
• 从内到外包括：实际内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin）
• Content内容：盒子的内容，显示文本和图像，我们平时设置HTML元素的宽度和高度时，实际上只是设置了Content的宽度和高度
• Padding内边距：内容和边框之间的距离，是透明的
• Border边框：边框我们经常设置他的样式、宽度和颜色
• Margin外边距：外边距是透明的

元素的完整宽度和高度

• 元素的完整宽度：宽度+外边距+右边距+左边框+右边框+左边距+右边距
• 元素的完整高度：高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

Border边框

边框样式 border-style 默认为none

• 点线边框 dotted
• 虚线边框 dashed
• 实线边框 solid
• 双边框 double 2个边框的宽度和border-width的值相同

边框宽度 border-width 默认为2px

边框颜色 border-color 默认为黑色

• 边框颜色单独使用是不起作用的，必须得先使用border-style来设置边框样式

单独设置各边

• 在上面3个属性中加入top right bottom left四个关键字，可以设置各边的属性， 如：
  
  • border-top-style
  • border-right-width
  • boder-bottom-color
• 注意：我们可以不指定top right bottom left 这4个属性，而直接写值

值的数量	影响的边	例子	解释
1	4条边	border-color:red	4条边都为红色
2	上下，左右	border-color:red yellow	上下为红色，左右为黄色
3	上，左右，下	border-color:red yellow green	上为红色，左右为黄色，下为绿色
4	上，右，下，左	border-color:red yellow green blue	上为红，又为黄, 下为绿，左为蓝，注意顺序，逆时针

简写 border

border: solid 1px red;

margin 外边距 和 padding 内边距

margin外边距

• margin为元素周围的空间 没有背景颜色，是完全透明的
• 有margin margin-top right bottom left属性
• 可能的值：
  
  • auto：设置浏览器边距，依赖于浏览器，这个属性在对齐的时候很有用
  • length:设置一个固定的值 px em等
  • % 设置一个百分比的外边距
• 注意：margin可以为负值，让内容重叠

padding内边距

• padding为内容到border之间的距离，当padding被清除时，他所占的区域会被背景颜色填充

margin和padding的简写和border的简写一致