学习前端第十二天

外边距实现盒子居中

可以让盒子实现居中必须满足两个条件：
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

使用宽度属性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:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影；

1、前面两个属性是必须写的，其余的可以省略
2、外阴影（outset）不能写，默认

发布了12 篇原创文章 · 获赞 0 · 访问量 83

私信关注