<a href='#'>顶对齐</a>
先把a标签转成块级元素,它默认是行级元素,也就是说行级元素下是没有标准的宽和高,即便是你设置了,它最终显示还是以字符所占的高和宽
转成块级后这样就可以了,默认字符是以浏览器左上角显示的
ps：如果想要深入了解css盒模型，可以去 w3cSchool 找到关于盒模型的详细概述，这里只会简单的介绍部分盒模型相关的知识
这是一个元素的盒模型展示，几乎所有元素都是使用这种盒模型构成的，盒模型分四个部分，从里到外分别为 element(元素) 、 padding(内边距) 、 border(边框) ， margin(外边距)
写在双闭合标签里面的内容通常会显示在元素的element部分，也就是内容区。
页面中的显示效果为：
如果我在div内部再加一个，则div的内容区域被继续撑开：
呈现效果为：
padding不会占据元素的内容区域，但是它会扩展一个元素的内部区域，可以打一个比方，我们每个人本身就好比是一个元素的element，而你身上穿的衣服就好比是元素的padding部分，你的衣服既是你又不是你本身，别人在找你的时候如果碰到你的衣服你可以感觉到是有人触碰了你，但是你的身体本身并不会延伸到衣服的内部
还是使用上面的那个div，我们现在给这个div加上一个padding，在这之前为了方便观察，我们先给这个div加上一个背景颜色和宽度，
现在呈现出来的效果：
我们可以看到，现在文字和还是在这个元素的底部的，我们现在给他加上一个50px的padding
其中蓝色部分是element，也就是元素的内容区，400 125代表了我们设置了400px的宽度，里面的高度是125px，内容区被撑开，所以此时元素的内容区是400 125像素的大小，然后往外看，padding有4个50，这是代表了这个元素在上下左右四个方向上的padding都是50像素，此时我们整个元素的占位宽度就是400+50+50=500px，高度则是125+50+50=225像素，所以但是由于元素内容的部分不能延伸到padding区域，所以上面的文字和还是都在元素本身的内容区，不会随着元素尺寸被padding撑大而向外扩展。
再回到这张
现在我们有一个a标签构成的超级链接，点击这个a标签可以跳转到对应的页面，但是有的时候在页面中文字可能比较小，如果只有在点击到文字上时才能跳转的话会影响用户体验，所以我们要让a标签的点击区域变大，有两种方式可以解决这个问题：
为了方便观察，我们同时给他一个背景色
这时，我们由于扩大了a标签的宽度和高度，所以整个绿色的区域都是a标签的范围，自然都可以实现点击效果。
上面那种方式可以实现大多数需求，但是现在还有一个问题，就是当a标签的可点击范围不固定时，或者由于种种问题我们不能给a标签转成块级元素时，上面那种方法就不生效，比如下面这种场景：
这是一个通常网页中常见的菜单栏，现在我有一个需求，就是需要给被点击超级链接加大尺寸方便点击，同时加一个统一的背景颜色，以便于让用户区分哪些是可以被点击的区域。
按照上面的那种方式，我们可以这样设置
呈现的效果是
这时如果我们想要给文字居中还需要设置两个样式：
然后出来的效果是这样的：
这时我们已经达到了我们所需要的效果，但是还有一种情况，就是当列表内的文字长短不一时，这种方式就会出现问题：
边框的使用没有什么好说的，只有几个主要注意的地方：
其中1、2比较容易理解，下面解释一下第3点。
我们在做页面的时候，有的时候会使用这样的特效：
这两种效果最大的区别在于2比1多了一个过渡的效果。
按照没有过渡效果的border（以下简称效果1）的思路，转变成有过渡效果的border（简称效果2）应该只需要加一个 transition 作过渡动画就可以了，但实际上如果我们只是在效果1的基础上加了一个 transition 的话则会出现这样的效果：
在初学css时，margin和padding最容易混淆，实际上我们只需要注意两者最大的区别就可以，那就是 padding 可以延伸 background 的属性，主要是 background-color 和 backgound-image ，而 margin 不会延伸这些属性。
我在这里写了两个div，给他们加了同样的宽度并分别加了背景颜色，同时给div1加了几个文字内容，由于块级元素的特性，他们分别处于两排。
现在我给div1设置50px的padding
可以看到，现在div1的元素本身被撑大了，现在div1的高应该是50 + 200 + 50 = 300px
同样，由于上面提到的padding的特性，所以文字依然是在内容区，没有进入padding的部分。
此时我们可以看到，div1的整体尺寸被放大了，同时背景颜色延伸到padding的范围。
现在我再给div1设置5px的border
这时div1的整体高度应该是5 + 50 + 200 + 50 + 5 = 310px
然后再设置20px的margin：
我们先不用管其他方向，先看下面，也就是div1和div2交接的地方。
在这里我们可以看到div1和div2之间有20px的间距，这一部分就是div1的margin，而且和padding最大的区别是这一部分没有延伸div1的背景色和内容区域，同时也没有让div的元素尺寸发生改变
因此我们可以这样理解
这里看完了，我们现在再回头看margin右侧的问题
我们可以发现，Chrome在审核元素时会自动将对应部位改变颜色，在右侧鼠标放在对应的位置时，左侧的元素也会实时响应出对应位置，如图所示，在element、padding、border时显示均正常，margin时上、左、下三个方向也没有问题，唯独右侧会比我设置的margin要大得多（ margin:20px ），这是因为块级元素独占一行的特性，让他在自己元素本身同行的位置会有默认的 margin:auto; ，即 同行下所有元素没有占的位置均为这个元素的margin ，这也是块级元素不能和其他元素同行的原因。
元素的盒模型会有各种各样特殊的问题，下面举几个常见的例子以及经常出现的问题和解决方式：
我们在布局时，由于元素的高度通常为后台提供，所以前端页面的部分通常不会给固定的高度以免结构混乱，所以我们在布局时需要灵活运用padding和清浮动。
上面一个div内部有一个ul无序列表，div上下均距离ul有一定的距离。
在我们写静态页面时无序列表的数量可能是固定的（4个），但是js加载时通常数量不固定，可能少于4个也有可能更多，这时如果我们给一个固定的高度则会出现内容溢出的问题
所以这里我们需要给div设置上下相等的padding，而不是固定高度。
在HTML中，一个元素内部的第一个子元素如果有margin-top的话即会将子元素的margin-top赋给父元素：
如图所示，我在元素中给h1设置了margin-top，但是h1的margin-top并没有生效，而是传递给了它的父元素div，导致div整个被拉了下来，布局错乱。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）