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. PHP操作mysql类

    <?php class Mysql{ //数据库连接句柄 private $link; //返回结果集 private $result; //返回查询数据 private $data; //执行 ...

  2. kafka第五篇

    架构设计:http://www.linuxeden.com/html/news/20130309/136716_2.html 代码实现consumer 和producer

  3. HUST 1376 Random intersection

    神题.同学指教.1秒AC...http://blog.csdn.net/jtjy568805874/article/details/50724656 #include<cstdio> #i ...

  4. php json_decode返回失败的排查

    参考网址: https://segmentfault.com/a/1190000006154011 返回失败时,通过 json_last_error可以获取其json解析失败的原因.

  5. 多线程的并发问题,lock用法

    开启多个线程,每个线程中多次操作公共变量 using System; using System.Collections.Generic; using System.Linq; using System ...

  6. 深入理解yield(转)

    yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法.只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子: def addlist(a ...

  7. iOS 程序测试、程序优化、提交前检测

    1. 数据显示如果是数值要考虑到0的情况 2. 数据变化对前一个页面及相关页面的影响,也即数据同步问题.如果是有其它设备改变数据,那数据请求就应该在willappear(视图将要显示事件)进行请求,以 ...

  8. fastreport.net cdoe 自己的代码

      //初始             Report report1 = new Report();             report1.Clear();             string Re ...

  9. PHP常用函数（收集）

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...

  10. Spring的IOC原理[通俗解释一下]

    Spring的IOC原理[通俗解释一下] 1. IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图 ...