深度理解div+css布局嵌套盒子
1. 网页布局概述
网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容。利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位。
2. 盒子模型
盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们想要的任何效果。
在盒子模型中,所有页面中的元素都被看做是一个个盒子,它们占据一定的页面空间,在其中放着特定的内容。我们可以通过调整盒子的边框和间距等参数来调节盒子的位置以及大小。页面是由大大小小许多盒子组成的,这些盒子互相之间彼此影响,因此,我们既需要理解每个盒子内部的机构,也需要理解盒子直接的关系以及互相的影响。
3. 盒子模型的组成
在网页布局中,为了使网页中各个元素能合理地进行组织,通过研究总结出了一套完整的、有效的原则和规范,这就是盒子模型。盒子模型由content(内容)、border(边框)、padding(内边距)、margin(外边距)共4个部分组成。如下图:
一个盒子实际在页面上占据的空间是由“内容+内边距+外边距+边框”组成的,可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。另外,也不是用<div>定义的网页元素才是盒子,所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等,从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。
4.盒子border属性
盒子border也就是盒子的边框,它包围了盒子padding和内容,形成盒子的边界。border会占据空间,所以在排版计算时一定要考虑border的影响。
border的属性主要有3个,分别是颜色(color)、宽度(width)、样式(style)。设置border就是对这3个属性进行设置,它们配合好才能达到良好的效果。在使用CSS设置盒子的边框时,可以分别采用border-color、border-width、border-style进行设置。
border-color:指定边框的颜色,设置方法和color属性一样,可以可以采用颜色名称和十六进制两种方式设置。
border-width:指定边框的粗细程度
border-style:指定边框的类型。可以设置none、hidden、dotted、dashed、solid、double等值。
在CSS中设置边框的属性一般有以下4种简写方式。
1.对不同的边框设置不同的属性值
如果给出两个属性值,那么前者表示上下边框的属性,后者表示左右边框的属性;如果给出3个属性值,那么前者表示上边框的属性,中间数值表示左右边框的属性,后者表示下边框的属性;如果给出4个属性值,那么依次表示上右下左边框的属性,呈顺时针方向排序。例如以下代码:
border-color:red blue;
border-style:dotted solid double dashed;
2.在一行中同时设置边框的宽度、颜色和样式
border:4px red solid;
border-top:2px blue double;
3.对一条边框设置与其他边框的属性
border:4px red solid;
border-top:2px blue double;
这样做的好处是避免使用4条CSS规则分别对盒子的4个边框设置样式,减少了工作量。
4.只设置一条边框的某一属性
border-top-color:blue;
5.盒子padding属性
盒子padding是盒子的内边距,它一边是盒子内容一边是盒子的边界,即边框与内容之间的空白区域就是内边距padding。
padding也可以设置4个属性,效果如下:
(1)设置1个属性值:表示上下左右4个内边距的值。
(2)设置2个属性值:前者表示上下内边距的值,后者表示左右内边距的值。
(3)设置3个属性值:前者表示上内边距的值,中间数值表示左右内边距的值,后者表示下内边距的值。
(4)设置4个属性值:依次表示上右下左内边距的值,呈顺时针方向排序。
如果需要单独设置某一个方向的内边距,可以使用padding-top、padding-right、padding-bottom、padding-left来设置。
6.盒子margin属性
盒子margin是盒子的外边距,它碰不到盒子的边界,指的是页面上元素和元素直接的距离。margin和padding的设置是一样的,也可以设置不同的属性个数代表相应的含义。
7. 盒子的浮动与定位(很重要)
CSS规范首先确定了一种标准的排版方式,可以保证设置的简单化,各种网页元素都按照这种标准的方式进行布局,这就是所谓的“标准流”方式。但仅有标准流方式还不够灵活,是无法实现所有的排版方式的,所以CSS规范还给出了其他的布局方法,如“浮动”属性和“定位”属性等。
标准流
“标准文件流”简称为“标准流”,是指在不使用其他与排列和定位相关的特殊CSS规则时各种页面元素默认的排列规则。页面元素可以分为两类:
块级元素(block element):总是以一个块的形式表现出来,并和同级的兄弟依次垂直排列。比如<li>标签,总不会排在同一行,而是和相邻的<li>垂直排列,还有最常用的块级元素div。
行内元素(inline element):相邻元素之间横向排列,到最右端自动折行。比如<a>标签,<p>标签,<span>标签等。
标准流就是CSS默认的块级元素和行内元素的排列方式。在一个页面中如果没有出现特殊的排列方式,那么所有的页面元素将以标准流的方式排列,即一个个盒子形成一个序列,同级别的盒子依次在父级盒子中按照块级元素或行内元素的排列方式进行排列,同级父级盒子又依次在它们的父级盒子中排列,以此类推,整个页面如同河流和它的支流,所以称为“标准流”。
*行内元素与块级元素有什么不同?
区别一:
块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二:
块级:块级元素可以设置宽高
行内:行内元素不可以设置宽高
区别三:
块级:块级元素可以设置margin,padding
行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四:
块级:display:block;
行内:display:inline;
可以通过修改display属性来切换块级元素和行内元素。
8. 盒子的定位原则
掌握盒子在标准流中定位原则需要对margin有很深刻的理解,因为padding只在盒子内部,不会影响到盒子的外部,margin是一个盒子的外边距,它就直接影响与其他盒子直接的关系。
行内元素之间的水平定位:行级元素的水平margin是相邻margin相加的结果;
块级元素之间的垂直定位:块级元素的垂直margin是取相邻margin的最大值;
嵌套盒子之间的定位:
9. 盒子的浮动float
“浮动设置”是指CSS中的float属性的设置,默认值为none,即在默认情况下浮动效果是关闭的,采用标准流方式。浮动的盒子脱离标准流,其宽度不再自动伸展,将根据盒子里面放的内容来决定其宽度。标准流中的其他盒子将顶到浮动盒子的位置。
float属性基本释义:
该属性的值指出了对象是否浮动以及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象,即display:block;
float属性的参数:
none:对象不浮动
left:对象浮在左边
right:对象浮在右边
如何使后续的盒子不受前面浮动盒子的影响:clear:left/right/both
10.盒子的定位
CSS中的定位:通过在CSS中的position属性,将盒子定位到指定的地方。
position属性定位方式如下:
(1)static:静态定位,是默认值。
(2)relative:相对定位,盒子相对自己原来的位置,通过指定偏移量(水平方向偏移量:lefth和right属性值;垂直偏移量:top和bottom属性值),到达新位置。相对定位对父盒子及兄弟盒子没有影响。
(3)absolute:绝对定位,盒子以最近的一个已经定位的祖先元素为基准进行偏移,如果没有已经定位的祖先,则以浏览器为基准(已经定位是指已经设置position属性)。
(4)fixed:固定定位,它和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变。
11. div标签与span标签
CSS排版中经常用到<div>和<span>标签,利用这两个标签,CSS可以很方便地实现各种页面效果。
<div>和<span>标签一样,都作为容器被广泛应用于html语言中,它们都可以容纳各种各样html元素,从而可以将网页划分成多个不同的独立区块。这两个标签的区别在于:<div>是一个块级元素,它会自动换行,而<span>是一个行内元素,它的前后不会自动换行。<span>没有结构意义,纯粹是应用CSS样式,当其他行内元素都不是适合的时候,就可以使用<span>元素。
12. DIV+CSS布局网页
DIV+CSS布局,将页面在整体上使用<div>分块,然后使用CSS对各个分块进行布局,最后在各个块中添加相应的内容。也就是说DIV容器装的是内容,而CSS是作为装饰内容的样式。
典型的布局版式:比如固定宽度且居中的版式、左中右版式。
DIV+CSS布局与表格布局的比较:
通过<table>各个单元格可以轻松划分各个模块,制作简单容易;CSS通过div来划分模块,同时需要调整各模块之间的位置距离及排列。
表格布局比DIV+CSS布局维护要困难。表格布局代码与内容混合,可读性差,网页文件量大,浏览器解析慢。
深度理解div+css布局嵌套盒子的更多相关文章
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- div+css布局教程系列1
<!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...
- div+css 布局技巧总计
一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
随机推荐
- MOF编译器无法连接VMI服务器。原因可能是语义错误的解决方案
安装数据库时报错. 我这个是因为安装SQL SERVER时,没有卸载vs. 一般解决方法: WIN 7安装VS和SQL SERVER的顺序应该是先安装SQL SERVER 然后安装VS,当要重装SQL ...
- org.apache.commons.beanutils.BeanMap简单使用例子
一.org.apache.commons.beanutils.BeanMap; 将一个java bean允许通过map的api进行调用, 几个支持的操作接口: Object get(Object ke ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- POJ 2502 Subway-经过预处理的最短路
Description You have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of ...
- 004.Create a web app with ASP.NET Core MVC using Visual Studio on Windows --【在 windows上用VS创建mvc web app】
Create a web app with ASP.NET Core MVC using Visual Studio on Windows 在 windows上用VS创建mvc web app 201 ...
- json和xml封装数据、数据缓存到文件中
一.APP的通信格式之xml xml:扩展标记语言,可以用来标记数据,定义数据类型,是一种允许用户对自己标记语言进行定义的源语言.XML格式统一,扩平台语言,非常适合数据传输和通信,业界公认的标准. ...
- jvm 加载class文件过程
jvm 加载class文件分为装载-链接-初始化三个过程. load -------->link verify prepare resolve ---------->initial ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- 类 java.util.Scannar方法
类 java.util.Scannar方法 ·Scannar (InputStream ln):用给定的输人流创建一个Scanner对象. ·String nextLlne():读取输入的下一行内容. ...
- 输出a-b之间的随机数并考虑异常
输出a-b之间的随机数并考虑异常 代码如下: package Day05;import java.util.Scanner;import java.util.Random; public class ...