CSS盒子模型

css盒子有哪些属性：

边框 border;
内边距 padding;
外边距 margin;
宽度：width;
高度：height;
边框宽度：border-width;
边框样式 :
实线：solid;
虚线：dashed;
点线：dotted;
边框颜色：background-color;

边框的综合性写法：

1. 边框的综合性写法：边框粗细 边框样式 边框颜色
   例:border:5px dotted pink;
2. 盒子的每个边框可以分别指定 top, buttom, left, right
3. 两个单元格之间的边框会叠加,从而使边框变粗，可以使用border-collapse属性来合并边框
   这个属性的默认值是separate，当值为collapse时会合并边框

不同写法的内边距代表什么意思

padding:20px;上下左右都是 20 的内边距
padding:10px 20px; 上下是10 左右是20
padding:10px 20px 30px;上是10 左右是20 下是30
padding:10px 20px 30px 40px;上是10 右是20 下是30 左是40 顺时针

盒子的实际大小 = 内容宽度 高度 + 内边距 + 边框

盒子被撑开

解决方法: 内边距一定要给,我们只能改变内容宽度 width 让他减去多出来的内边距
如果没有给一个盒子指定宽度,此时,如果再给这个盒子指定padding,则不会撑开盒子

外边距

1. margin-left: ; margin-top: ; margin-right: ; margin-bottom: ; 简写方式与内边距一致

2. 让块级盒子水平居中对齐: 必须给盒子指定宽度,左右外边距设置为auto 共有三种写法：
   2.1 margin-left: auto; margin-right: auto;
   2.2 margin:auto;
   2.3 margin:0 auto;

3. margin:auto;
   让盒子里的文字 行内元素 行内块元素居中

4. text-align: center;
   插入图片:移动位置只能用盒子模型padding margin
   背景图片:小图标背景或者超大背景,只能通过background-position

5. 为了更方便灵活的使用页面中的元素,制作网页时,我们需要将元素的默认内外边框清除
   padding:0; margin:0;

嵌套关系 垂直外边距 解决方案:
1.可以为父元素定义上边框 transparent 透明
border-top:1px solid transparent;
2.可以为父元素定义上内边框
padding-top: 1px;
3.可以为父元素添加overflow:hidden

去掉列表默认的样式:li {list-style:noine}
圆角边框; border-radius:length(x%);
box-shadow: h-shadow(水平阴影) v-shadow(垂直阴影) blur(可选 模糊距离)
spread(可选 阴影尺寸) color(可选 阴影颜色) inset(可选 将外部阴影改为内部阴影)