CSS的基本使用4- 浮动和盒子模型

float 浮动

float 中的四个参数

• float：left 左浮动
• float：right 右浮动
• float：none 不浮动
• float：inherit 继承浮动

float 的原因以及副作用

• 使元素脱离了标准流
• 浮动的元素不占用原空间
• 父元素坍塌以及其他元素异味

css 中定位机制

• 标准流
• 定位
• 浮动

position 定位

position中的可选参数

• styatic
• relative
• absoulute
• fixed
• inherit

relative 参数特性

• 不脱离文档流
• 可以利用top right bottom left 定位
• 为子定位划分作用域
• 移动区域为整个网页

absolute 参数特性

• 脱离文本流
• 可以利用 top right bottom left 进行定位
• 为子定位划分作用域
• 移动区域为整个网页

fixed 参数特性

• 脱离文档流
• 可以利用 top right bottom left 进行定位
• 为子定位划分作用域
• 移动区域为整个窗口区

定位中的层级

• 通过顺序插入，越后面添加的层级越大
• z-index 改变层级
• 不同父元素的子元素的层级关系各不相关

z-index的属性值

• z-index：auto(默认值)
• z-index ：inherit(继承)
• z-index：number(number 指具体值)

z-index 特性

• 可以设置元素的叠加顺序，但依赖定位属性
• z-index 大的元素会覆盖 z-index 小的值
• z-index 为auto 的元素不参与层级比较
• z-index 为负数时 元素会被普通流元素覆盖

定位与边距的异同

• margin padding 通过控制边距改变距离
• position 通过定位改变距离

盒子模型

网页中的盒子模型

盒子模型的概念

• 盒子用来放网页中的各种元素
• 网页设计中内容，如文字图片等元素都是盒子(div 嵌套)

HTML 可设置高和宽属性

• 块级元素

  <p> <div> <h1>~<h6> <ul><li><ol><dl><dt><dd>

• 替换元素

  <img> <input> <textarea>

HTML 标签分类

• 块级标签：占据一行，换行

  <div> <ul> <ol><li><dl><dt> <dd><h1>~<h6><form><hr>

• 行内元素

  • 非替换元素 <b> <em> <a> <span>
  • 替换元素 <img> <input> <textarea>

边框属性

• 设置边框宽度(border-width)
• 边框颜色(boder-color)
• 边框样式(border-style)
• 4个方向(上右下左)

设置元素边框宽度

• border-width:thin|medium|thick

设置边框颜色

border-color ：颜色|transparent

设置边框元素样式

border-style：值|none|hidden

不同方向表示

• border-[left|right|top|bottom]-width
• border-[left|right|top|bottom]-color
• border-[left|right|top|bottom]-style

内边距 padding

• 设置元素的内容与边框之间的距离分4个方向(上右下左)

• padding-top ：长度值|百分比

• padding-right ：长度值|百分比

• padding-bottom ：长度值|百分比

• padding-left ：长度值|百分比

值不能为负

外边距 margin

设置元素与元素之间的距离分4个方向（上右下左）

• margin：值一 四个方向值都是值1
• margin：值一 值二 上下方向值都值1 左右为值二
• margin：值一值二 值三 上=值一 左右=值二 下=值三
• margin：值一值一值二 值三值四 上右下左

盒子模型的计算方式

Display

• inline 元素显示为内联元素 元素前后没有换行符
• block 元素将显示为块级元素 元素前后会有带换行符
• lnline -block 行内元素 元素显现为inline 但是具有block 特性
• none 元素不会显示