html和css1

盒模型

盒子的分类

• 不同的元素产生的盒子类型可能不同
• 一个元素产生什么样的盒子，取决于它CSS的display属性
• display 不能被继承，默认值：inline 
  
  • display:none 不生成盒子
  • display:inline 行盒
  • display:block 块盒
  • display：其他取值 其他盒子

盒子的组成

• 由四个部分组成： 
  
  • margin 外边距 表示与其他盒子之间的距离
  • border 边框
  • padding 内边距 表示内容与边框之间的距离
  • content 内容 内容的宽度和高度

margin

• 又分为上（top）下（bottom）左（left）右（right） 
  
  • margin-top 上外边距 默认值是：0px. 其他取值：em、%、px
  • margin-bottom 下外边距 默认值是：0px. 其他取值：em、%、px
  • margin-left 左外边距 默认值是：0px. 其他取值：em、%、px
  • margin-right 右外边距 默认值是：0px. 其他取值：em、%、px
• 缩写值：margin: 
  
  • margin后跟多个值时，从上开始，顺时针方向进行样式添加
  • 一个值时，四边都应用这一个值
  • 两个值时，上下应用第一个值，左右应用第二个值
  • 三个值时，上应用第一个值，左右应用第二个值，下应用第三个值
  • 四个值时，分别应用四个值到上下左右中

border

• 分割内部与外部的界限，用上 下 左 右四部分组成 
  
  1. 上边框
• 边框样式：border-top-style 表示上边框的样式，不可继承
• 默认值：none（无边框样式）
• 其他取值：solid（实线）、dashed（虚线）、dotted（点线）、double（双实线）
• 边框厚度：border-top-width 表示上边框的厚度
• 默认值：medium 预设值，表示中等边框
• 其他取值：数值：px、em
• 边框颜色：border-top-color 表示上边框的颜色 
  注：缩写格式：border-top:厚度 样式 颜色 
  下边框和左右边框同上边框一样书写即可

padding

• 格式：padding-top 表示上内边距
• 取值：px、em
• 下、左右格式一样
• 缩写：padding：样式

content

• content是用来存放文本或其他元素的区域 
  类似于一个箱子中存放东西的空间
• 格式：content-top 表示内容的上边距
• 另外三边的格式一样
• 缩写：content：样式;

子盒子

1. 边框盒（border-box）：由border、padding、content组成 
   
   • 浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸（页面的实际尺寸）
   • background-clip属性：背景覆盖范围 
     
     • 设置背景色的渲染区域：
     • background-clip:border-box;
     • background-clip:padding-box;
     • background-clip:content-box;
2. 填充盒（padding-box）：由padding、content组成
3. 内容盒（content-box）：由content组成