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. 克服悲伤情绪的三个P原则

    1.自责(Personalization) --不要自责 2.永久化(Permanence) --悲伤不会永远存在,一切都会过去 据科学研究发现:人遇到开心或悲伤的事情之后,心情在短期内会产生巨大的波 ...

  2. MATLAB实例:对称双随机矩阵

    MATLAB实例:对称双随机矩阵 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 双随机矩阵(doubly stochastic matrix):元素属 ...

  3. Node.js接口避免重复启动

    众所周知,一个Node接口要是想被调用,得先在命令行中执行如下代码来启动接口 node base.js 但是一旦修改了base.js,就得重新执行这句命令 注:这里的base.js是我的node接口文 ...

  4. Linux下查看哪些进程占用的CPU、内存资源

    1.CPU占用最多的前10个进程: ps auxw|head -1;ps auxw|sort -rn -k3|head -10 2.内存消耗最多的前10个进程 ps auxw|head -1;ps a ...

  5. acwing 23. 矩阵中的路径

    习题地址 https://www.acwing.com/problem/content/description/21/ 题目描述请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路 ...

  6. 【翻译】spring-data 之JdbcTemplate 使用

    文档 Jdbc的使用 基础的代码结构: 一个Application作为入口.IUserRepository和UserRepository作为具体的实现.applicationContext.xml定义 ...

  7. 【C#】C#中的HtmlEncode与HtmlDecode:HttpUtility.HtmlEncode,HttpUtility.HtmlDecode,Server.HtmlEncode,Server.HtmlDecode,WebUtility.HtmlEncode,WebUtility.HtmlDecode

    HtmlEncode(String) 将字符串转换为 HTML 编码字符串. HtmlDecode(String) 将已经为 HTTP 传输进行过 HTML 编码的字符串转换为已解码的字符串. 在we ...

  8. vscode常用快捷键与插件推荐

    一.vscode常用快捷键 1.新建文件:chtr+n 2.新开窗口:ctrl+shift+n 3.分屏:ctrl+1/2/3  4.切换文件:alt+1/2/3或ctrl+tab 5.关闭当前窗口: ...

  9. Oracle讨论Java 13版本

    JDK 13提高了应用程序性能,添加了两种语言功能预览,以及更多JDK 13  根据Oracle Java Team的说法,JDK 13致力于通过提高Java SE平台和JDK的性能,稳定性和安全性来 ...

  10. 【Linux命令】常用系统工作命令11个(echo、date、reboot、poweroff、wget、ps、top、pidof、kill、killall、pkill)

    目录 echo命令 date命令 reboot命令 poweroff命令 wget命令 ps命令 top命令 pidof命令 kill命令 killall命令 pkill命令 一.echo命令 ech ...