Html学习之十五（盒模型）
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学习之十五（盒模型）的更多相关文章
- python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）
python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第十五周
java学习第十五周 Java的GUI界面设计,框架以及主要部件填充,归置,布局管理,在第十一章和第十二章进行了系统的学习,在这两章的知识奠基下,可以简单的构造一个GUI用户界面,在两周的学习后,可以 ...
- 学习笔记：CentOS7学习之十五： RAID磁盘阵列的原理与搭建
目录 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建 14.1 RAID概念 14.1.1 RAID几种常见的类型 14.1.2 RAID-0工作原理 14.1.3 RAID-1工 ...
- 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录
风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...
- HTML+CSS学习笔记 (11) - CSS盒模型
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- css学习の第三弹—盒模型的创建和使用
一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...
- Html和Css学习笔记-css进阶-盒模型
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- (C/C++学习笔记) 十五. 构造数据类型
十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...
- Linux学习之十五、基础正规表示法\延伸正规表示法
原文地址: http://vbird.dic.ksu.edu.tw/linux_basic/0330regularex_2.php 基础正规表示法 既然正规表示法是处理字串的一种表示方式,那么对字节排 ...
随机推荐
- Python爬虫（学习准备）
编码格式的认识: 字符:各种文字和符号的统称 字符集:多个字符的集合 字符集包括:ASCII字符集,GB2312字符集,GB18030,Unicode字符集等 1个字符ASCII编码占1个字节,用Un ...
- IDEA的@Override下面有红色波浪线怎么去掉
测试了 , 不会影响运行 ! 去掉红线 ! file - seting - java compiler - 把两个version都改成1.8 ! ( 因为我的jdk是1.8) file - pr ...
- 如何在python中使用Elasticsearch
什么是 Elasticsearch 想查数据就免不了搜索,搜索就离不开搜索引擎,百度.谷歌都是一个非常庞大复杂的搜索引擎,他们几乎索引了互联网上开放的所有网页和数据.然而对于我们自己的业务数据来说 ...
- ＂中国东信杯＂广西大学第二届程序设计竞赛E Antinomy与红玉海（二分）
题目大意: n个人,每个人想参加a[i]轮游戏,但每场游戏必须有个一个人当工具人 问最少有几场游戏 题解: 二分 答案范围:[0,sigma a[i]] check:首先a[i]>=ans,其次 ...
- Paper | PyTorch: An Imperative Style, High-Performance Deep Learning Library
目录 0. 摘要 1. 简介 2. 背景 3. 设计原则 4. 针对易用性的核心设计 4.1 让深度学习模块不过是Python程序 4.2 互用性和可拓展性 4.3 自动差分 5. 针对高性能的PyT ...
- iOS: 创建静态库，实现自己的API私有使用
一.介绍 在开发中经常使用到第三方的静态框架,格式基本上就是.framework和.a格式的.使用时,会发现我们只能使用无法修改,这就是静态框架的一个好处,私有性.内部实现的代码只有公开者本人知晓,对 ...
- python画一片绿叶给你
怎么用 turtle 画一个 π 字,于是我顺手到网上大致搜了下,发现网上没有画这个 π 字的,接着又用谷歌加英文搜索了下,还是没找到现成的答案. 不过通过这次搜索意外发现了一个有趣的网站,网站上有大 ...
- angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- Windows下cwrsync客户端与rsync群辉存储服务端定时数据同步
cwRsync简介 cwRsync是Rsync在Windows上的实现版本,Rsync通过使用特定算法的文件传输技术,可以在网络上传输只修改了的文件. cwRsync主要用于Windows上的远程文件 ...
- jmeter进行接口测试--csv参数化,数据驱动-转
首先我们要有一个接口测试用例存放的地方,我们这里用EXCEL模板管理,里面包含用例编号.入参.优先级.请求方式.url等等. 1:新建一个txt文件,命名为sjqd,后缀名改为csv,右键excel格 ...