盒子模型

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

  • 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. MINIUI grid学习笔记

    grid 控件a.事件的绑定和移除         grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件)         grid ...

  2. JDBC实现最简单的增删改查

    好久没写博客了,今天刚进入一家公司实习,在实习这段期间想把自己所学的东西通过博客记录下来 今天上午简单回顾了一下用JDBC实现最简单的增删改查 废话不多说,接下来就说明怎么用JDBC实现最简单的增删改 ...

  3. 前端每日实战：136# 视频演示如何用 D3 和 GSAP 创作一个横条 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pOZKWJ 可交互视频 此视频是可 ...

  4. python绘制国际象棋棋盘核心代码

    import turtle step = 40 for i in range(8): for j in range(8): turtle.penup() turtle.goto(i*step, j*s ...

  5. keep-alive前进没有刷新

    https://segmentfault.com/a/1190000012083511

  6. 如何在生产环境下实现每天自动备份mysql数据库

    1.描述 通"shell脚本+定时任务"的方式来实现自动备份mysql数据库. 2.环境 备份路径:/data/mysqlbak/ 备份脚本:/data/mysqlbak/mysq ...

  7. python学习理论

    结论 其实学python这本书 不一定要全部敲一遍 在“”动手试一试“”里面 把这篇学到的东西测试一下就算是掌握了 要在实际工作场景当中使用还需要进一步练习这样做的话 比较好一点 边学边测试 加深掌握 ...

  8. antd不可选择时间

    //不能选择今天之前的日期<DatePicker format={this.timeFormat} showTime placeholder="项目结束日期" disable ...

  9. Linux基础教程 linux系统中的批量删除文件与空文件删除的命令介绍

    linux下面删除文件或者目录命令rm(remove): 兄弟连Linux培训 功能说明:删除文件或目录. 语 法:rm[-dfirv][--help][--version][文件或目录...] 补充 ...

  10. Python连接MySQL之Python库pymysql

    连接数据库 pymysql连接数据库的方式和使用sqlite的方式基本相同: 使用connect创建连接对象 connect.cursor创建游标对象,SQL语句的执行基本都在游标上进行 cursor ...