H5页面布局注意事项和常用标签

H5中的布局标签：

<header> : 头部标签

<nav>       ：导航条

<section>：中间内容

<aside>： 侧边栏

<footer>: 尾部版权信息

<div>:无意义块状元素标签

<span>:无意义行内元素标签

<p>:段落标签

<ul>无序列表

<li> 列表项

<a> 超链接标签

<img/>图片标签

<i>:斜体标签

<b>粗体标签

页面布局常用选择器：

id选择器：  #id

类选择器： .class

关系选择器：div p ,div>p, div,p

伪类选择器： hover

结构性伪类选择器：E：after, E: before,  E: nth-child(), E: first-child, E:last-child

选择器的作用就是帮我们快速定位我们需要的元素。

页面布局中常用的属性：

字体属性 : font-size

文本属性：text-decoration，text-align

首行缩进：text-indent

行       高：line-height

宽高属性：width, height, min-height , max-height

背景属性： background

列表属性：list-style

字体颜色：color

页面布局应用属性：

定位属性：position

布局属性：display

浮动属性： float，clear

盒子模型： boeder， margin，padding

圆角边框：border-radius

阴       影： text-shadow, box-shadow

nth-child() ：匹配每一个子元素

first-child ：代表父元素的第一个子元素

我们在 做网页布局的时候 一定要先左右在垂直

CSS+DIV网页布局注意事项：

1，对于网页进行分析，划分方块。

2，选择器的优先级及精确定位需要设置样式的标签。

3，浮动属性对于其他元素的影响。

4，使用定位属性时，精确找到定位参考点，

Position定位属性: (position属性指定一个元素（静态的，相对的，绝对或固定）定位方法的类下)

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。

relative:生成相对定位元素，相对于其正常位置进行定位，因此，"left:20"会向元素的LEFT位置添加20px。

static:默认值，没有定位，元素出现在正常的流中（忽略 top,bottom,left,right或者z-index声明）。

CSS浮动属性（Float clear）：

浮动定位指：

1：将元素排除在普通流之外

2：元素将b不在页面中占据空间

3:  将浮动元素放置在包含框的左边或右边

4：浮动元素依旧位于包含框之内

1. 浮动元素的外边缘不会超过父类的内边缘
2. 浮动元素b不会互相重叠
3. 浮动元素不会上下浮动
4. 任何元素一旦浮动，display属性将完全失效可以设置宽高，并且不会独占一行。

浮动的框可以向左或右移动，直到它的外边缘碰到包含框或者另外一个框为止。

浮动属性语法：float：none/left/right;

CSS清除浮动：

描述：清除浮动是在使用了浮动之后b必不可少的，为了网站的布局效果的清除，清除浮动也变得非常麻烦

属性：clear

值： left，right ,both

清除浮动的常用方式：

1. 结尾处加空div标签 clear：both（或在下一个元素上加clear：both）
2. 浮动元素的父类div定义 overflow：hidden
3. 浮动元素的父元素定宽高。