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. selenium firefox

    https://github.com/SeleniumHQ/selenium/blob/master/java/CHANGELOG https://github.com/mozilla/geckodr ...

  2. 生成R文件

    aapt package -f -m -J H:/workspaces/java_android/Test2/gen -S H:/workspaces/java_android/Test2/res - ...

  3. implemented loader.php

    http://stackoverflow.com/questions/11787176/manage-url-routes-in-own-php-framework This is how i imp ...

  4. (中等) HDU 5293 Tree chain problem，树链剖分+树形DP。

    Problem Description   Coco has a tree, whose vertices are conveniently labeled by 1,2,…,n.There are ...

  5. [Unity Shader]光照模型对物体的假设

    什么是光照模型 光照模型就是模拟光在物体间的传递过程,以确保物体可见表面每一点的亮度和颜色. 当光照射到一个物体表面时,光可能被吸收.反射或折射.反射和折射的光使物体可见.如果入射光全部被吸收,物体将 ...

  6. 把View转化成Image

    + (UIImage *) imageWithView:(UIView *)view { UIGraphicsBeginImageContextWithOptions(view.bounds.size ...

  7. memcache数据组织

    转自:原链接 使用命令 set(key, value) 向 memcached 插入一条数据, memcached 内部是如何组织数据呢 一 把数据组装成 item memcached 接受到客户端的 ...

  8. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  9. html小知识

    button标签如果不设置type,默认是submit,会自动提交表单 input type=file, 添加multiple属性后可以同时选择多个文件,同时name设置接受一个数组 <inpu ...

  10. java实现——003二维数组中的查找

    import java.util.Scanner; public class T003 { public static void main(String[] args) { Scanner in = ...