页面html介绍

前端页面的三层结构

• 结构层：由HTML构成，定义页面的内容，解决“页面内容是什么”的问题
• 表现层：由css创建，解决了“页面内容如何显示”的问题
• 行为层：由脚本创建，解决了“内容如何对事件作出反应”的问题

页面三元素

• html：表示这是一个HTML 文档，是页面的根元素
• head：文档的头部，头信息标签
• body：文档的主体，可视区内容标签

选择器

• 通配选择器：（*）获取所有子元素
• 类型选择器：（如：div ）获取所有该种元素
• 类名选择器：（.加上class属性的值）获取所有具有该类名的元素
• id选择器： （#加上id属性的值 ） 获取具有该id值的元素

优先级:
id选择器>类名选择器>类型选择器>通配选择器（ 如果多个选择器优先级一致：后面覆盖前面）

盒子模型

样式：border，padding，content，margin

1. content：盒子内容，元素的后代元素等内容的区域，由width和height组成

2. padding：内填充，元素内容和边框之间的区域，由上右下左4个方向的内填充组成
   padding-top： //上内填充
   padding-right： //右内填充
   padding-bottom： //下内填充
   padding-left： //左内填充

3. border：边框，就是元素的最外层结构，由上右下左4个方向的边框组成，边框有两种集合方式：

   第一种可以认为是由4个方向的边框集合来：

   border-top: //上边框
   border-right: //有边框
   border-bottom: //下边框
   border-left: //左边框

   而每一个边框由可以认为是它的宽度、样式和颜色集合而来，如上边框border-top
   border-top-width: //上边框宽度
   border-top-style: //上边框样式
   border-top-color: //上边框颜色

   第二种认为4个边框相同，则用宽度、样式和颜色进行集合：

   border-width: //边框宽度
   border-style: //边框样式
   border-color: //边框颜色

   这里每个样式再由4个边框的样式集合来，如border-width
   border-top-width: //上边框宽度
   border-right-width: //右边框宽度
   border-bottom-width: //下边框宽度
   border-left-width: //左边框宽度

4. margin：外边距，该元素与其他元素之间的间距，由上右下左4个方向的外边距组成：

   **margin-top： //上内填充
   margin-right： //右内填充
   margin-bottom： //下内填充

padding和margin

在设置4个值时，分别代表上、右、下、左；
3个值时由右代替左，分别代表上、左右、下；
2个值时由上代替下，分别代表上下、左右；
1个值时代表所有的4个方向

外边距重叠（margin-collapse）：相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距，折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

块状元素常用的居中方法：margin:0 auto;