1、CSS盒子模型概述

盒子模型的内容范围包括：margin(外边距)、border(边框)、padding(内边距)、content(内容)部分组成。

2、内边距

内边距在content外，border内，属性有5个：

padding:设置所有边距

padding-bottom:设置底边距

padding-left:设置左边距

padding-right:设置右边距

padding-top:设置上边距

3、边框

我们可以创建效果出色的边框，并且可以应用于任何元素。边框的样式为border-style，定义了10个不同的非继承样式，包括none。

4、外边距

围绕在内容外框的区域就是外边距，外边距默认为透明区域，外边距接受任何长度单位、百分数值。外边距常用属性：

margin:设置所有边距

margin-bottom:设置底边距

margin-left:设置左边距

margin-right:设置右边距

margin-top:设置上边距

5、外边距合成

如果两个一样的盒子，其margin都是100px，盒子上下排列，盒子之间的margin会自动合成，为100px，而不会为200px。

6、盒子模型应用

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>盒子模型的应用</title>
     <link href="1.css" type="text/css" rel="stylesheet">
 </head>
 <body>
     <div class="top">
         <div class="top_content"></div>
     </div>
     <div class="body">
         <div class="body_img"></div>
         <div class="body_content">
             <div class="body_no"></div>
         </div>
     </div>
     <div class="footing">
         <div class="footing_content"></div>
         <div class="footing_subnav"></div>
     </div>
 </body>
 </html>

对应的css文件：

 *{
     margin:0px;
     padding:0px;
 }
 .top{
     width: 100%;
     height: 50px;
     background-color: black;
 }
 .top_content{
     width: 75%;
     height: 50px;
     margin: 0px auto;
     background-color: blue;
 }
 .body{
     margin: 20px auto;
     width: 75%;
     height: 1500px;
     background-color: blanchedalmond;
 }
 .body_img{
     width: 100%;
     height: 400px;
     background-color :darkorange;
 }
 .body_content{
     width:100%;
     height: 1100px;
     background-color: blueviolet;
 }
 .body_no{
     width: 100%;
     height: 50px;
     background-color: aqua;
 }
 .footing{
     width: 75%;
     height: 400px;
     background-color: coral;
     margin:0px auto;
 }
 .footing_content{
     width: auto;
     height: 330px;
     background-color: chartreuse;
 }
 .footing_subnav{
     width: auto;
     height: 70px;
     background-color: black;
 }

[CSS3] 学习笔记--CSS盒子模型的更多相关文章

  1. 1.26学习总结——css盒子模型

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  2. CSS学习笔记07 盒子模型

    1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...

  3. CSS学习笔记：盒子模型

    盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each ...

  4. HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  6. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  7. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  8. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  9. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

随机推荐

  1. MySQL 1054错误 Unknown column .... in 'on clause'

    ERROR 1054 (42S22): Unknown column ... in 'on clause' 原因: MySQL5.0 Bug, 要把联合的表用括号包含起来才行: 例: SELECT ( ...

  2. [Unity Quaternion]四元数Quaternion的计算方式

    什么是Quaternion四元数 1843年,William Rowan Hamilton发明了四元数,但直到1985年才有一个叫Ken Shoemake的人将四元数引入计算机图形学处理领域.四元数在 ...

  3. ZOJ 3537 Cake

    区间DP. 首先求凸包判断是否为凸多边形. 如果是凸多边形:假设现在要切割连续的一段点,最外面两个一定是要切一刀的,内部怎么切达到最优解就是求子区间最优解,因此可以区间DP. #include< ...

  4. js arguments.callee & caller的用法及区别

    在函数内部,arguments.callee该属性是一个指针,指向拥有这个arguments对象的函数; 而函数对象的另一个属性:caller,这个属性保存着调用当前函数的函数的引用,如果是在全局作用 ...

  5. kvm下Windows激活方式小计

    使用kvm创建widnwos镜像模板,镜像模板默认是已经激活的正版系统,但是使用程序拷贝部署到不同的机器后发现已经激活的系统变成未激活状态,我们需求就是需要拷贝到不同的机器也能显示是正版系统 网上找了 ...

  6. Zabbix日志错误总结（持续更新）

    no active checks on server [*.*.*.*:10051]: host [*] not found failed to accept an incoming connecti ...

  7. 【转】15款Java程序员必备的开发工具

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...

  8. 无锁同步-C++11之Atomic和CAS

    1.概要 本文是无锁同步系列文章的第一篇,主要探讨C++11中的Atomic. 我们知道在C++11中引入了mutex和方便优雅的lock_guard.但是有时候我们想要的是性能更高的无锁实现,下面我 ...

  9. UVa 231 - Testing the CATCHER

    题目大意:一种拦截导弹能拦截多枚导弹,但是它在每次拦截后高度不会再升高,给出导弹的序列,问最多能拦截多少枚导弹? 最长递减子序列问题. #include <cstdio> #include ...

  10. java系列--JSON数据的处理

    http://blog.csdn.net/qh_java/article/details/38610599 http://www.cnblogs.com/lanxuezaipiao/archive/2 ...