DIV+CSS布局

Posted 2021-11-09 橘猫吃不胖～

在DIV+CSS布局中，div承载的是内容，而css承载的是样式。

DIV+CSS布局

• 1.1 DIV的概念
• 1.2 页面布局步骤
• 1.3 CSS的定位机制
• 1.4 浮动属性
• • 1.4.1 浮动的含义
  • 1.4.2 浮动的实现
  • 1.4.3 常见的浮动布局
  • 1.4.4 清除浮动
• 1.5 定位属性
• • 1.5.1 相对定位
  • 1.5.2 绝对定位
• 1.6 visibility、display
• 1.7 块元素和行内元素
• • 1.7.1 CSS中的块元素和行内元素
  • 1.7.2 html中的块元素和行内元素

1.1 DIV的概念

• DIV全称division，意为“区分”，使用 DIV 的方法跟使用其他标签的方法一样。
• 如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用 <P></P> 是一样的。
• DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其它的html代码。

注意：<div>标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，<p>aa<div>bb</div>cc</p>的结果是不确定的。

1.2 页面布局步骤

1、确定版心，确定网页的主体内容，在页面中水平居中显示
2、分析页面中的模块
3、控制页面中各个模块

1.3 CSS的定位机制

CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置，定位与布局密切相关。

1. 普通流方式
   普通流方式是指由元素在html文件中的位置决定（由标签在文件中的位置来决定）。
   块级元素（如p、h、div）（块级框）从上到下一个接一个的排列，行内元素（如span、strong元素）在行中水平布置。
   除非特殊的指定，否则所有的框都在普通流中定位
2. 浮动方式
   浮动方式是指元素在页面中可以左右移动，直到碰到包含框或其他浮动框。
3. 绝对定位
   绝对定位是指直接将元素定位到页面的任何位置（通过设置元素在页面中的位置坐标来实现）。

1.4 浮动属性

1.4.1 浮动的含义

浮动是指元素脱离原有的标准文档流，移动到其父元素中指定的位置。

1.4.2 浮动的实现

浮动可以通过在元素的CSS中添加float属性来实现，其属性值有三个，分别是：

属性值	含义
left	向左浮动
right	向右浮动
none	不浮动(默认值)

例如，HTML页面代码为：

<div class="d1"></div>

CSS样式为：

.d1{
    width: 100px;
    height: 100px;
    background-color: pink;
    float: right;
}

为什么说浮动元素不占空间？

以两个div为例，正常是俩个div都会显示出来，占据2空间。加入浮动后，div就会叠加显示在一个位置，此时要想让两个div正常显示一般要使用到margin-left浮动div的宽度，或者也是使用浮动。
如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖，如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。
如果指定宽度则会去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。

1.4.3 常见的浮动布局

1、一列固定宽度并自动居中：margin设置为auto，格式：margin: autp;

例如，HTML页面代码如下：

<div class="d1">橘猫吃不胖</div>

CSS样式如下：

.d1{
    /* 设置长宽为100的正方形 */
    width: 100px;
    height: 100px;
    /* 设置背景颜色为橙色 */
    background-color: coral;
    /* 列自动居中 */
    margin: auto;
}

2、一列自适应宽度：相对于浏览器而言，盒子的宽度会随浏览器宽度的改变而改变，这时要用到宽度的百分比，当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。

例如，HTML页面代码如下：

<div class="d1">橘猫吃不胖</div>

CSS样式如下：

.d1{
    /* 设置高为100 */
    height: 100px;
    /* 设置背景颜色为橙色 */
    background-color: coral;
    /* 列自动居中 */
    margin: auto;
}

3、两列自动居中：采用盒子嵌套方式实现，让外层的盒子自动居中。

例如，HTML页面中代码：

    <div class="d1">
        <div class="d1-1"></div>
        <div class="d1-2"></div>
    </div>

CSS样式为：

.d1{
    /* 设置盒子长200像素，宽100像素，并且自动居中 */
    width: 200px;
    height: 100px;
    margin: auto;
}
.d1-1{
    /* 设置长宽都为100的正方形 */
    width: 100px;
    height: 100px;
    background-color: red;
    /* 向左浮动 */
    float: left;
}
.d1-2{
    /* 设置长宽都为100的正方形 */
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 向左浮动 */
    float: left;
}

1.4.4 清除浮动

