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布局经验谈的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

随机推荐

  1. ajax url参数中文乱码解决

    1.较好的处理办法,对js的url中的中文参数值使用两次encodeURI(),即 encodeURI(encodeURI("url的中文参数值")), java代码中使用URLD ...

  2. java 学习资料

    最近一直在从java基础开始学习java,感觉个人学习思路还是比较混乱的. 看到Java工程师成神之路中介绍了需要学习的知识点,并在<成神之路系列文章>中分章分节的开始介绍其中所有的知识点 ...

  3. collect my database for test KCF tracker tools

    Path Button used to set dir where avi file saves, set path set video size and start record write to ...

  4. nagios高可用性设置

    1. 前言 如何来实现nagios监控系统的高可用,监控是很重要的,在关键时刻进行通知报警,通知人员进行相应的处理. 在进行配置的时候,需要配置两台相同服务的nagios服务器,配置相同,同时在运行, ...

  5. C使用FILE指针文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...

  6. ps教程-三分钟画齿轮

  7. Javascript模板及其中的数据逻辑分离思想(MVC)

    #Javascript模板及其中的数据逻辑分离思想 ##需求描述 项目数据库的题目表描述了70-120道题目,并且是会变化的,要根据数据库中的数据描述,比如,选择还是填空题,是不是重点题,题目总分是多 ...

  8. 面试题收集——Java基础部分(一)

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/3641769.html 感谢! 1.一个".java"源文件中是否可以包括多个类(不是内部类) ...

  9. DataTable的新建、查询、添加和修改

    详细讲解了C#开发中数据类型DataTable的使用,包括新建DataTable,查询DataTable,在DataTable里添加记录,添加 列,修改列的属性以及修改某行某列的值的方法.同时说明了将 ...

  10. HDU 2034 人见人爱A-B 分类: ACM 2015-06-23 23:42 9人阅读 评论(0) 收藏

    人见人爱A-B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...