盒子模型

包括——边距，边框，填充，和实际内容

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

 当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和边距

下面的例子中的元素的总宽度为300px：

div {
　　 background-color: lightgrey;

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

共450px

<style>

div.ex

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

</style>

</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。

这个元素的总宽度也是250 px。</div>

</body>

即：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

 边框

边框样式—— border-style

边框宽度

边框颜色

各边的样式

轮廓

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

可指定样式、颜色、宽度

 margin外边距

定义元素周围空间

padding填充

定义元素边框与元素内容之间的空间，即上下左右的内边距

CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充的更多相关文章

  1. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  2. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

    box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...

  5. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  6. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  7. CSS3盒子模型(中)

    在CSS盒子模型(上)讲到了盒子模型的边框,内外边距,外边距合并等知识,接下来要总结的是盒子模型的布局常用到的一些CSS属性,比如:float.position等知识. 盒子模型布局稳定性 开始学习盒 ...

  8. CSS3 —— 盒子模型

    盒子模型 主要的属性就5个:width.height.padding.border.margin.如下:  width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距 ...

  9. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

随机推荐

  1. SpringCloud系列（一）：Eureka 服务注册与服务发现

    上一篇,我们介绍了服务注册中心,光有服务注册中心没有用,我们得发服务注册上去,得从它那边获取服务.下面我们注册一个服务到服务注册中心上去. 我们创建一个 hello-service 的 spring ...

  2. Zookeeper客户端使用（使用原生zookeeper）

    Zookeeper客户端使用 一.使用原生zookeeper 在pom.xml中加入依赖 <dependency> <groupId>org.apache.zookeeper& ...

  3. 有理想的中国IT企业，正在全球攻城略地 - 阅读笔记

    文章来源:https://mp.weixin.qq.com/s/xc5Uqe4WmEEgI03dPR4Orw 中资手机崛起 大部分国人对传音不熟悉,这家深圳公司由前波导高管创立,是非洲手机市场的老大. ...

  4. DataWorks参数配置

    https://help.aliyun.com/document_detail/30281.html?spm=a2c6h.13066369.0.0.7bef69daI5ajKt

  5. WinEdit编辑器中中文乱码

    这个问题困扰了我很久.我的电脑上装的CTEX的最新版本,原来我的系统是windows 7 64位系统.装好了CTEX之后,在里面可以直接输入中文,显示和编译生成的PDF文件都正常.但是后来系统崩溃了一 ...

  6. Kendo UI使用教程：Bower Packages

    [Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...

  7. POJ-2104-Kth Number（主席树）

    链接: https://vjudge.net/problem/POJ-2104#author=malic 题意: 给定一个数组 a[1...n],数组元素各不相同,你的程序要对每次查询Q(i,j,k) ...

  8. priority_queue与multiset

    感觉c++最有用的stl是bitset.堆(优先队列)和平衡树,其他的都可以手打 这里主要讲一下堆和平衡树的基本用法和区别所在 priority_queue 堆/优先队列 定义: priority_q ...

  9. 一图解决五大I/O模型比较

  10. XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

    XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...