关于盒模型的外边距padding和内边距margin
边框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的更多相关文章
- 10-[CSS]-盒模型:border,padding,margin
1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加
可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...
- CSS——(2)与标准流盒模型
部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...
- 对css盒模型的理解
介绍一下标准css的盒子模型?低版本IE的盒子模型有什么不同的? 1.有两种:IE盒子模型(怪异模式).W3c盒子模型(标准模式). 2.盒模型组成:内容(content).内边距(padding). ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- css盒模型。边框和内外边距
css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
随机推荐
- iOS 自动化打包发布(Fastlane+ Jenkins+蒲公英)
安装 Xcode 命令行工具:xcode-select --install 安装 fastlane:sudo gem install fastlane --verbose 安装成功后查看版本:fast ...
- GM2引擎脚本召唤宝宝说明
功能: 脚本召唤宝宝. 格式: RECALLMOB 怪物名称 宝宝等级(最高为 7) 叛变时间(分钟) 是否自动变色(0.1)固定颜色(1-7) 攻击力受自动变色颜色不同而不同 固定颜色攻击力 ...
- BufferedInputStream 介绍
BufferedInputStream 介绍 BufferedInputStream 是缓冲输入流.它继承于FilterInputStream.BufferedInputStream 的作用是为另一个 ...
- dfs序与求子树子节点(染了色)的个数
https://blog.csdn.net/hpu2022/article/details/81910490 https://blog.csdn.net/qq_39670434/article/det ...
- Java进阶学习(3)之对象容器(下)
对象数组 对象数组中的每个元素都是对象的管理者而非对象本身 对象数组的for—each循环 集合容器(HashSet) HashSet 数学中的集合,元素间满足互异性.确定性.无序性 HashSet& ...
- 【PAT甲级】1097 Deduplication on a Linked List (25 分)
题意: 输入一个地址和一个正整数N(<=100000),接着输入N行每行包括一个五位数的地址和一个结点的值以及下一个结点的地址.输出除去具有相同绝对值的结点的链表以及被除去的链表(由被除去的结点 ...
- netty学习1
1.IO java 自带IO流 1)同步处理方式,一个请求占用一个线程,高并发常见出现问题 2.java nio 实在jdk1.4版本上新添加的new IO / 非阻塞IO 可多路并发 3.Netty ...
- 计算机二级-C语言-程序设计题-190118记录-通过数组和指针两种方式对字符串进行处理。
//编写一个函数fun,比较两个字符串的长度,(不使用C语言提供的求字符串长度的函数),函数返回较长的字符串.若两个字符长度相同,则返回第一个字符串. //重难点:通过数组处理和通过指针进行处理的不同 ...
- 鸡汤 - Choice is yours
传送门 https://kamranahmed.info/blog/2018/03/24/choice-is-yours/ Our whole lives are driven by the choi ...
- Python - 静态方法@staticmethod和类方法classmethod
传送门 https://github.com/jackfrued/Python-100-Days/blob/master/Day01-15/Day09/%E9%9D%A2%E5%90%91%E5%AF ...