css基础笔记3-盒子模型

盒子模型

边框

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盒子的样式改变而改变，比如给该盒子加一个背景颜色，padding内边距的内容背景颜色也会是该盒子的颜色。

外边距

margin，设置方法跟padding差不多。

可以让块级盒子水平居中，但是必须满足：盒子必须指定了宽度，盒子的左右外边距都设置为auto。行内元素或者行内块元素不能通过这个方法水平居中,行内元素或者行内块元素水平居中可以给其父元素添加text-align:center。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是两个外边距的和。而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。

解决方法：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加overflow:hidden.还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题。

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。行内元素的上下外边距不起作用。

去掉li前面的项目符号(小圆点)

list-style:none;

ul 和li都是块级元素，可以用padding，不会影响盒子的宽度。详情看内边距的笔记。

圆角边框

border-radius:

 

盒子阴影

box-shadow:

 

文字阴影