css之padding/margin/border详解 |
您所在的位置：网站首页 › cssmargin和padding › css之padding/margin/border详解 |
|
padding
padding的尺寸
如果块状元素设置padding，会影响盒子的大小。如果box-sizing按照border-box来看，那么盒子的宽度=content的宽度+两边的padding
如果块状元素设置了定宽，box-sizing按照border-box来看，如果两边的padding足够大，那么宽度无效，内容则表现为“首选最小宽度”
.box{
width:80px;
padding:20px 60px;
box-sizing:border-box
}
这种情况下width会无效，最终的宽度为60*2=120px
复制代码
内联元素的padding会在水平方向上影响布局和视觉表现，但在垂直方向上面不影响视觉表现，而是出现会影响布局的层叠效果。(css的层叠效果分为两类，一种是纯视觉层叠不影响外部尺寸-box-shadow/outline；另一类会影响外部尺寸-内联元素的上下padding)
基于padding的尺寸特点的巧用
可以利用垂直方向不影响视觉的特点增大行内元素的点击区域
我们利用浏览器URI的hash值+元素的id设置实现网页锚点，通常这个锚点定位的时候会直接定位在当前匹配的id元素。如果我们想要距离窗口的顶部有适当地距离，我们可以利用行内元素垂直方向影响布局而不影响视觉的特性，设置元素上内边距，即可实现。
PS：对于非替换的内联元素，不仅padding不会加入行盒高度的计算，margin和border也是如此，都不计算高度，但实际上在内联盒子周围发生了渲染 padding的百分比值 padding属性是不支持负数的 padding的百分比值无论是水平方向还是垂直方向，都是基于元素的宽度计算的(块状元素与内联元素一样) 默认的宽度和高度有差异：内联元素的垂直padding会让“幽灵空白节点”显现，通过设置font-size：0,可以消除幽灵空白节点的影响 内联元素的padding会算作内联行框盒子的一部分，所以padding如果超出父级设置的宽度会自动换行 基于padding百分比值的应用 利用百分比是根据元素宽度计算的特性，我们可以为padding设置百分比从而实现正方形或矩形的描述。 .box{ padding:10% 50%; position:relative } .box > img{ position:absolute; width:100%; height:100%; left:0; top:0 } 这样就可以实现一个长宽比固定为5:1的矩形，矩形中的图片也会一直是5:1的比例，兼容性极好 复制代码 绘制图形:icon图形绘制 margin margin元素与尺寸尺寸的概念 元素的尺寸：该含义为border-box尺寸，包含border、padding、content。在JQ中对用api为$().width()、$().height();在原生js中对应的api为offsetWidth offsetHeight 元素的内部尺寸(可视尺寸)：该含义为padding-box，包含padding、content。在JQ中对应的api为$().innerWidth() $().innerHeight();在原生js中对应的api为clientWidth clientHeight。 元素的外部尺寸：该含义为margin-box,包含margin、border、padding、content。在JQ中对应的api为$().outerWidth(true) $().outerHeight(true);原生js没有对应的api充分利用可用空间的概念 某一元素在未设置宽度的情况下，能够完全占据其父级的宽度或窗口的宽度并且具有横向的流特性，或经过write-mode设置后具有纵向的流特性并完全占据空间 margin对于内部元素尺寸的影响 只要元素的尺寸表现符合“充分利用可用空间”，无论是水平方向还是垂直方向都可以利用margin改变该元素的尺寸 margin对于内部元素尺寸影响的应用 左侧定宽，右侧自适应的布局 .left{ width:200px; float:left; } .right{ margin-left:200px } 复制代码这是我们在写这类布局时常用的方法，就是利用margin在自然流向上，可以改变元素尺寸的特性 右侧定宽，左侧自适应。可以将上一种方法翻转过来，但是出于书写顺序的考虑，也可以这样设置： .father{ overflow:hidden; } .left{ width:100%; float:left; } .right{ float:left; margin-left:-200px; // 会出现在右侧，占据200px } .left div{ // left的子元素div具有“充分利用可用空间特性” margin-right:200px } 复制代码 多个元素两端对齐效果（给定一组li元素，两边在窗口或父级两侧，每个li元素中间保留20px间距，类似于flex中的space-between的效果） ul { margin-right:-20px } li { float:left; width:100px; margin-right:20px; } 复制代码利用margin解决此类布局问题，兼容性很好 margin对于外部尺寸的影响 只要元素拥有块状元素的特性，设置了margin就一定会对元素的外部尺寸产生影响 margin对于内联元素，纵向上设置无用，不影响任何，横向上会影响排版，但由于内联元素呈现“包裹性”，所以并不会改变内联元素的“内部尺寸” margin对于外部尺寸影响的应用 我们如果想要纵向留有间距，通常会设置padding：50px 0; 但是这样设置在Chrome中有一个问题：在overflow后滚轮滚至底部padding-bottom的50px会失效，这个时候我们选择去设置margin:50px 0 是一个比较好的选择（当然也可以设置border） 两侧等高布局：无论左侧的文字多还是右侧的文字多，两侧必须是等高的 .father{ overflow:hidden } .left,.right{ margin-bottom:-9999px; padding-bottom:9999px; } 复制代码这样设置的重点是一定要overflow:hidden 因为即使逻辑上正负抵消，但是它的高度是依然存在的。这样设置的一个弊端是也会影响锚点定位，只适用于场景简单的等高布局 margin的百分比值也是相对有宽度计算的，只是因为垂直方向上会发生合并，往往需要双倍的设置才能达到和padding一样的效果 margin合并margin合并的条件： 块状元素(不包含float和决定定位的元素，即使它们会将元素块状化) 垂直方向(在没有通过write-mode改写流方向时，如果改了就是水平方向)margin合并的三种场景： 相邻兄弟元素的margin合并（前一个元素的下边距和后一个元素的上边距） 父级和第一个/最后一个子元素（无论是父元素设置了margin还是子元素设置了margin或是父子元素都设置了margin，在没有其它属性影响的情况下，都会发生合并） 空块级元素的合并阻止margin发生合并的方法 使用border、padding的设置代替margin 利用BFC 增加其余行内元素使其相隔开margin合并的规则 正正取大值 正负值相加 负负最负值 margin的值为automargin的初始值为0，auto的含义是“剩余空间” 如果一侧是定值，一侧是auto，那么auto为剩余空间的大小。 如果两侧的值都是auto，那么就平分剩余空间 auto起作用的条件，在设置的方向上具有“自动填充的特性”（div元素在没有设置宽度的情况下自动填充父级宽度）margin:auto的垂直居中设置 流特性默认在水平方向上，元素如果设置了margin:auto那么会在水平方向上居中，如果一侧设置了margin-left:auto那么元素就会水平居右，这个和内联元素的text-align属性如出一辙。但是如果想要利用auto值来设置垂直方向上面的居中，就需要在垂直方向上具有“自动填充特性”。 .father{ position:relative; width:800px; height:800px; } .son{ position:absolute; top:0; right:0; bottom:0; left:0; width:200px; height:200px; margin:auto; } 复制代码 margin元素无效的情形 内联元素的垂直方向margin设置无效 表格中的 display:table-cell table-row 元素的margin无效 margin发生了合并，再去修改margin的值，无效 绝对定位非定位方的margin无效（left:20px margin-right无效） 定高容器的定高子元素的margin-bottom,定宽容器的定宽子元素的margin-right border border是不支持百分比的值得 border-width可以设置任意像素值，但其还支持若干关键字，包括thin=1px、medium（默认值）=3px、thick=4px border-style默认值为none,如果不设置就不会出现边框，其可以设置的关键字有：solid、dashed、dotted、double、inset、outset、groove、ridge border-color默认采取的颜色是color，具有类似特性的css属性还有outline、box-shadow、text-shadowborder-color:transparent的巧用 右下定位技巧：按照排版特性，很多属性都是根据左侧或左上侧设置边距或定位。但如果我们有遇到右侧规定间距的需求，就可以使用border来救场 优雅的增加定位元素的点击区域的大小：如果我们使用padding，那么定位元素就会改变，但如果使用border就可以在不改变定位的情况下改变增大点击区域不仅padding+margin可以实现等高布局，border同样也可以，原理为border为盒子的一部分，盒子变高，border会随之变高。demo 掌握并利用好padding、margin、border的特性，可以帮助我们巧妙的写出兼容性极好的排版与布局 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |