Web精选03集（css盒子模型、常用布局）

CSS 盒模型

1. 内容尺寸

• 一般情况下，为元素设置width/height，指定的是内容框的大小
• 内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：

  取值	作用
  visible	默认值，溢出部分可见
  hidden	溢出部分隐藏
  scroll	强制在水平和垂直方向添加滚动条
  auto	自动在溢出方向添加可用滚动条

2. 边框

1. 边框实现

语法：

border:width style color;

边框样式为必填项，分为：

2. 单边框设置

分别设置某一方向的边框，取值：width style color;

3. 网页三角标制作

1. 元素设置宽高为0
2. 统一设置四个方向透明边框
3. 调整某个方向边框可见色

4. 圆角边框

1. 属性：border-radius 指定圆角半径
2. 取值：像素值或百分比
3. 取值规律：

一个值 	表示统一设置上右下左
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右
三个值 	表示分别设置上右下，左右保持一致

3. 内边距

【1】属性：padding

【2】 作用：调整元素内容框与边框之间的距离

【3】 取值：

20px;					一个值表示统一设置上右下左
20px 30px;				两个值表示分别设置(上下) (左右)
20px 30px 40px;			三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;	表示分别设置上右下左

4. 单方向内边距,只能取一个值：

padding-top
padding-right
padding-bottom
padding-left

4. 外边距

【1】 属性：margin

【2】 作用：调整元素与元素之间的距离

【3】 特殊：

1）margin:0; 取消默认外边距

2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中

3）margin:-10px;元素位置的微调

【4】 单方向外边距：只取一个值

margin-top
margin-right
margin-bottom
margin-left

5. 外边距合并：
   1）垂直方向
   1. 子元素的margin-top作用于父元素上
   解决：
   为父元素添加顶部边框；
   或为父元素设置padding-top:0.1px;
   2. 元素之间同时设置垂直方向的外边距，最终取较大的值
   2）水平方向
   块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
   行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
   行内元素水平方向上的外边距会叠加显示
6. 带有默认边距的元素：

   body,h1,h2,h3,h4,h5,h6,p,ul,ol{
     margin:0;
     padding:0;
     list-style:none;
   }
   

布局方式

1. 标准流/静态流

默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示

2. 浮动布局

主要用于设置块元素的水平排列

【1】属性

float

【2】取值

可取left或right，设置元素向左浮动或向右浮动

float:left/right;

【3】特点

• 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
• 元素设置浮动,就具有块元素的特征,可以手动调整宽高
• “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示

【4】常见问题

子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局

【5】解决

• 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
• 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
• 为父元素设置overflow:hidden;解决高度为0

3. 定位布局

结合偏移属性调整元素的显示位置

【1】属性

position

【2】取值

可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位）

postion:relative/absolute/fixed/static

【3】偏移属性

设置定位的元素可以使用偏移属性调整距离参照物的位置

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

【4】分类

• relative 相对定位

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

• absolute 绝对定位

1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

使用绝对定位 :

“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.

• fixed 固定定位

  1. 参照窗口进行定位,不跟随网页滚动而滚动
  2. 脱离文档流

【5】堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

• 属性 : z-index
• 取值 : 无单位的数值,数值越大,越靠上
• 堆叠：
  1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
  2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上