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. Linux根目录各个文件夹介绍及说明

    /bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基点,比如用户user的主目录就是/home/use ...

  2. JDK和Tomcat的简单配置(菜鸟巧记一)

    JDK和Tomcat的配置 1.先好安装JDK 1.1先到oracle官网下载合适自己的JDK 地址http://www.oracle.com/technetwork/java/javase/down ...

  3. Angularjs1.2版本与1.3版本中控制器的问题

    写写今天用ng遇到的一个问题吧.因为刚学习就学视频里面写例子,视频里用的是ng1.2.10版本,我用的是1.5.0. 刚开始的时候我按照ng视频的里面的写,但是控制器就是不能绑定好,后来和同学讨论加搜 ...

  4. 理解Java中的抽象

    在计算机科学中,抽象是一种过程,在这个过程中,数据和程序定义的形式与代表的内涵语言相似,同时隐藏了实现细节. 抽象:一个概念或者想法不和任何特定的具体实例绑死. 目录 什么是抽象 抽象的形式 如何在J ...

  5. Ubuntu下Tomcat初始配置

    1.下载tomcat安装包 从tomcat官方网站http://tomcat.apache.org下载安装包,然后解压到某个目录,比如: ~/opt/apache-tomcat-7.0.63官方文档中 ...

  6. ViewPager实现无限轮播踩坑记

    最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对 ...

  7. 常用DOM API

    Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有 element,text,attribute,comment,documen ...

  8. Linux编程之有限状态机FSM的理解与实现

    有限状态机(finite state machine)简称FSM,表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.FSM是一种逻辑单元内部的一种高效编程方法,在 ...

  9. vmware提示:此虚拟机似乎正在使用中,取得该虚拟机的所有权失败错误

    用vm的时候,没有挂起和关闭虚拟机,直接关实体机.然后不幸的就异常了. 启动提示:此虚拟机似乎正在使用中.如果此虚拟机已在使用中,请按"取消"按钮,以免损坏它.如果此虚拟机未使用, ...

  10. 如何解决苹果Mac系统无法识别U盘

       1.在Mac机上打开“磁盘工具”,将U盘重新分区, 2.格式选“exFAT”.该格式分区Win及Mac系统中都可以读和写,特别是可以支持大于4GB的大文件.但是一些高清播放机可能不支持. 3.以 ...