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. php curl简单使用

    使用PHP的cURL库可以简单和有效地去抓网页,您只需要运行一个脚本,然后分析一下您所抓取的网页,然后就可以以程序的方式得到您想要的数据了.无论是您想从一个链接上取部分数据,或是取一个XML文件并把其 ...

  2. hdu 4876(剪枝+暴力)

    题意:给定n,k,l,接下来给出n个数,让你从n个数中选取k个数围成一圈,然后从这k个数中随意选出连续的m(m>=1&&m<=k)个数进行异或后得到[l,r]区间的所有值, ...

  3. [整] Android Fragment 生命周期图

    1. onAttach ------called once the fragment is associated with its activity 2. onCreate-------called ...

  4. Locker

    题意: 有2个数字串,每次可以变化1-3位(每位+1或-1(0-9,9-0)可循环),求由1串变到2串的最小用的次数. 分析: dp[i][num]表示变到第i位时最后两位组成的数是num时最小次数( ...

  5. testng之listener

    这周在给人培训selenium+testng框架时,讲到listener这块发现对listener并没有完全了解,于是自己又重新学习了下. 以下是 TestNG 提供的几种监听器: IAnnotati ...

  6. Invalid encoding name "UTF8". 报错 XML

    报错:2013-07-05 10:59:49,111 ERROR [STDERR] [Fatal Error] :1:38: Invalid encoding name "UTF8" ...

  7. python27+django调用数据库

    我用的mysql版,先上无模板的版本,在views里加上 import MySQLdb 然后在下方写函数 def use_databases(request): db = MySQLdb.connec ...

  8. Leetcode 225 Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  9. 关系数据库&amp;&amp;NoSQL数据库

    在过去,我们只需要学习和使用一种数据库技术,就能做几乎所有的数据库应用开发.因为成熟稳定的关系数据库产品并不是很多,而供你选择的免费版本就更加少了,所以互联网领域基本上都选择了免费的MySQL数据库. ...

  10. Git 的核心概念解读

    本文不是Git使用教学篇,而是偏向理论方面,旨在更加深刻的理解Git,这样才能更好的使用它,让工具成为我们得力的助手. 版本控制系统 Git 是目前世界上最优秀的分布式版本控制系统.版本控制系统是能够 ...