2017 November 15 CSS

那些熟悉又陌生的 CSS 属性

一、布局类属性

1、table 布局——表格数据

html table 和 css table。

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

2、div + css: display, float, position

3、flexbox 布局：适应不同的屏幕尺寸和不同的显示设备

.flex-container {
    display: flex|inline-flex;
    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content
}
.flex-item {
    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self
}

点击查看具体属性

4、grid 布局: 二维布局问题

.grid-container {
    display: grid;
    grid-template-columns;
    grid-template-rows;
}
.grid-item {
    grid-column;
    grid-row;
}

点击查看具体属性

二、你以为你懂实际不一定懂的 css 属性

1、z-index

堆叠顺序

层的根元素
被定位了得元素并且 z-index 值为负，相同 z-index 的情况下，按照 HTML 元素的书写顺序排列，下面相同。
没有被定位的元素
被定位的元素，并且 z-index 值为 auto
被定位了的元素并且 z-index 值为正。

了解堆叠上下文点这里

2、margin

可视尺寸: clientWidth(border + padding + content)

占据尺寸: outerWidth(margin + border + padding + content)

margin 百分比

普通元素的百分比 margin 都是相对于 容器的宽度 计算的

绝对定位的百分比 margin 是相对于第一个具有定位属性的 祖先元素 的宽度

margin 重叠

block 水平，不考虑 writing-mode，只发生在垂直方向

相邻的兄弟元素
父级和第一个/最后一个子元素
空的 block 元素