CSS布局经验谈
1.盒子模型
CSS最具特色也是最本质的可以浓缩成盒子模型。
整个页面可以通过大盒子套小盒子,盒子挨着盒子放,摆成一个页面即可。
盒子即所谓的块元素,只有块元素才有宽和高,有了宽和高才能使盒子挨着盒子放,才能确定盒子与盒子之间的距离(如:margin-left);而行内元素不同于块元素,它没有宽和高,使用margin会出问题。
2.列表
最常用也是最有代表性的就是无需列表ul了。
ul是一整个大盒子,大盒子里的每一个列表元素就是一个小盒子,这些小盒子用<li></li>表示,所有的列表元素列出来后,用float:left来朝一个方向浮动即可实现横向列表。
*在涉及到<li></li>中有标题和时间同时存在的情况,如:
<li><img src="data:images/dot.png"><a href="">三一重工获泰国史上最大工程机械订单</a><span>06-03</span></li>
显示效果如图:
如图所示:日期向下窜了一行,而且也向左窜。这个时候可以使用交叉浮动。
<li>span>06-03</span><img src="data:images/dot.png"><a href="">三一重工获泰国史上最大工程机械订单</a></li>
3.块元素严格必须要写宽和高,否则页面错乱不知道为什么!
CSS布局经验谈的更多相关文章
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
随机推荐
- iostat的深入理解
问题背景 iostat -xdm 1 通常用来查看机器磁盘IO的性能. 我们一般会有个经验值,比如,ioutil要小于80%, svctm要小于2ms. 前几天碰到一个奇怪的现象:有一台SSD机器,磁 ...
- Microsoft Visual Studio 2010中文版编译SQLlite3.7.0版
作为一名教师,没有具体项目的开发,却喜欢尝鲜,不经意间开始追星了. 换了Win7,安装了Microsoft Visual Studio 2010中文版,7月22日SQLite发布了3.7.0版.当然想 ...
- go 应用程序性能测试
runtime/pprof 我们要加入对pprof包里的方法调用,程序才能将运行时候程序的堆内存分配状态记录到文件(也可以是写到其他地方,例如网络等)中,以便进一步的分析. 如果你的go程序只是一个应 ...
- Win7安装IDL8.0以及破解
参考:http://bbs.06climate.com/forum.php?mod=viewthread&tid=5230 1.下载IDL8.1和证书 下载地址:http://yunpan.c ...
- ifstream 流 判断文件是否结尾的函数eof(.xml
pre{ line-height:1; color:#800080; font-size:16px;}.sysFunc{color:#627cf6;font-style:italic;font-wei ...
- 三角剖分求多边形面积的交 HDU3060
//三角剖分求多边形面积的交 HDU3060 #include <iostream> #include <cstdio> #include <cstring> #i ...
- poj 3094 Quicksum
#include <stdio.h> #include <string.h> ]; int main() { ; int i,len; while(gets(word)) { ...
- C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏
C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...
- cvc-elt.1: Cannot find the declaration of element 'beans'
@(编程) 现象描述 导入的一个eclipse项目报错,各种方法都无法解决,报错信息如下: cvc-elt.1: Cannot find the declaration of element 'bea ...
- 解决ehcache的UpdateChecker问题
问题描述 项目中用了ssh框架,每次启动tomcat的时候都特别慢,会在这样一句话下面停留很久 [2016-01-08 23:55:51,517 INFO UpdateChecker.java:doC ...