(四)CSS布局方式

布局方式

1. 标准流/静态流

流：连续自动补齐
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
标准流会记录页面中的空白字符，显示为一个空格
标准流中同行元素高度不同时，采用底边对齐方式

2. 浮动布局

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

1）属性

float

2）取值

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

float:left/right;

3）特点

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

4）常见问题

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

5）解决

• 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
• 在父元素的末尾创建一个新的块元素。设置clear: both;清除浮动(常用)

  .clear{
  	clear:both
  }
  

  <div id="content">
      <div id="d1"></div>
      <div id="d2"></div>
      <div id="d3"></div>
      <div class="clear"></div>
  </div>
  

• 为父元素设置overflow: hidden，清除浮动，解决高度为0

  #content{
      /* 清除浮动，显示父元素原本应有的高度 */
      overflow: hidden;
  }
  

3. 定位布局

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

1）属性

position

2） 取值

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

postion:relative/absolute/fixed/static

3）偏移属性

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

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

4）分类

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

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

   <style>
   #parent{
       width: 400px;
       height: 400px;
       background-color: darkgreen;
       margin: 0 auto;
       position: relative;
   }
   #child{
       width: 200px;
       height: 200px;
       background-color: lightgreen;
       /* 绝对定位 */
       position: absolute;
       /* 距离父元素右侧0像素  下0像素 表示在父元素右下角 */
       right: 0;
       bottom: 0;
   }
       </style>
   

• fixed 固定定位

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

5）堆叠次序

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

• 属性 : z-index 默认0
• 取值 : 无单位的数值,数值越大,越靠上
• 堆叠：

1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上

背景属性

1. 背景颜色

background-color: red;

2. 背景图片相关

1） 设置背景图片

background-image : url("路径");

设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

2） 设置背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值 ：

repeat     默认值，沿水平和垂直方向重复平铺
repeat-x   沿X轴重复平铺
repeat-y   沿Y轴重复平铺
no-repeat  不重复平铺

3） 设置背景图片的显示位置

默认显示在元素左上角

background-position:x y;

取值方式 ：

1. 像素值：设置背景图片的在元素坐标系中的起点坐标
2. 方位值
   水平 ：left/center/right
   垂直 ：top/center/bottom
   注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比：类似于方位值，根据百分比计算背景图片的显示坐标。
   1. 计算方式：
      横坐标 = (元素宽度 - 背景图片宽度)* x %
      纵坐标 = (元素高度 - 背景图片高度) * y %
   2. 特殊值：
      0% 0% 左上角
      100% 100% 右下
      50% 50% 居中显示

精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

4）设置背景图片的尺寸

background-size:width height;

取值方式 ：

1. 像素值
   500px 500px; 同时指定宽高
   500px; 指定宽度，高度自适应
2. 百分比
   百分比参照元素的尺寸进行计算
   50% 50%; 根据元素宽高,分别计算图片的宽高
   50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

3. 背景属性简写

background:color url("") repeat position;

注意 ：

1. 如果需要同时设置以上属性值，遵照相应顺序书写
2. background-size 单独设置

文本属性

1. 字体相关

1） 设置字体大小

font-size:20px;

2）设置字体粗细程度

font-weight:normal;

取值 ：

1. normal（默认值）等价于400
2. bold (加粗) 等价于700
3. 如果取值为其他数值时，可能会没有对应的字体方案

3）设置斜体

font-style:italic;

4） 设置字体名称

font-family:Arial,"黑体"; 

取值 :

1. 可以指定多个字体名称作为备选字体,使用逗号隔开
2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
   例 :

   font-family:Arial;
   font-family:"黑体","Microsoft YaHei",Arial;
   

5）字体属性简写

font : style weight size family;

注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项

2. 文本样式

1）文本颜色

color:red;

2） 文本装饰线

text-decoration:none;

取值 :

underline		下划线
overline		上划线
line-through    删除线
none		    取消装饰线

3）文本内容的水平对齐方式

text-align:center;

取值 :

left(默认值)	 左对齐
center		 居中对齐
right		 右对齐
justify		 两端对齐

4）行高（文本内容的垂直对齐方式）

line-height:30px;

使用 :文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置

line-height = height 设置一行文本在元素中垂直居中
line-height > height 文本下移显示
line-height < height 文本靠上显示

特殊 :line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高

5） font属性简写2

font : size/line-height family;