html-盒子模型

背景的属性

• background-color:颜色 —背景颜色
• background-image:背景图片 例如background-image:urk(图片的路径)
• background-repeat:np-repeat(不平铺)//repeat(横向和纵向平铺)//repeat-x(横向平铺)//repeat-y(纵向平铺)—背景图片是否平铺
• background-attachment:背景附件，背景是否随着上方的内容一起滚动 取值：fixed(背景固定)//scroll（滚动）仅用于body标签
• background-position:(left//right//center（水平）)（垂直top cebter bottom）例如：background-position:left top
  数值：正值 负值 例如：background-position:0 0或者background-position: 10px 20px —背景图片的展开方式
  简写：background:背景颜色 背景图片 背景图片是否平铺 （附件通常指仅用 body 标签） 水平 垂直
  列表属性
• 去掉列表前面的项目符号 list-style-type:none
  简写：list-style:none
• 用小图代替列表前面的符号
  list-style-image:url(图片的地址);
• 之前rules=“all” 表格的属性 合并表格的边框线
  css样式如何实现
  border-collapse:collapse;合并表格的边框线

border:1px solid blue /边框线为1像素 实线 蓝色/

边框线(html就可以加边框线)

• 上边框线
  1. border-top-color:颜色 上边框的颜色
  2. border-top-style:线型 线型右soild 实线 dashed虚线 dotted 点状线
  3. border-top-width:粗细 border-top-width:2px
  简写 border-top: 粗细 线型 颜色
• 右边框线
  同上
• 下边框线
  同上
• 左边框线
  同上
  

*{margin:0;padding:0;} 清除原有格式
line-height:(int)px 行高
盒子模型（重点）

• 内容区：width 和height
• 边框 border
• 内边距
  内容和边框之间的距离
  padding-top:数值 ； 内容和上边框的距离
  padding-right:数值; 内容和右边框的距离
  padding-bottom:数值; 内容和下边框的距离
  padding-left:数值; 内容和左边框的距离
  简写
  padding:10px 20px 30px 40px 上边框距离10像素，右20像素，下30像素，左40像素。
  padding:10px 20px 30px 上 10像素 左右20像素 下30像素
  padding：10px 30px 上下10像素 左右30像素
  padding：10px 上右下左都是10像素
• 外边距
  边框以外的距离
  1. margin-top:数值； 上边框往外的距离
  2. margin-right:数值； 右边框往外的距离
  3. margin-bottom:数值； 下边框往外的距离
  4. margin-left:数值； 左边框往外的距离
     简写
     margin:10px 20px 30px 40px 边框外顶部距离10像素，右20像素，下30像素，左40像素。
     margin:10px 20px 30px 上 10像素 左右20像素 下30像素
     margin：10px 30px 上下10像素 左右30像素
     margin：10px 上右下左都是10像素
• 网站布局的一个思想
  网站的结构就是两部分横向和纵向如果是纵向就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的距离 padding， 边框往外的部分margin border 调这些属性就可以
  如果是横向排列，我们就要使用浮动
  
  浮动（float）
  float:left; 左浮动
  float:right; 右浮动
  浮动的特点：
  设置浮动的元素，不站空间
  设置浮动的元素层级高于普通元素
  设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素
  如果在一行中的元素想横向排列，都设置横向
  通常情况下div里面还有div（外面的div称为父盒子，里面的是子盒子）盒子里面还有盒子

如何让盒子在页面水平居中
margin:(xx)px auto; 例如margin:0 auto;
margin-left:auto; margin:auto;