web页面布局思想
2016-01-09 11:21
260 查看
一、盒子模型
网页可以看成由一个个"盒子"组成,如图:
由上图可以看出,页面分为上(网站导航)、中、下(版权声明)三个部分,中间部分又分为左(商品分类)、中(主要部分)、右,这些版块就像一个个的盒子,这些"盒子"中放置着各种内容,页面就是由这些"盒子"拼凑起来,先将这些“盒子”的位置样式确定下来,然后在分别确定“盒子”内的样式,绝对不会跑
盒子模型的相关属性
margin(外边距/边界)border(边框)
padding(内边距/填充 )
我们看图理解一下各属性作用:
盒模型的层次关系
我们通过一个经典的盒模型3D立体结构图来理解,如图:从上往下看,层次关系如下:
第1层:盒子的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景色(background-color)
第5层:盒子的外边距(margin)
从这个层次关系中可以看出,当同时设置背景图和背景色时,背景
图将在背景色的上方显示
水平居中和垂直居中
水平居中包含两种情况:块级元素的水平居中:margin:0px auto;
文字内容的水平居中:text-align: center;
垂直居中:
常见的单行文字的垂直居中可设置文字所在行的height与
行高样式属性一致,比如:
div{ width: 400px; height: 400px; line-height: 400px;/*行高与div高度一致*/ }
相关文章推荐
- 再来20 个免费的Bootstrap 的后台管理模板
- Android如何缩放应用中的字体大小
- Binder与Service 通信机制详解四 (源码分析AIDL工作机制)
- LinkedIn是如何优化Kafka的
- 【转载】LinkedIn是如何优化Kafka的
- Android中插件开发篇之----应用换肤原理解析
- R 语言绘图005-函数par()详解
- 好代码的科学定义
- 简单图像运算
- CDI进阶第一步 CDI拦截器
- MFC中ListControl控件的使用
- phonegap安装说明
- 在WEB项目中调用QQ通讯组件打开QQ聊天界面
- 施用 maven shade plugin 解决 jar 或类的多版本冲突
- js之静态方法与实例方法
- 初入ROS
- 【转】C/C++中extern关键字详解
- .NET之特性和属性
- ubuntu下配置JDK7环境变量
- List调用toString()方法后,去除两头的中括号