八、DIV+CSS

待我称王封你为后i 2022-11-18 01:49 141阅读 0赞

### 文章目录 ###

*  八、DIV+CSS
 *   *  8.1 DIV与CSS的关系
     *  8.2 常用的样式
     *  8.3 使用 DIV 对页面进行布局
     *  8.4 HTML 中定位方式及浮动
     *   *  8.4.1 普通流方式
         *  8.4.2 position 定位方式
         *  8.4.3 浮动

--------------------

# 八、DIV+CSS #

## 8.1 DIV与CSS的关系 ##

1.  DIV 是一个层，DIV 是在网页悬浮的一个平面,网页中的容器，该容器中可以摆放任何 HTML 元素；
2.  DIV 默认情况在页面中什么都不显示，DIV 搭配 CSS 一起使用,通过 CSS 可以对DIV 进行内容、样式的调整；
3.  现在 web 中页面中大量使用了 DIV，DIV 过于灵活需要我们使用 CSS 控制。

## 8.2 常用的样式 ##

1.  position: absolute(绝对定位<当前 DIV 与浏览器边缘的距离>) ，relative(相对定位<当前 DIV 相对于自身原有位置做为参考位置的定位方式>fixed（固定定位方式）默 认定位)， z-index:指定 DIV 的显示优先级(值为一个数字，该数字越大优先级越高)；
2.  top:距顶端的距离；
3.  left:距左端的距离；
4.  right:距右端的距离；
5.  bottom:距底部距离。

## 8.3 使用 DIV 对页面进行布局 ##

在现在的开发中大量使用 DIV 进行网页布局；  
span 标签和 DIV 比较类似，但略有不同，span 是行级元素，div 是块级元素；  
span 标签，用于设置文本信息；  
label 标签，一般用于设置文本信息。

## 8.4 HTML 中定位方式及浮动 ##

### 8.4.1 普通流方式 ###

普通留方式是指网页元素的默认摆放方式,在开发中一般会指定元素的定位方式来改变默认方法，以便于布局管理。  
(1) 块级元素(默认):块级元素如 div、p、h1~h6…每个元素单独占一行，在其后放其他元素则另起一行,块级元素可以自由的设置其高度和宽度；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]  
(2) 行级元素(默认):行级元素如，span,input…每个元素都在另一元素的后面直接摆放，当一行无法容纳自动换行，行级元素默认不能设置宽度和高度，它只能随内容多少自动改变宽度和高度；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]  
实际应用中我们会根据需要对行级元素或块级元素进行行块级之间的转换，我们会通过设置元素的 display 属性，来修改行、块级元素。

1.  display:block(块级元素显示),inline(行级元素显示),inline-block(行块级元素，既有块级元素的特点<可以设置宽高>,又有行级元素的特点<不独占一行>)；
2.  display:flex，设置容器的布局方式，flex 称为弹性布局，使用它可以让容器中的元素横向摆放，也可以纵向摆放（默认为横向摆放）可以通过 flex- direction 设置 flex 布局的摆放方式；
3.  Row：按行摆放(默认)；
4.  Column：按列摆放；
5.  justify-content: center;设置主轴的对齐方法(flex- direction 指定的摆放方式)；
6.  align-content:center;设置交叉轴的对齐方法。

### 8.4.2 position 定位方式 ###

### 8.4.3 浮动 ###

**(不推荐使用，一般使用 display:flex 替换)**  
浮动是让一个元素悬浮在半空中，悬浮的元素将不在占用空间;浮动后块级元素转换为了行级元素，可以在其他浮动的元素后继续摆放。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/91501aa8fcf346d59dfc348e173fc4a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: /images/20221022/517d03472620480e9125476c4eaca49b.png