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. 当我new class的时候,提示以下错误: Unable to parse template "Class" Error message: This template did not produce a Java class or an interface Error parsing file template: Unable to find resource 'Package Header.j

    你肯定修改过class的template模板,改回去就好了 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")packag ...

  2. PostCSS理解与运用

    1.PostCSS是什么 它可以被理解为一个平台,可以让一些插件在上面跑 它提供了一个解析器,可以将CSS解析成抽象语法树 通过PostCSS这个平台,我们能够开发一些插件,来处理CSS.热门插件如a ...

  3. jmeter打开图形化界面时指定代理

    \apache-jmeter-4.0\bin>jmeter -Dhttp.proxyHost=127.0.0.1 -Dhttp.proxyPort=8888 如果不想在每个请求里面指定代理的话可 ...

  4. saltstack API(一) 安装并测试

    python3 安装api # 首先安装python3 .tgz cd Python- . ./configure make make install mv /usr/bin/python /usr/ ...

  5. 【MSSQL】SQL Server 设置用户只能查看并访问特定数据库

    #背景 SQL Server实例上有多个服务商的数据库,每个数据库要由各自的服务商进行维护, 为了限定不同服务商商的维护人员只能访问自己的数据库,且不能看到其他服务商的数据库,现需要给各个服务商商限定 ...

  6. Docker 容器管理

    单一容器管理 容器的标识符 每个容器被创建后都会分配一个CONTAINER_ID作为容器的唯一标识符,后续的启动.停止等操作都通过CONTAINER_ID来完成的. CONTAINER_ID很难记忆, ...

  7. 【转】Linux C下非特定波特率的配置和使用

    https://blog.csdn.net/jinhongdu/article/details/43413071  对于非标准的任意波特率需要用ioctl(fd, TIOCGSERIAL,  p)和i ...

  8. Part-Ten

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

  9. build script和all projects作用和区别

    buildscript中的声明是gradle脚本自身需要使用的资源.可以声明的资源包括依赖项.第三方插件.maven仓库地址等.而在build.gradle文件中直接声明的依赖项.仓库地址等信息是项目 ...

  10. tcp_connect函数

    #include <netdb.h> #include <stddef.h> #include <unistd.h> #include <strings.h& ...