DIV+CSS布局

  • 时间:
  • 浏览:
  • 来源:互联网

在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中的块元素和行内元素

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

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

本文链接http://metronic.net.cn/metronic/show-64461.html