2020-08-10

盒子边框：(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​ 伸缩盒布局：

​

​

.section{ display:flex;}​ 三行布局：flex-direction:row(列布局)​ flex-direction:column(行布局)​ 自动换行​ 等比例划分横向​ 纵向居中&横向伸缩：1. align-items:center;控制伸缩盒子在垂直轴上的显示。 stretch:【默认值】将盒子在Y轴上进行拉伸，直至适应整个伸缩盒子容器。 center: 盒子在Y轴中心显示。flex-start: 在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部flex-end: 在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部2.justify-content:控制伸缩盒子在主轴上的显示。flex-start:【默认值】在主轴的开始显示 flex-end:在主轴的结束显示 center:在主轴的中心显示 space-around:填充空白自适应在主轴中心显示 space-between:填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白。