div标签是html页面中用于分组的块元素，是专门用于元素布局的标签。

　　标签的级别：

　　　　1、行级标签：可设置大小，但一行只能容下一个行级标签（默认宽度==页面宽度，默认高度==填充高度）

　　　　2、块级标签：可设置大小，多个块级标签占据一行（默认宽度==填充宽度，默认高度==填充高度）

CSS中与布局有关的常用属性：

CSS属性
含义
可用值
含义
position
 元素位置
absolute
相对屏幕位置
   
relative
相对父元素的位置
   
static
固定位置
direction
元素内容靠哪侧
 ltr 左
   
rtl
右
float
元素本身靠哪侧
left
左
    right
右
height
高度
pt|px|%|em
像素、百分比
width
宽度
pt|px|%|em
像素、百分比
margin
边框外部填充
pt|px|%|em
像素、百分比
padding
 边框内部填充
pt|px|%|em
像素、百分比
border
边框
pt|px|%|em
像素、百分比

1、我们先一段代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        div.container{background-color: gray;}

        div.leftframe{background-color: #00ff99;}

        div.rightframe{background-color: #88bb99;}

    </style>

</head>

<body>

    <div class="container">

        <div class="leftframe">

            <ul>

                <li>班级列表</li>

                <li>学生查询</li>

                <li>成绩统计</li>

                <li>学校信息</li>

            </ul>

        </div>

        <div class="rightframe">页面主体内容</div>

    </div>

</body>

</html>

body标签中三个div标签,层级关系如下

　　　　<div class="container">

　　　　　　　　<div class="leftframe">

　　　　　　　　<div class="rightframe">

head标签中通过内联方式，给三个标签上色，效果如下

2、我们设置一下各标签的宽度和高度

一些解释：

　　1、div父标签div.container的宽度设置为页面的90%，默认100%，高度为leftframe+rightframe

　　2、div子标签div.leftframe宽度设置为父标签的20%，默认100%，高度设置为固定值200px

　　3、div子标签div.rightframe宽度设置为父标签的50%，默认100%，高度设置为固定值200px

　

3、float的用法

　　float：专门针对div而生的用法，字面意思为浮动，实际含义为将子div标签从父div标签中抠出来，作为块级标签使用（此时不再占用父div的空间）

示例：(将leftrame设置float属性)

将rightframe设置float属性

4、margin:边框外部填充（四面填充）

　　　　margin-left：填充左侧

　　　　margin-right:填充右侧

　　　　margin-top:填充上方

　　　　magrin-button:填充下方

示例：

5、padding:内部填充（四面填充）

　　padding-left,

　　padding-rihgt,

　　padding-top,

　　padding-button

示例：

css+div页面布局的更多相关文章

  1. DIV页面布局，开局代码

    DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  3. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  4. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  5. bootstrap+css进行页面布局

    效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...

  6. 一个简单的模板了解css+div网页布局

    直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equi ...

  7. css篇-页面布局-三栏布局

    页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...

  8. div页面布局基本布局知识

    页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 每天点滴的进行，css+div简单布局...布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. php -- 配置与安装

    1.php与apache安装路径 2.安装Apache服务 httpd -k install 开启关闭重启服务 http -k start/stop/restart 3.php.ini-develop ...

  2. UTF-8和GBK编码的区别

    UTF-8:对英文使用8位(一个字节).中文使用24位(三个字节)编码.对于英文字符比较多的网站一般用utf-8来编码以节省空间:包含全世界所有国家需要用到的字符,其编码的蚊子可以在各国各种支持utf ...

  3. ffplay源码分析1-概述

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10301215.html ffplay是一个很简单的播放器,但是初次接触仍会感到概念和细节 ...

  4. mybatis框架下物理分页的实现（整个工程采用的是springmvc、spring、mybatis框架，数据库是mysql数据库）

    (一)关于分页拦截器的简单理解 首先,要开发MyBatis的插件需要实现org.apache.ibatis.plugin.Interceptor接口,这个接口将会要求实现几个方法:intercept( ...

  5. 深入出不来nodejs源码-从fs.stat方法来看node架构

    node的源码分析还挺多的,不过像我这样愣头完全平铺源码做解析的貌似还没有,所以开个先例,从一个API来了解node的调用链. 首先上一张整体的图,网上翻到的,自己懒得画: 这里的层次结构十分的清晰, ...

  6. C# ABP WebApi与Swagger UI的集成

    本文是配置WebApi与Swagger UI,可以参照 http://www.cnblogs.com/farb/p/ABPSwaggerUIIntegration.html 1. 安装swagger ...

  7. WPF备忘录（3）如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter

    一.如何从 Datagrid 中获得单元格的内容 DataGrid 属于一种 ItemsControl, 因此,它有 Items 属性并且用ItemContainer 封装它的 items. 但是,W ...

  8. .NET世界的包管理器——Nuget

    NugetServer 使用指南 为什么要使用Nuget 在我们的项目, 存在着一些公共Dll, 这些Dll被大量的项目所引用.同时这些公共dll也同时在进行版本升级, 由于缺乏版本管理,这些Dll会 ...

  9. 配置Windows 防火墙,允许SQL Server的远程连接

    在运行SQL Server的服务器上,我们要找到哪些是SQL Server正在侦听的端口,并将其添加到Windows防火墙的入站例外. 首先,我们需要添加 SQL Server 服务侦听 Window ...

  10. 解决盒子浮动时margin会显示两倍的美观问题

    当给几个大小一样有boder的盒子浮动时,会出现margin自动加起来的结果. 此时可以给每个盒子一个margin-left:-border的长来实现很好的效果,这样右边的盒子会把左边盒子的右边bor ...