外边距实现盒子居中
可以让盒子实现居中必须满足两个条件:
1、必须是块级元素;
2、盒子必须指定了宽度(width)。
将左右外边距都设置为auto,就可以使块级元素居中。
示例:
.div {width: 100px;
margin: 0 auto;
}
文字盒子居中图片和背景区别
1、文字水平居中 text-align:center;
2、盒子水平居中 左右margin改为auto
3、插入图片,使用最多,比如产品展示
4、背景图片,一般用于小图标背景或超大背景图片。
清除元素的默认内外边距
* {
padding: 0;
margin: 0;
}
注意:
行内元素只有左右外边距,没有上下外边距。
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
相邻块元素垂直外边距合并(也称外边距塌陷)
当上下的两个块元素相遇时,如果上面的元素有下边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直边距不是两者之和,而是两者中的较大者。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。
即使父元素的上外边距为0,也会发生合并。只在垂直方向发生。
解决方案:
1、可以为父元素定义1像素的上边框或上内边框
2、可以为父元素添加 overflow: hidden
content 宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
计算原则:
外盒尺寸计算(元素空间尺寸):
Element 空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
内盒尺寸计算(元素实际大小):
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)
注意:
1、宽度属性 width 和高度属性 height 仅适用于块级元素,对行内元素无效(img 标签和 input 除外);
2、计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况;
3、如果一个盒子没有给定跨度/高度 或 继承父亲的宽度/高度,则padding不会影响本盒子大小。
盒子模型布局稳定性
1、margin 会有外边距合并
2、padding 会影响盒子大小,需要进行加减计算
根据稳定性来分,建议如下:
优先使用宽度(width),其次使用内边距(padding),再次外边距(margin)。
width > padding > margin
盒子阴影
语法格式:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
1、前面两个属性是必须写的,其余的可以省略
2、外阴影(outset)不能写,默认