标签：其他 空间 order 圆角 shadow 没有 块元素 one 图片
盒子边框
border：border-width || border-style ||border-color
div{border:1px solide red};
border-style常用属性：
none 无
solid 实线
dashed 虚线
dotted 点线
double 双实线
表格的细线边框 border-collapse:collapse
圆角边框
border-radius:左上角 右上角 右下角 左下角；
div{border-radius:50%}取宽高的一半，会变成一个圆
div{border-radius:10px} 上下左右都是10px
div{border-radius:10px 20px} 左上角 右下角是10px 右上角 左下角是20px
内边距 padding 内容到边框的距离
div{padding:10px}上下左右都是10px
div{padding:2px 3px}上下2px 左右3px
div{padding:2px 3px 4px}上2px左右3px 下4px
div{padding:3px 4px 5px 6px}上3px 右4px 下5px 左6px 顺时针方向
外边距margin 取值顺序与内边距相同
外边距可以让盒子实现水平居中，需要满足以下两个条件：
a 必须是块级元素
b 盒子必须指定宽度width
.header{width:10px;
margin:0 auto;}
section img{width:200px; 插入图片的大小可以用width height改变
margin-top:30px ;插入图片更改位置，用padding margin
background-size:200px 120px;背景图片更改只能用background-size，背景图片适 合做一些小图片，使用产品展示之类的用插入图片
}
清除元素默认内外边距
*{padding :0;
margin:0;}
注意：行内元素没有上下内外边距，只有左右内外边距，尽量不要给行内元素指定上下内外边距
外边距合并
使用margin定义块元素的垂直边距时，可能会出现外边距合并问题
a.相邻块元素垂直外边距合并
如果上边元素有margin-button下边元素有margin-top，他们之间的垂直距离不是margin-button与martin-top的和，而是两者较大值，这种现象称为相邻块元素垂直外边距的合并（也称为外边距塌陷）
解决方式：避免就好了，只给一个盒子外边距
b.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距与子元素的上外边距发生合并，合并后的边距为两者中较大值，即使父元素的上外边距为0，也会发生合并。
解决方式：1.为父元素定义1px的上边框或上内边距
2.为父元素添加overflow:hidden
Content宽度和高度
外盒尺寸计算（元素空间尺寸）
Element空间高度=content height +padding+border+margin
Element空间宽度=content width+padding+border+margin
内盒尺寸计算（元素大小）
Element height=content height+padding+border
Element width=content width+padding+border
注意：
a 计算宽高属性，只适用于块级元素，对行内元素无效，但是img input除外
b 计算盒子模型的总高度，还应该考虑上下两个盒子垂直外边距合并的情况
c 如果一个盒子没有给定高度和宽度或者没继承父亲的宽高，则padding不会影响本盒子的大小
盒子模型布局稳定性
优先使用width >padding > margin
原因：
a margin会有外边距合并，还有IE6下面margin加倍的BUG，所以最后使用
b padding会影响盒子大小需要进行加减计算，比较麻烦，其次使用
c width没有问题，经常使用宽度剩余法 高度剩余法来做
box-sizing:bording-box padding border 不撑开盒子
盒子阴影
语法格式：
Box-shadow:水平阴影 垂直阴影|模糊距离 阴影尺寸 阴影颜色 内/外阴影
h-shadow v-shadow|blur spread color inset/outset
水平阴影和垂直阴影必填，其他的可以省略
Outset可以不写，系统默认，想要内阴影使用inset
标签：其他 空间 order 圆角 shadow 没有 块元素 one 图片
原文地址：https://www.cnblogs.com/wxwxwx/p/10260091.html
