Web页面中的每一个元素都是一个盒模型，CSS中使用盒模型来描述一个元素。CSS盒子模型又称框模型，它包含四个边界，分别是外边距边界(Margin)、边框边界(border)、内边距边界(padding)、内容边界(content)。

一、内容区域设定。

　　weight:　　宽度的设定

　　height:　　高度的设定

宽度和高度的设定可以是具体的数值（带单位），也可以是百分比设置。

二、内边距（padding）属性

　　padding复合属性：

　　　　padding-top 上内边距

　　　　padding-right 右内边距

　　　　padding-bottom 下内边距

　　　　padding-left 左内边距

内边距的设定：

1、盒子的内边距分为上右下左四个方向。

2、内边距的设定用来控制盒子中装载的内容到盒子边缘（边框）之间的距离。

3、盒子的内边距占据的是盒子里面的空间，最小是0，不允许出现负值。

二、外边距（margin）属性

　　margin复合属性：

　　　　margin-top 上外边距

　　　　margin-right 右外边距

　　　　margin-bottom 下外边距

　　　　margin-left 左外边距

外边距（margin）的设定：

1、盒子的外边距分为上右下左四个方向。

3、外边距的设定用来控制盒子外围四周的距离，不属于盒子本身的范畴。

3、外边距的主要用途是控制盒子的位置，所以可以出现负值。

三、边框（border）属性。

　　border复合属性：

　　　　1.边框按方向分类的拓展属性

　　　　　　border-top 上边框

　　　　　　border-right 右边框

　　　　　　border-bottom 下边框

　　　　　    border-left 左边框

　　　　2.边框按属性要素分类的拓展属性

　　　　　　border-width:　　边框宽度

　　　　　　border-style:　　边框样式

　　　　　　border-color:　　边框色彩

边框（border）的设定：

1、大部分元素对象在默认情况下是没有边框的。

2、要设定边框，必须同时设定三个要素：宽度、样式、色彩。

四、盒子的宽与高。

　　盒子的宽度=内容宽度+右左内边距+左右边框

　　盒子的高度=内容高度+上下内边距+上下边框

　　盒子占位宽度=盒子的宽度+左右外边距

　　盒子占位高度=盒子的高度+上下外边距

五、方向性复合属性值的缩写方法

　　具有方向性的复合属性可以在一个声明中设置所有方向的定义，该方向可以具有1-4个值。

　　　　1个值：　　四个方向

　　　　2个值：　　上下/右左

　　　　3个值：　　上/左右/下

　　　　4个值：　　上/右/下/左

六、实例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型之边框</title>

        <style>

            .box1{

                height: 200px;

                width: 400px;

                border: 20px red solid;         /*border 盒子边框*/

                padding: 30px;

            }

            .box2{

                height: 198px;

                width: 398px;

                border: 1px rosybrown solid;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2"></div>

        </div>

    </body>

</html>

结果：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型应用</title>

        <style type="text/css">

            .box1{

                height: 300px;

                width: 647px;

                border: 25px solid;

                border-color: darkred black black darkred;

                padding: 20px 40px;

                background-color: antiquewhite;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div>

                <img src="../img/15-4.jpg"/>

            </div>

        </div>

    </body>

</html>

结果：

　　　　　　

Html学习之十五（盒模型）的更多相关文章

  1. python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）

    python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...

  2. 201671010140. 2016-2017-2 《Java程序设计》java学习第十五周

    java学习第十五周 Java的GUI界面设计,框架以及主要部件填充,归置,布局管理,在第十一章和第十二章进行了系统的学习,在这两章的知识奠基下,可以简单的构造一个GUI用户界面,在两周的学习后,可以 ...

  3. 学习笔记：CentOS7学习之十五： RAID磁盘阵列的原理与搭建

    目录 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建 14.1 RAID概念 14.1.1 RAID几种常见的类型 14.1.2 RAID-0工作原理 14.1.3 RAID-1工 ...

  4. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

  5. HTML+CSS学习笔记 (11) - CSS盒模型

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  6. css学习の第三弹—盒模型的创建和使用

    一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...

  7. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  8. (C/C++学习笔记) 十五. 构造数据类型

    十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...

  9. Linux学习之十五、基础正规表示法\延伸正规表示法

    原文地址: http://vbird.dic.ksu.edu.tw/linux_basic/0330regularex_2.php 基础正规表示法 既然正规表示法是处理字串的一种表示方式,那么对字节排 ...

随机推荐

  1. linux 的swap、swappiness及kswapd原理【转】

    本文讨论的 swap基于Linux4.4内核代码 .Linux内存管理是一套非常复杂的系统,而swap只是其中一个很小的处理逻辑. 希望本文能让读者了解Linux对swap的使用大概是什么样子.阅读完 ...

  2. 初级模拟电路：3-2 BJT的工作原理

    回到目录 和前面介绍二极管的PN结的工作原理一样,BJT的量子级工作机制也非常复杂,一般教科书上为了帮助学习者能快速理解,也都是用一种简化模型的方法来介绍BJT的工作机理,一般只需大致了解即可.只要记 ...

  3. CodeForces - 722C（思维+倒着并查集）

    题意 https://vjudge.net/problem/CodeForces-722C 给你一个由n个非负整数组成的数列 a1​ ,a2​ ,...,an​ . 你将要一个一个摧毁这个数列中的数. ...

  4. poj 1979 Red and Black 题解《挑战程序设计竞赛》

    地址 http://poj.org/problem?id=1979 Description There is a rectangular room, covered with square tiles ...

  5. WPF DataGrid 双击行 获得绑定数据

    原文:WPF DataGrid 双击行 获得绑定数据 1)增加事件 2)增加对象获取 1)事件代码 Datagrid 增加事件 MouseDoubleClick="dataGrid_Mous ...

  6. antd配置config-overrides.js文件

    下载antd 包 npm install antd 下载依赖包(定义组件按需求打包) npm install react-app-rewired customize-cra babel-plugin- ...

  7. xml模块(了解)

    目录 一.xml简介 二.Python使用xml 三.自己创建xml文档 一.xml简介 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在 ...

  8. golang--连接redis数据库并进行增删查改

    (1)安装第三方开源的redis库: (2)在使用redis之前,需要安装第三方库,在GOPATH路径下执行安装指令--$GOPATH$:go get github.com/garyburd/redi ...

  9. php处理curl的返回结果

    最简单的方式: json_decode($res,true): 结果都是:

  10. Eclipse引入自定义XML约束文件(DTD,SCHEMA)问题

    Eclipse引入自定义XML约束文件(DTD,SCHEMA)问题 1:说明 使用Eclipse 编写xml文件的约束文件的,包括DTD约束文件,Schema约束文件的时候, 我们也需要接受eclip ...