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. Python之路【第三篇】：模块

    定义: 包:包含__init__.py文件.模块(也是.py文件) 当包被其它模块调用时,首先会执行该包下的__init__文件 包含有模块,包可以有多级 模块的导入: import from...i ...

  2. Datetime.GetDateTimeFormats()的集合

    Asp.net中的日期处理函数//2007年4月24日this.TextBox6.Text = System.DateTime.Now.ToString("D");//2007-4 ...

  3. EnablePrefetcher注册表项的修改与电脑提速

    前些天在图书馆找教材,偶然发现一本windows dos命令应用技巧的书,发现了几个有用的注册表项 EnablePrefetcher这个注册表项是windows用来控制系统预读取数据开放程度的参数,其 ...

  4. MongoDB和Java-PHP

    一.java操作mongoDB 配置环境: 1.下mongodb JDBC驱动mongo-java-driver-3.2.2.jar,并包含在classpath中 步骤: 1.连接数据库 // 连接到 ...

  5. java8 泛型声明 The diamond operator ("<>") should be used

    The diamond operator ("<>") should be used Java 7 introduced the diamond operator (& ...

  6. java--反射和注解

    一.java.lang.reflect类   Class类 1.反射机制(Reflection):通过类创建对象, 2.反射机制提供了如下功能: 在运行时,判断任意一个对象所属的类 构造任意一个类的对 ...

  7. Core Data需求

    大家都在讨论怎么使用Core Data,但是什么时候用到Core Data,这好像是大家很少讨论的问题 我们使用Core Data ,主要用来存储两种类型的数据:固定的数据,和 可能变化的数据. 1. ...

  8. window 2008+apache2.4.4+php5.5+mysql-5.6.12+phpmyadmin4.0.4.1安装过程(参考他人文章基础上加上自己遇到的问题)

    一.window server2008的安装 1.我用U盘安装的,先用UltraISO把server2008刻录到U盘中,过程我搜了一下,帖个地址: http://wenku.baidu.com/vi ...

  9. @RequestBody和@ResponseBody

    @RequestBody 将HTTP请求正文转换为适合的HttpMessageConverter对象. @ResponseBody 将内容或对象作为 HTTP 响应正文返回,并调用适合HttpMess ...

  10. apache 做负载

    首先说明一下,我感觉这种办法不太好,不能叫负载吧.不知道跳转到的服务器把数据返回给用户,还通不通过Apache的服务器,还有就是不能断点下载了 方法 1.打开httpd.conf  把如下模块前面的# ...