Div标签 + 布局属性

涉及知识：

提示：html5+css：

应用：页面布局，网页布局，浮动

---

常用的布局

1.常用的布局标签

提示：标签分为单标签和双标签在html中使用：

• <div> .........</div>无意义块状元素标签 【独占一行】
• <span> .........</span>无意义行内元素标签
• <p> .........</p>段落标签
• <ul> .........</ul>无序列表
• <li> .........</i>列表项
• <a> .........</a>超链接标签
• <i> .........</i>斜体标签
• <b> .........</b>粗体标签
• <img/>图片标签【单标签】

2.常用的布局选择器

提示：选择器一般在css，style中使用

• id选择器        #id
• 类选择器        .class
• 关系选择器        divp、 div>p、 div,p
• 伪类选择器        hover
• 结构性伪类选择器: E:after、 E:before、 E:nth- child()、E:first -child、E:last- child

---

常用的布局属性：

1.页面布局常用的属性（一）

• 字体属性：font-size
• 文本属性：text-decoration，text-align
• 首行缩进：text-indent
• 行高：line-height
• 宽高属性：wisth，height，min-height，max-height
• 背景属性：background
• 列表属性：list-style
• 字体颜色：color

2.页面布局应用的属性（二）

• 定位属性：position
• 布局属性：display
• 浮动属性：float，clean
• 盒子属性：border，margin，padding
• 圆角边框：border-radius
• 阴影：text-shadow，box-shadow

---

浮动float：

• 浮动定位指
  • 将元素排除在普通流之外
  • 元素将不在页面中占据空间
  • 将浮动元素放置在包含框的左边或者右边
  • 浮动元素依旧位于包含框之内

• 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另-一个浮动框的边框为止
  • 浮动元素的外边缘不会超过其父元素的内边缘
  • 浮动元素不会互相重叠
  • 浮动元素不会上下浮动
  • 任何元素- -旦浮动，display 属性将完全失效均可以设置宽高，并且不会独占一行
  • 语法: float:none/left/right;
• CSS清除浮动:
  • 描述:清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。
  • 属性: clear
  • 值: left、 right、 both
  • 清除浮动的常用方式:
    • 1.结尾处加空div标签clear:both (或在 下一个元素上加clear:both;)
    • 2.浮动元素的父级div定义overflow: hidden
    • 3.浮动元素的父元素定宽高