css之border/padding/margin

77 阅读 0 评论 51 点赞

我是靠谱客的博主标致羽毛，最近开发中收集的这篇文章主要介绍css之border/padding/margin，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

border:

1.宽度不支持百分比；thin/medium/thick；

2.solid/dotted/dashed/double/inset/outset/ridge/groove:

a. IE下的dotted是小圆，通过添加图形可以用来实现IE7/IE8下的圆角效果；

b. 利用double实现三条杠效果

c. border-color默认颜色就是color

d. border用来设置容器内元素的定位，background-position只能定位左上，可通过设置border-right设置透明边

框，设定子元素为background-position：100% 40px；来实现

e. 用border的solid样式来实现三角/梯形等图形，将部分border设置为transparent；其梯形还可用来模拟圆角，

在矩形上下添加两个梯形来实现。

3. border与透明边框：之前讲到的子元素定位、三角等图形

增加响应区域大小，原边框可通过box-shadow的inset来代替；

增加可视渲染区域：通过 filter: drop-shadow(20px 0 #ff8040);可实现图片变色，通过设置右侧透明边框可

增加可视区域，使得overflow：hidden后还可以看到投影图标；

4. border实现等高布局，但是不支持百分比宽度；

padding

1. padding对元素尺寸的影响：

a. 对于block水平元素:

padding值暴走，一定会影响元素尺寸；

width值非auto，padding值会影响元素尺寸；

width值为auto或设置了box-sizing: border; ，且padding值没有暴走，则不会影响元素尺寸；

b. 对于inline水平元素: 水平padding影响尺寸，垂直padding不影响尺寸；但会影响垂直方向的背景区域；

可用结合border实现高度可控的分隔线：

2. padding不支持负值，block水平元素padding百分比值均是相对于宽度计算的，利用此特性轻松实现正方形；

inline水平元素padding百分比值同样是相对于宽度计算的，内联元素的垂直padding会使得“幽灵空白节点”出

现，就是标准中的“strut”使得高度宽度细节有差异，可用font-size:0px;来解决；且有文字时padding会换行；

3.对于button元素，在IE浏览器下文字越多padding越大的解决方案：button{ overflow: visible;}

在FireFox浏览器中如何设置padding为0：button::-moz-focus-inner{ padding: 0;}

浏览器设置padding高度后的button元素高度计算不同：通常用a标签去模拟按钮，如何使用button:

通过label标签来实现，使其for与button的id一致，让button元素可访问性隐藏，定位到屏幕之外之外，

或设置z-index:-1;

4. padding与图形绘制：通过一个div实现三道杠，通过padding和background-clip: content-box;

白眼效果：

5. padding与布局：

a.padding百分比值均是相对于宽度计算的，利用此特性轻松实现正方形；

b. 实现等高布局：

c. 两栏自适应布局：padding在子元素上/padding在容器上：

margin

1. margin与可视尺寸：

对于没有设定宽度、高度的block水平元素：只改变水平方向尺寸

2. margin与占据尺寸：inline-block与block均可用，与宽高是否设置无关，水平与垂直方向都适用；

应用：实现滚动容器内上下留白

3. margin与百分比单位：

普通元素margin百分比都是相对于容器宽度计算的；

绝对定位元素的margin百分比是相对于第一个定位元素(relative/absolute/fixed)的宽度计算的；

4. margin重叠只会发生在block元素的垂直方向上

非空block元素重叠条件：

父元素非块状格式化上下文———通过overflow: hidden可以消除重叠；

父元素没有border-top设置———设置border-top可以消除重叠；

父元素没有padding-top设置———设置padding-top可以消除重叠；

父元素和第一个/最后一个子元素之间没有inline元素———在父和子元素之间添加inline元素，

eg: 可以消除重叠；

父元素的height设置可以消除margin-bottom重叠；

空block元素自身重叠条件：

元素没有border设置——

元素没有padding值——

元素里没有inline元素——

元素没有height或min-height——

重叠计算：正正取大值，正负取相加，负负最负值；

善用margin重叠：写列表或垂直布局是使用上下margin;

5. margin：0 auto；只针对block水平元素；图片设置为display:block;则可通过margin：0 auto;居中。

垂直居中方法：

a.父元素设置writing-mode: vertical-lr;时，子元素margin:auto;垂直居中，但水平不居中了；

b.父元素相对定位，子元素绝对定位，left:0; right:0; top:0; bottom:0; margin:auto;可实现垂直居中；

6. margin负值的应用：

a. 使用margin-right负值实现列表元素

b. margin很大负值，margin改变元素占据的空间，padding很大正值来弥补空间，实现两栏等高布局，

必须通过overflow:hidden来限制：

c. 自适应布局，有点：DOM顺序与最终视觉顺序相符

7. margin设置无效情况：

inline元素(非替换元素eg:img，正常书写模式)垂直margin无效；

margin重叠；

display:table-cell/display:table-row等声明的margin无效；

替换元素eg:img的display:table-cell的margin是有效的；

浮动元素后的元素：鞭长莫及导致的margin无效，实际为值不够大；

内联元素特性导致的margin无效；

8.margin-start:正常流向下等同于margin-left，两者重叠不累加；margin-start不一定是左边方向；若水平流是从右向左，则margin-start等同于margin-right；在垂直流中(writing-mode:vertical-*;)，margin-start等同于margin-top.

margin-end同理，margin-before/margin-after默认流下等同于margin-top/margin-bottom;

针对margin重叠：-webkit-margin-collapse:collapse/discard/separate;