外边距：

margin:1px 2px 3px 4px;

上     右     下     左

内边距：

padding:1px 2px 3px 4px;

上     右     下     左

边框不影响内边距的内容

width   height指的是内容区域的width   height

浮动：

<!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">

/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/

/*------法一

.mainBox{width:960px;

height:300px;

background-color:#cff;

clear:left;}

------*/

/*------法二------*/

.mainBox{width:960px;

background-color:#CFF;

overflow:hidden;

*zoom:1;}

.lBox{width:740px;

height:300px;

background-color:#c9f;

float:left;}

.rBox{width:210px;

height:300px;

background-color:#fcf;

float:right;}

/*------总结：常用的清除浮动的方法。

1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。

对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的 是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

此三种方法各有利弊，使用时应择优选择，个人习惯于第一种，比较稳定可靠。

参考链接：http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.html

------*/

</style>

</head>

<body>

<!--在此添加相应的div标签-->

<div class="mainBox">

<div class="lBox"></div>

<div class="rBox"></div>

</div>

</body>

</html>

css模型的更多相关文章

  1. 来谈谈你对CSS盒模型的认识？

    任何一个网页的搭建都离不开盒模型的堆砌.应该说css模型是web的一个根基,最后呈现出来的效果不同无非就是在高宽.内容与背景删的区别而已. 那么CSS模型有什么认识的呢? 首先,css盒模型有几种呢? ...

  2. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  3. css 简析folat

    1.float?? 不知道大家是否还记得之前我们讲过页面是文档流,具体什么是文档流,我就不说了?于是我们页面布局如果用div的话,那么块状的元素是怎么排列的,什么叫块状自己去看? 如果我们呢用div布 ...

  4. 让css初学者抓狂的属性float

    挣扎了好久,始终没有决定要不要写博客,心里有几个顾虑一是我是小白,我写的文章有没有人看?二是我是小白,我写的文章假如存在诸多错误,理解的不对发表上去再去误导别人.三是写一篇文章费时费力.但是我现在想明 ...

  5. [css] line boxes

    原文链接:http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85 ...

  6. 2015第10周五CSS—2

    经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标 ...

  7. ReactNative学习之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

  8. Webkit内核探究【2】——Webkit CSS实现

    注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...

  9. Webkit内核探究【2】——css简介

    注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...

随机推荐

  1. redis简介【二】

    参考:http://www.runoob.com/redis/redis-tutorial.html REmote DIctionary Server(Redis) 是一个由Salvatore San ...

  2. msp430项目编程15

    msp430中项目---简易红外遥控系统 1.红外工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习

  3. 修改flex chart中Legend的字体样式

    最近在弄FLEX的图表, 发现CHART 中的Legend 的字体通过直接设置Style 并没有办法改变字体大小. google 了下, 发现了这个方法: 通过派生LegendItem类,并设置Leg ...

  4. CommonTabLayout+ViewPager快速完成APP首页搭建

    款APP开始的时候往往少不了多页面的切换,这就涉及到viewpager的使用,以前往往用Google自带的效果去实现,比较麻烦不说,后面做出来的效果还不如人意. 下面就利用CommonTabLayou ...

  5. JVM监控工具：jps、jstat、jinfo、jmap、jhat、jstack使用介绍

    转载:http://outofmemory.cn/java/jvm/jvm-tools-jps-jstat-jinfo-jmap-jhat-jstack 一.jps(JVM Process Statu ...

  6. 基于 HTML5 WebGL 的挖掘机 3D 可视化应用

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

  7. IOS开发 AFN和ASI

    做项目有一段时间了,项目过程中处理网络请求难免的,而对于选择第三方来处理网络请求肯定是个明智的选择! AFNetworking和ASIHTTPRequest   这两个第三方该如何选择       我 ...

  8. linux 解压zip文件

    linux 解压zip文件 学习了:https://blog.csdn.net/hbcui1984/article/details/1583796 unzip xx.zip

  9. CentOS 5 全功能服务器搭建

    转自: http://www.php-oa.com/2007/12/27/centos-www.html 转:主要做为历史记录,以后用.另外很少见这么好的编译的文章,其实我不推荐用编译安装.但这个文章 ...

  10. Deepin-安装laravel

    首先获取到composer.phar wget https://getcomposer.org/download/1.6.3/composer.phar 下载以后移动到目标区域 sudo mv com ...