css - 边距

元素内边距

内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值。内边距(padding)、(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的padding和border。

padding的取值

div {
    width: 200px;
    height: 200px;
    background: black;
    padding: 10px; /*上下左右都是10px*/
    padding: 10px 20px; /*上下10px 左右20px*/
    padding: 10px 20px 10px; /*上10px 左右20px 下10px*/
    padding: 10px 20px 10px 20px; /*上10px 右20px 下10px 左20px*/
    类似的还有padding-top、padding-bottom、padding-left、padding-right
}

元素外边距

外边距是指元素以某个对象的可见边界为参照的相对距离,外边距可设负值

margin的取值

div {
    width: 200px;
    height: 200px;
    background: black;
    margin: 10px; /*上下左右都是10px*/
    margin: 10px 20px; /*上下10px 左右20px*/
    margin: 10px 20px 10px; /*上10px 左右20px 下10px*/
    margin: 10px 20px 10px 20px; /*上10px 右20px 下10px 左20px*/
    margin-left:auto; /*自动*/
    margin-right:auto; /*自动*/
    margin:0 auto;  /*0 自动*/
    margin:auto; /*全自动(づ ̄3 ̄)づ╭❤~*/
    类似的还有margin-top、margin-bottom、margin-left、margin-right
}

原始宽 | height 

元素的(width | height)(不包含padding、border、margin)

可见宽 | 可见高

(width | height)+ padding+border

隐形宽 | 隐形高

(width | height)+ padding + border + margin

外边距的参照对象

margin-left和margin-top的参照对象是其父元素或其兄弟元素,margin-right和margin-bottom的参照对象是其兄弟元素,如果margin-right和margin-bottom的参照对象是其父元素,则这两个属性会失效。

auto的默认值

元素的宽、高、上下左右外边距都可以设置为auto。元素的width和height默认都 = auto,表示其尺寸由其内容决定,但块元素的width=auto时,如果其左外边距是0,则是指它的宽度独占父元素一行,它的宽度=父元素的width。而左右外边距(margin-left、margin-right)和上下外边距(margin-top、margin-bottom)的默认值是0,而不是auto。所以,当你手动设置margin-bottom = 0 或margin-right = 0时(它们本来默认就是0)由于margin-top或margin-left = 0,所以margin-right、margin-bottom为0是无效的。

auto的应用

虽然元素的尺寸和其外边距都可以应用auto,但auto是否会起效需要具体规则:如果是块元素,当width没有明确的值时,三个属性中只有width会应用auto,为左右外边距设置的auto会被忽略,当width有明确设置的值时,为左右外边距设置的auto会被应用。如果是非块元素,其width和左右两个外边距(margin-left、margin-right)之中的其中一个能同时应用auto。而无论是块或非块元素,其height和上下外边距(margin-top、margin-bottom)之中的一个可以同时应用auto。

块元素 - 水平auto的值的计算方式  

如果width = auto,则:它的父元素的width - 它的左右外边距 = 它的width

如果width!=auto,且margin-left = auto ,则它的父元素的width - 它的width - 它的margin-right = 它的margin-left

如果width!=auto,且margin-right = auto,则它的父元素的width - 它的width - 它的margin-left = 它的margin-right

如果width!=auto,且margin-left和margin-right都= auto,则(它的父元素的width - 它的width)/ 2 = 它的左右外边距

注:如果减去的明确值是负数,则不再是减,而是加负数的绝对值等于结果。

注:如果当前元素存在padding或border,还需要减去padding或border。因为计算的是元素宽、左右外边距。

非块元素 - 水平auto的值的计算方式

如果width = auto,则;它的width = 它的内容的总宽度

如果margin-left = auto 或 margin-right = auto,则:它的margin-left = 0

垂直auto的值的计算方式

无论是块元素抑或非块元素,下面的公式是相同的

如果height = auto,则:height = 它所包含的内容

如果margin-top或margin-bottom = auto,则:margin-top=0

也即,在垂直方向上唯有height(原始高) = auto时,才有计算的必要。即它没有明确设置的高度值,此时auto的计算为:

非块元素:当前元素的height(原始高)= 它的第一个子元素的顶外边距到最后一个子元素的底外边距。

块元素:如果该块元素没有padding或border,且如果它包含的第一个元素是块元素,如果这个子块元素存在上边距,则父块元素不会包含它第一个子块元素的上外边距。同样的,父块元素也不会包含它的最后一个子块元素的底外边距。也即,该父块元素的height(auto)的计算只包含从它第一个子块元素的顶边框到它最后一个子块元素的底边框为止。如果希望块元素的原始高的计算方式能和其它非块类型的元素一样可以包含第一个子元素的上外边距和最后一个子元素的下外边距,则可以

1.设该元素的padding或border

2.设该元素overflow:hidden

块元素水平auto的几个计算的例子

计算width

.box {
    width: 400px;
    height: 50px;
    background: #4cff00;
}

.box div {
    margin-left: 100px;
    margin-right: -50px;
    height: inherit;
    background: #b6ff00;  子元素的width=父元素的原始宽width400-100+50=350px
}

计算width
.box {
    width: 400px;
    height: 50px;
    padding: 10px;
    border: 3px solid black;
    background: #0094ff;
}

.box div {
    margin-left: 10px;
    margin-right: -50px;
    height: 50px;
    width: auto;           
    background: #ff6a00; 子元素width:父元素的原始宽width400-10+50=440px 
}

计算margin-right

.box {
    width: 400px;
    height: 50px;
    border: 3px solid black;
    background: #ff3f3f;
}

.box div {
    margin-left: 10px;

    margin-right: -50px;       margin-right被浏览器强制设为auto width: 100px;
    width:100px;
    padding: 10px;
    border: 3px solid black;
    height: 20px;
    background: #ffd800;     子元素的margin-right:父元素的原始宽width400-10-100-10-10 =264px
}

计算margin-left

.box {
    width: 500px;
    height: 50px;
    background: #808080;
}

.box div {         
    width:100px;
    height: 50px;        
    margin-left:auto;
    background: #ff6a00; 子元素的margin-left:margin-right=0,父元素的width500 - 100 - 0  = 400
}

块元素水平居中的三种方法

由于行内/行内块元素会应用text-align:center,所以此处只为块元素的水平居中提供实现方案。

1.如果子元素没有明确设置宽度,设父元素左右padding为相同的值

2.如果子元素有明确设置宽度,则设子元素左右margin为相同的值,或margin:0 auto或margin:auto auto或margin:auto

计算相邻两个元素之间的外边距

当相邻两个元素都存在相邻外边距时,两个元素的相邻外边距究竟取哪一个元素的外边距呢?

计算相邻两个元素的正外边距

如果当前元素的相邻外边距小于它所参考的那个元素的外边距,则当前元素会在它所参考的那个元素相邻的外边距处停止偏移。考虑两张纸(两个兄弟),两张纸的margin-top是10px,而margin-bottom是20px,那么第二张纸的顶外边距就要以其兄弟(第一张纸)的可见高的边界为准进行偏移,但由于第一张纸的底外边距是20px,第二张纸的顶外边距小于第一张纸的底外边距,则第二张纸在偏移过程中会在离第二张纸的可见高的边界往下数20px处停止,而不是10px,因为它往上偏移时遇到了边界(阻力)。也即当两个元素的正反(相邻)边距(比如:第一个元素的底外边距与第二个元素的顶外边距)的值是两个正值时,则取最大的正值得出两个元素的结果边距

计算相邻两个元素的负外边距

1.当两个元素的相邻边距(比如:第一个元素的底外边距与第二个元素的顶外边距)的值是一正一负时,则两个值会相加得出两个元素的结果边距。考虑第一张纸的margin-bottom是20px,而第一张纸的margin-top是-20px,则20+(-20)=0,两张纸的边距是0。

2.当两个元素的正反(相邻)边距(比如:第一个元素的底外边距与第二个元素的顶外边距)的值是两个负时,则取绝对值最大的那个得出两个元素的负结果边距

注:当负外边距合并导致两个元素重叠在一起时,总是后面一个覆盖在前面一个元素上面

默认边距

很多html都有自己的默认样式,比如p、h1等,它们都带有默认的margin、ul列表类html元素带有默认的padding。

如果需要查看元素的默认样式,可以打开chrome的开发人员工具,在tab项目中选择Element查看元素,此时在右侧会出现该元素相关的style。在tab项style旁边有一个computed,点开它后勾选show all,即可查看该元素所有的css样式,也可以在搜索框输入你感兴趣的css属性,看某个属性在该元素上的设置。

默认情况下,很多元素都有margin、ul列表具有padding,为了把内外边距的控制权移交到自己手上,可以考虑使用*{margin:0;padding:0},但*会拖慢浏览器解析效率,所以一般都需要逐个写出:

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, th, td, form, fieldset, input, textarea, select {
    margin: 0;
    padding: 0;
}

Css - 学习总目录

css - 盒子内外边距的更多相关文章

  1. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  2. 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  3. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

  4. CSS 盒子的边距塌陷

    tip:为能更直观地学习,本文章已省略部分 css 样式代码. 我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父 ...

  5. css3-8 内外边距中的注意要点有哪些

    css3-8 内外边距中的注意要点有哪些 一.总结 一句话总结:padding,border都是外延的.margin会合并. 1.两元素样式都有margin:15px,他们中间的距离是15px还是30 ...

  6. 学习微信小程序之css11内外边距集合

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android UI系列-----长度单位和内外边距

    这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...

  8. CSS Margin(外边距)

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  9. css内外边距属性

    盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...

随机推荐

  1. Codeforces Round #518 (Div. 2) B LCM

    传送门 https://www.cnblogs.com/violet-acmer/p/10163375.html 题解: 这道题有点意思,有点数学的味道. 根据定义“[a,b] / a”可得这求得是l ...

  2. 前端模块化,AMD与CMD的区别

    最近在研究cmd和amd,在网上看到一篇不错的文章,整理下看看. 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到 ...

  3. mysql 自定义函数与自定义存储过程的调用方法

    存储过程:call  过程名(参数) 函数:      select  函数名(参数)

  4. 有限状态机FSM

    有限状态机(Finite-state machine)又称有限状态自动机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型.常用与:正则表达式引擎,编译器的词法和语法分析,游戏设计,网络 ...

  5. C语言#和##操作符使用方法

    1.#操作符              1:#操作符用于预处理阶段,将宏参数转换为字符串,只有宏定义中使用(#define) 使用方法: #define  STRING(x)   #x printf( ...

  6. java十进制转三十六进制

    import java.util.HashMap; public class Ten2Thirty { private static final String X36 = "01234567 ...

  7. Map_占位符(嗨没想好怎么起名字)

    Map 是很好的集合,为我们带来了在其他语言(比如 Perl)中经常可见的好用的键/值对集合.JDK 以 HashMap 的形式为我们提供了方便的 Map 实现,它在内部使用哈希表实现了对键的对应值的 ...

  8. IDEA DEBUG无法启动

    如题:idea DEBUG无法启动 解决方法: 1.查找出占用进程id 2.杀死进程 cmd 输入 命令: 1.netstat -ano|findstr 4405 2.taskkill -f -pid ...

  9. Shell编程(七)函数

    1. 函数开始 #!/bin/bash foo() { echo "Function foo is called"; } echo "-=start=-" fo ...

  10. impala系列: 时间函数

    --=======================时间函数--======================= --当前时间戳now()current_timestamp() --当前时间戳相对于 li ...