这篇博客主要介绍了CSS中的盒子模型，包括边框、表格、内边距、外边距的详细概念和应用。讨论了如何使用边框样式、表格边框合并、内边距对元素间距的影响，以及外边距在布局中的作用，如实现块级元素水平居中。此外，还提到了解决外边距合并和塌陷的方法，并讲解了如何去掉li元素的项目符号以及如何设置圆角边框、盒子阴影和文字阴影。
盒子模型
边框
border:border-width border-style border-color
定义边框粗细，单位是px。边框的样式（dashed虚线，dotted点线）。边框颜色。
边框可以分开写用border-top等
表格
一个table就是相当于一个div，里面的每一个单元格相当于行内块元素的小div。如果给每个td一个边框会造成相邻的两个边框会加在一起，要解决这个问题需要：border-collapse:collapse;表示相邻边框合并在一起。
边框会直接影响div的大小，会在原盒子基础的大小上加上两边边框的宽度。
内边距
paddiing
内边距会影响盒子的大小，在设置了盒子的宽高后，会在原盒子基础的大小上加上两边内边距的宽度。一般要让两个相邻元素有间距，就用padding将他们的盒子撑开，造成间距。在没有设置盒子的宽度的时候，padding不会影响盒子的宽度，盒子在没有设置高度的时候高度是由内容来决定的，没有内容就为0，但是由于盒子是块级元素，会占一整行，所以宽度默认会是父盒子的100%。但是如果不去设置，就算有默认的宽度，padding还是不会影响盒子的宽度。padding里的内容也会随设置padding盒子的样式改变而改变，比如给该盒子加一个背景颜色，paddi
最低0.47元/天 解锁文章
扫一扫
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
