CSS盒子模型

CSS盒子模型

页面布局三大核心 盒子模型 浮动 定位

利用CSS设置好盒子样式，摆放到相应位置，然后往盒子里装入内容

盒子模型的组成部分

border 边框 content内容 padding 内边距（内容与盒子边框） margin外边距（盒子与盒子）

边框（border）合理利用层叠性
颜色 宽度 线型
border-color border-width border-style
实线 solid 虚线dashed 点线dotted

细线表格
border-collapse：collapse 合并边框

边框会影响盒子实际大小
padding也会影响盒子实际大小
padding 内边距

复合写法

padding: 5px;上下左右都有
padding: 5px 10px; 上下是5px,左右10px
padding: 5px 10px 20px; 上5 左右 10 下20px
padding: 5px 10px 20px 30px;顺时针 上右下左

盒子内字数不一样多，使用padding撑开盒子
盒子本身没有指定width/height，padding 不回撑开盒子

margin外边距

块级盒子水平居中必须满足两个条件：盒子必须指定宽度，盒子左右外边距都设置为auto；
margin: 0 auto;
行内元素行内块元素水平居中，给父元素添加text-align: center;

外边距的塌陷问题

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：为父元素定义一个边框（transparent）、为父元素定义上内边距、为父元素添加overflow:hidden

清除内外边距

* {
    margin: 0;
    padding: 0;
}

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

盒子阴影

box-shadow:h-shadow v-shadow blur spread color inset;
水平阴影 垂直阴影 模糊距离（影子虚实，越大越模糊） 阴影尺寸 阴影颜色 外部阴影改为内部阴影 不写默认就是外阴影
盒子阴影不占用空间