当属性设置浮动时，它所在的物理位置离开了原有的文档流，它会对页面中其他元素的排版产生影响。为了使文档流能识别浮动，或者让浮动后面的元素不受影响，可以使用clear属性消除浮动，它的取值如下：

属性值	含义
left	清除左侧的浮动影响
right	清除右侧的浮动影响
both	清除左右两侧的浮动影响

例如，HTML页面中代码如下：

    <div class="d1"></div>
    <div class="d2">橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~</div>

下面CSS样式中未加入clear属性，效果如下：

.d1{
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
}

下面CSS样式中加入了clear属性，效果如下：

    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
}
.d2{
    clear: left;
}

1.5 定位属性

1.5.1 相对定位

元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素相对于它的初始点进行移动。

格式为：

    position: relative;
    top: 到顶部的距离;
    left: 到左边的距离;
    bottom: 与底部的距离;
    right: 与右边的距离;

例如，HTML页面中代码如下：

    <div class="d1"></div>
    <div class="d2">
        <div class="d3"></div>
    </div>

CSS样式如下：

.d1{
    /* 长100 宽100 背景粉色 */
    width: 100px;
    height: 100px;
    background-color: pink;
}
.d2{
    /* 长200 宽200 背景黄色 */
    width: 200px;
    height: 200px;
    background-color: palegoldenrod;
}
.d3{
    /* 长100 宽100 背景紫色 */
    width: 100px;
    height: 100px;
    background-color: plum;
    /* 设置相对定位 距离顶部20 左部30 */
    position: relative;
    top: 20px;
    left: 30px;
}

1.5.2 绝对定位

可以把元素精确定位到页面中的某个地方。

注意：
1、元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。
2、绝对定位的元素的位置是相对于最近的父元素而言的。
3、绝对定位必须是在父元素使用相对定位的情况下才能正常使用。父元素div必须套上relative（不加这个就会根据body的左上角作为原点）。
4、应用场景一般DIV框随变动，里面也会跟着改变。一般都是相对定位接合绝对定位一起使用，如果想把一个图层置于另一个图层上面或者是弹窗就用到绝对定位，将图层固定到屏幕的固定位置就得用position:fixed了。
5、因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。而且页面中元素的z-index(层级)为0

格式为：

    position: absolute;
    top: 与顶部的距离;
    left: 与左边的距离;
    bottom: 与底部的距离;
    right: 与右边的距离;

例如，HTML文件中代码如下：

    <div class="d1"></div>
    <div class="d2">
        <div class="d3"></div>
    </div>

CSS样式如下：

.d1{
    /* 长100 宽100 背景粉色 */
    width: 100px;
    height: 100px;
    background-color: pink;
}
.d2{
    /* 长200 宽200 背景黄色 */
    width: 200px;
    height: 200px;
    background-color: palegoldenrod;
}
.d3{
    /* 长100 宽100 背景紫色 */
    width: 100px;
    height: 100px;
    background-color: plum;
    /* 设置相对定位 距离顶部20 左部30 */
    position: absolute;
    top: 20px;
    left: 50px;
}

相对定位和绝对定位需要配合top、right、bottom、left 使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

1.6 visibility、display

属性	含义	属性值
visibility	设置元素是否可见	visible：元素可见(默认值) hidden：不可见
display	设置元素的显示方式	none：不显示 block：块状显示 inline：显示在一行

visibility与display隐藏元素的区别：

visibility：hidden；隐藏元素后，保留元素所占有的物理空间
display：none；隐藏元素后，不保留元素所占有的物理空间

1.7 块元素和行内元素

1.7.1 CSS中的块元素和行内元素

块元素(block)：占据了全部的宽度，在前后都有换行符

例如：<h1></h1>、<p></p>、<div></div>、<ul></ul>、<table></table>、<form></form>，它们的宽度（width）、高度（height）、内边距（padding）、外边距（margin)）都是可以控制的。

内联元素(inline)：只需要必要的宽度，不强制换行

例如：<span></span>、<a></a>，它们的宽度（width）、高度（height）、内边距（padding-top、padding-bottom）、外边距（margin-top、margin-botom）都是不能改变的。

1.7.2 html中的块元素和行内元素

块元素：无论内容是什么都会独占一行。主要用于页面布局

行内元素：只占用自身的大小，不会占用一行。