边框border属性值  solid实线   dashed虚线   dotted点线   double双实线

/* 内边距 */
padding:20px 30px 30px 30px;若有四个值代表  上/右/下/左 
padding: 10px 20px 30ox;三个值代表 上、左右、下 
padding: 10px 20px;两个值代表  上下/左右 
padding: 10px;一个值代表四个方向一致

/* 外边距 */

margin:20px 30px 30px 30px;若有四个值代表  上/右/下/左 
margin: 10px 20px 30ox;三个值代表 上、左右、下 
margin: 10px 20px;两个值代表  上下/左右 
margin: 10px;一个值代表四个方向一致

此外,外边距(margin)垂直方向会叠加

叠加的规则:
1、同为正数,取最大
2、同为负数,取绝对值最大
3、一正一负 取和

盒子模型的宽度:width+padding+border
盒模型的组成:width+padding+border+height
盒模型的高度:height+padding+border

关于盒模型的外边距padding和内边距margin的更多相关文章

  1. 10-[CSS]-盒模型:border,padding,margin

    1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  2. CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加

    可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...

  3. CSS——(2)与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  4. 对css盒模型的理解

    介绍一下标准css的盒子模型?低版本IE的盒子模型有什么不同的? 1.有两种:IE盒子模型(怪异模式).W3c盒子模型(标准模式). 2.盒模型组成:内容(content).内边距(padding). ...

  5. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  6. css盒模型。边框和内外边距

    css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...

  7. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  9. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

随机推荐

  1. 委托与事件--delegate&&event

    委托 访问修饰符 delegate 返回值 委托名(参数); public delegate void NoReturnNoPara(); public void NoReturnNoParaMeth ...

  2. http://localhost:8080/sockjs-node/info?t=1556418283950 net:: ERR_CONNECTION_REFUSED(亲测有效~!)

    如果你的项目没有用到sockjs,vuecli3 运行npm run serve 之后network里面一直调用一个接口:http://localhost:8080/sockjs-node/info? ...

  3. 毕向东java基础总结

    Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...

  4. ora 01704 字符串文字太长

    分析sql执行失败的原因,在于没有强制指定插入字符串为clob类型,解析sql时,oracle会把插入的字符串作为 “字符串类型”处理,由于oracle有最大字符串限制(不超过4000个字符),所以会 ...

  5. Raid5(五块磁盘,三块做raid,两块做备份)

    1.在虚拟中再添加五块磁盘.  2.使用mdadm命令创建raid5,名称为“/dev/md5”. -C代表创建操作,-v显示创建过程,-a yes检查RAID名称,-n是用到的硬盘个数,-l是定义R ...

  6. oop(面向对象)中的内置函数

    oop中的内置函数 ​ 类中存在一些名字带有双下划线__开头的内置函数, 这些函数会在某些时候被自动调用,例如之前学习的迭代器__init__函数 一.isinstance(obj, cls) 检查o ...

  7. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  8. 吴裕雄--天生自然神经网络与深度学习实战Python+Keras+TensorFlow:TensorFlow与神经网络的实现

    import tensorflow as tf import numpy as np ''' 初始化运算图,它包含了上节提到的各个运算单元,它将为W,x,b,h构造运算部件,并将它们连接 起来 ''' ...

  9. netty(一)---服务端源码阅读

    NIO Select 知识 select 示例代码 : //创建 channel 并设置为非阻塞 ServerSocketChannel serverChannel = ServerSocketCha ...

  10. Java编译器的常量优化

    /* 在给变量进行赋值的时候,如果右侧的表达式当中全都是常量,没有任何变量, 那么编译器javac将会直接将若干个常量表达式计算得到结果. short result = 5 + 8; // 等号右边全 ...