CSS盒子和DIV布局

(2013-11-24 16:17:29)

一、认识div层

1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,table,img,form等,然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰,不会影响其他HTML元素。

2.Div和span的区别
大部分div层都可以使用span标记代替
Div是一个块级元素,其包含的元素会自动换行;span标记是一个行内标记,其前后不会发生换行。
Div标记可以包含span标记元素,但span标记一般不包含div标记。
在网页设计中,对于较大的块可以使用div完成,而对于具有独特样式的单独HTML元素,可以使用span标记完成。
二、盒子模型
1.将网页上每个HTML元素视为长方形的盒子,是网页设计上的一大创新。
CSS中,所有页面元素都包含在一个矩形框内,这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小,因此盒子可以影响其他元素的位置及大小。
2.盒子模型是由margin(边界)、border(边框)、padding(空白)和content(内容)几个属性组成。

content(内容):盒子模型中必需的部分,可以是文字、图片等元素
padding(空白):也称页边距或补白,用来设置内容和边框之间的距离
border(边框):可以设置内容边框线的粗细、颜色和样式等。
margin(边界):外边距,用来设置内容与内容之间的距离

一个盒子的实际高度(宽度)是由content+padding+border+margin组成。
可以通过设定width和height来控制content的大小,并且对于同一个盒子,都可以分别设定4条边的border,padding和margin。
3.border边框:是内边距和外边距的分界线,可以分离不同的HTML元素
有3个属性,分别是边框样式(style)、颜色(color)和宽度(width)
4.padding内边距:定义内容与边框之间的距离。
padding:
length
padding: padding-top
| padding-right | padding-
bottom | padding-left
5.margin外边距:用来设置页面元素与元素之间的距离,定义元素周围的空间范围
margin: auto | length
margin-top | margin-right | margin-bottom
|
 margin-left
行内元素margin设置
非行内元素块之间margin设置
父子块之间的margin设置
其中子块的margin设置将会以父块的content为参考。
三、页面基本排版
CSS+DIV页面排版的思想是,首先在整体上进行<div>标记的分块,然后对各个块进行CSS定位,最后再在各个块中添加相应的内容。
1.将页面用DIV分块 
首先要整体构思,将网页划分几个部分,采用的结构:上中下结构、左右两列结构等。
根据不同的部分,划分几个DIV块,用来存放不同的内容,大块中可以存放不同的小块


5个层:
1. container:布局容器,整个页面结构和内容都在这个容器中。
2. banner:页头部分
3. footer:页脚部分
4. content:页面主体部分,又包含了两个层:
     right层
     left层

 
 

(转)盒子概念和DiV布局的更多相关文章

  1. DIV布局之道二:DIV块的嵌套,DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  2. div 布局

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

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  4. HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

  5. 父元素高度不确定,子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  6. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  7. 小div布局之卡片堆叠(card-stacking)

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  8. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  9. 【html】【9】div布局[div层叠]

    让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现. 重叠样式需要主要CSS样式解释1.z-index 重叠顺序属性2.position:relative和position:abs ...

随机推荐

  1. 如何让.Net线程支持超时后并自动销毁!

    如何让.Net线程支持超时后并自动销毁! 1.使用CancellationTokenSource之基于Task实现方式 CancellationTokenSource source = new Can ...

  2. [转] 面向对象原则之GOF是招式,九大原则才是精髓

    只有到了一定层次后才会真正的深入体会到面向对象的一些知识点啊! 不谈具体程序,谈的是你对软件的理解 模式: 每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心. “模式”这个 ...

  3. Java 中Calendar、Date、SimpleDateFormat学习总结

    在之前的项目中,经常会遇到Calendar,Date的一些操作时间的类,并且总会遇到时间日期之间的格式转化问题,虽然做完了但是总是忘记,记不清楚,每次还都要查找资料.今天总结一下,加深印象. Cale ...

  4. java排序算法之冒泡排序

    冒泡排序的基本思想即将一串数字进行由小到大进行排序 例如1,9,7,2,4,3,6,10,20,5 实现思路: 第一个数分别与接下来的数字做对比 第一次  1<9不变,再1<7不变,1&l ...

  5. 微信 python 接口 -- itchat 文档

    itchat 一. 安装 $ pip install itchat 特殊的字典使用方式 通过打印 itchat 的用户以及注册消息的参数, 可以发现这些值都是字典. 但实际上 itchat 精心构造了 ...

  6. Kafka官方文档翻译——简介

    简介 Kafka擅长于做什么? 它被用于两大类应用: 在应用间构建实时的数据流通道 构建传输或处理数据流的实时流式应用 几个概念: Kafka以集群模式运行在1或多台服务器上 Kafka以topics ...

  7. vmware克隆虚拟机后网卡名称及网络地址xiuf

    使用vmware克隆虚拟机后,若原主机网卡名称为eth0,那么克隆后的主机使用ifconfig查看仅能看到一个名称为eth1的网卡 并且在/etc/sysconfig/network-scripts/ ...

  8. zepto的使用方法

    有些不了解zepto的同学在刚接触的时候肯定有很多疑惑,这个东西怎么用啊,去哪里下载啊,什么时候该用什么时候不该用啊,其实我以前也是这样的.jquery使用多了那么就让我们一起来了解下zepto把. ...

  9. react-router 踩坑记

    react-router踩坑分享 背景 辛苦历程 JavaScript动态修改 第一次尝试 第二次尝试 第三次尝试 第四次尝试 总结步骤 其他方案 原理 History 常见的3种History Br ...

  10. tokuDB 安装与备份小记

    线上的数据增长越来越快,数据量的增长也愈来愈大,尤其是日志类数据,这对于数据迁移.数据备份恢复而言,都是一个非常大的挑战. 于是想到了 13 年开源 tokuDB 存储引擎,来解决我们迫在眉睫的容量问 ...