盒子边框:(border)border-width: 为元素指定边框的宽度border-style: 为元素指定边框样式border-color: 为元素指定边框颜色border-radius: 为元素指定圆角边框的半径border-image: 为元素设定边框背景 border-image-source: 用于加载作为边框的图片 border-image-slice: 用于切割边框图片(不加单位) border-image-repeat: 用于设置边框图片重复方式 border-style: 为元素指定边框的样式 solid double dotted(显示一系列的点) dashed(显示一系列小线段)表格样式TABLE: table-layout:指定显示表格的盒子,行,列的算法 auto:【默认值】绝大多数浏览器采用的一种布局表格的方式。table以及 cell的宽度取决于包含在其中的内容 fixed:table的宽度以及列的宽度取决于表格的第一行各列设定的宽度 border-collapse:指定表格的边框是合并还是分开 separate:【默认值】分开模式,表示相邻的两个格子都有独立边框 collapse:合并模式,表示相邻的两个格子共享边框 caption-side:指定caption坐落在表格的哪个位置上 top:标题位于表格的上方 bottom:标题位于表格的下方布局
:浮动布局:floats float-left: float-right: float-none: float-inhefit:浮动方式继承父元素 定位布局:positioning position:static 静态定位 position:relative 与静态定位相似 position:absolute 元素脱离了文档流,即不在原来的位置上。 不干扰其他元素在页面中的位置,显示在其他元素的上方。 绝对定位元素是相对于他的【包含元素】定位 position:fixed 固定定位元素相对于浏览器视口。 不会随着浏览器的滚动而滚动 position:sticky 粘带定位 relative+fixed 随父元素滚动外边距合并问题:
父子级
1.父元素无边框,给父元素添加边框 2. 将本应该设置给子元素的(margin-top)设置给父元素的(padding-top ) 【此时父级的高度相对应的减少】 3. 给父级或自己添加一个浮动属性 4. 给父级或自己添加一个position:absolute属性 5. 给父级或自己添加一个display:inline-block 6. 给父级元素添加一个overflow:hidden 伸缩盒布局:
06-08
3217
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-14
1065
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-09
1288
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)