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. UIStepper 缩放：UI的使用

    // 实现文件:声明在对应的.h文件.继承至UIViewControllor - (void)viewDidLoad { [super viewDidLoad]; // 按钮 self.stp = [ ...

  2. hashmap如何初始化

    现在知道的有两种: 1) Map<String, String> hashMap = new HashMap<String, String>(){            {   ...

  3. 函数之return

    return语句用来从一个函数 返回 即跳出函数.我们也可选从函数 返回一个值 .使用字面意义上的语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 例7.7 使用字面意义上的语句 ...

  4. iOS开发——An App ID with identifier "*****" is not avaliable

    Error: An App ID with identifier "*****" is not avaliable. Please enter a different string ...

  5. Led控件

    在 WindowMobile 上的模拟LED 显示屏插件 一个简单Led控件 一个经典的控制Led的单片机程序 Led控件(2)——Led显示屏模拟

  6. AFNetworing进行POST上传 分类： ios技术 2015-04-01 17:03 73人阅读 评论(0) 收藏

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; //申明返回的结果是json类型 m ...

  7. 微信小程序实操－image height:auto问题，url地址报错，“不在以下合法域名列表中”问题等

    1.修改app顶部title 使用API: wx.setNavigationBarTitle({ title: 'titleName'}); 2.ajax请求 wx.request({ url: 'h ...

  8. android 多线程Thread,Runnable,Handler,AsyncTask

    先看两个链接: 1.http://www.2cto.com/kf/201404/290494.html 2. 链接1: android 的多线程实际上就是java的多线程.android的UI线程又称 ...

  9. CodeForces 755C PolandBall and Forest (并查集)

    题意:给定每一点离他最远的点,问是这个森林里有多少棵树. 析:并查集,最后统计不同根结点的数目即可. 代码如下: #pragma comment(linker, "/STACK:102400 ...

  10. UVa 10033 - Interpreter

    题目大意:模拟题,有一些寄存器和随机访问内存,给你一些指令以及它们代表的操作,模拟操作即可. #include <cstdio> #include <cstring> #def ...