WEB标准布局(DIV+CSS)学习笔记(二)--DIV的布局基础
2019独角兽企业重金招聘Python工程师标准>>>
DIV的布局是挺基础,也挺重要的知识,有几个关键字:width、height、margin和float,用几个例子进行最简单的说明:
每个DIV独占一行的布局
先看一个很常见的例子:设计网页时,往往可以将页面分成top、center和bottom三个区域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#top {background-color: #666666;height: 50px;width: 480px;margin: 5px auto;
}#center {background-color: #CCCCCC;height: 200px;width: 480px;margin: 5px auto;
}#bottom {background-color: #666666;height: 50px;width: 480px;margin: 5px auto;
}</style>
</head><body><div id="top"> </div><div id="center"> </div><div id="bottom"> </div>
</body>
</html>
说明几点,然后再看下IE下执行的效果:
1、每个div元素默认占据一行
2、#top、#center和#bottom三个css样式中的margin属性,都定义成”margin: 5px auto“,其中,5px是为了在div之间产生一个小小的隔断;特别说明的是将margin设置了auto,在IE6以上的浏览器,这能让元素居中,要记下来。
3、div元素间,我加了一个” “,这是因为,如果你不加任何内容在里面,浏览器会忽略div的呈现,我在IE和Chrom上都尝试过。别拿空格不当内容。
多个DIV排排站的布局
由于默认情况下,每个div元素独占一行,而常见的一种布局是两个或多个div并列排排站,比如左侧的导航区域和右侧的内容区域并列显示,这时就需要通过css的样式定义来达到这个目的。其中最重要的是对float属性的设置,即css浮动的概念。
浮动的div好比漂浮在水面的一片纸,可以自由的向左或向右移动,直到其外边框碰到兄弟div或父亲div(即包含其的div)的外边框为止。要特别注意的是,浮动的div不占据文档的普通流。啥意思呢?就是说,其他不浮动的div,好像不知道这个div的存在。用两个图直观的说明一下(图片来自w3school):
没有设置浮动样式的三个框的相对位置如左图所示,各自占据一行。一旦div1设置成向右浮动(float:right),它在文档普通流中的位置就好像消失了,div2和div3自动上移,而div1则漂到了右边,直到外边框碰到父亲框。为了更直观的说明浮动属性,看下面的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#top {background-color: #666666;height: 50px;width: 480px;margin: 5px auto;
}#center {background-color: #CCCCCC;height: 200px;width: 480px;margin: 5px auto;
}#bottom {background-color: #666666;height: 50px;width: 480px;margin: 5px auto;
}#center_left {background-color: #66FF66;width: 180px;height: 200px;float: left;
}#center_right {background-color:#FFFF99;width: 300px;height: 200px;float: left;
}</style>
</head><body><div id="top"> </div><div id="center"><div id="center_left"> </div><div id="center_right"> </div></div><div id="bottom"> </div>
</body>
</html>
#center_left和#center_right中都有浮动的设置(float: left)。id为center_left和id为center_right的两个div互为兄弟,共同被id为center的div所包含,即父亲。于是左侧div向左“漂浮”,直到左边框碰到父亲div的左边框;而右侧div则在同一行向左“漂浮”(思考:为何是同一行?),直到其左边框碰到左侧div的右边框。够绕。看看效果:
左右两个div排排站了。为了说明左右浮动的概念,我稍微修改一下#center_right的样式,将width减少20元素,并将float设置成右浮动:
#center_right {background-color:#FFFF99;width: 280px;height: 200px;float: right;
}
可以看到,由于左右两个div的宽度加在一起不足父亲div的总宽度,因此中间出现了20px的空隙。
喜欢动手的我,又稍微修改了一下#center_left和#center_right两个样式,请细细观察:
#center_left {background-color: #66FF66;width: 180px;height: 200px;float: left;
}#center_right {background-color:#FFFF99;width: 300px;height: 200px;
}
这是说明浮动不占据文档流的绝佳例子!由于左侧div设置成向左浮动的样式,因此对于没有设置浮动样式的右侧div,即文档的一个普通流,会默认靠左停靠在父亲div中,于是便被浮动的左侧div遮挡住了180px。
嗯,上面这两个小小的章节,是div布局最简单的例子,能够看出,对布局样式的稍稍变动,就能产生灵活多变的外观。但这只是最最基础的东西,多多实验,从实际效果中领会。比如如何让div随着窗口的伸缩而进行浮动?
第二篇笔记就到这里了。明日我去参加今年最后一场足球赛,生命不息,踢球不止。
继续学习,继续笔记……
转载于:https://my.oschina.net/idearye/blog/187556
WEB标准布局(DIV+CSS)学习笔记(二)--DIV的布局基础相关推荐
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- Web前端开发之CSS学习笔记10—栅格布局(网格布局)
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
- Web前端开发之CSS学习笔记8—居中和自适应
目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局自适应 3.双列布局自适应 3.1双列自适应 3.2半边固定半边自适应 3.三列布局自适应 3.1浮动法 3.2绝对定位法 3.3margi ...
- css学习笔记(三)——布局模型
布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末 ...
- Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
- Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
- CSS学习笔记(二) 移动WEB开发
思维导图 文章目录 思维导图 1. 移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 移动端调试方法 2. 视口 2.1 布局视口 2.2 视觉视口 2.3 理想视口 2.4 视口总结 2 ...
- CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- CSS学习笔记(二) ----盒子模型
我们日常生活中的盒子大概见了不少了,且都为六面体,也就是说是立体的. 那么它到底跟我们学习CSS里面的盒子模型到底有些啥区别呢,之前看过不少的书,千篇一律的一句话代过,讲的也不太细,或者是讲的非细但我 ...
最新文章
- cannot access a closed file
- IDT 信息设计工具使用
- 【深度学习】深度学习预测房价:回归问题,K折交叉
- mysql-5.6.16-win32_mysql-5.6.16-win32免安装配置方法
- 03 - const static extern
- Windows10 virtualbox安装alpine+docker
- 女同志50岁退休可以早领养老金,55岁退休拿的养老金比较高,哪个更划算?
- 《推荐系统笔记(十)》CTR预估以及一般算法介绍(GBDT+LR)
- qt UI design tips
- 开发工程师需要知道的网站
- Mysql 表设计注意
- 关于父窗口、子窗口的操作(如关闭、打开、调用方法、刷新等等)
- Android 中的Binder跨进程通信机制与AIDL
- html中固定浏览器最小化,浏览器自动最小化怎么解决,如何解决浏览器自动最小化...
- 日系背景色RGB,CMYK数值
- 什么是虚拟内存?虚拟内存的原理
- centos 日志审计_生产环境日志审计
- python文件内容倒序_python倒序读取文件tail方式
- DES密码 中 S盒的代码实现
- 麦克风离计算机主机多远,直观:您对计算机麦克风的设置和使用了解多少?