选择器 #
标签选择器、类选择器、id选择器
tag {
标签选择器
}
.class {
类选择器
}
#id {
ID 选择器
}
布局 #
display: block; inline; inline-flex; flex;
盒子模型(block) #
属性
- margin
- border
- padding
- content
标准盒模型和替代盒模型
box-sizing: content-box; border-box;
弹性盒子布局(flexbox) #
#parent {
display: flex;
flex-flow: column wrap; /*(direction+wrap)*/
flex-wrap: nowrap; /* wrap; wrap-reverse; */
flex-direction: row; /* column; row-reverse; column-reverse; */
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
justify-items: flex-start;
}
#child {
order: 1; /* 默认为 0 */
align-self: flex-start; /* flex-end;center; */
}
练习游戏
文档:MDN文档
属性:
- justify-content(“横向”,取决于flex-direction)
- flex-start
- flex-end
- center
- space-between
- space-around
- align-items(“纵向”)
- flex-start
- flex-end
- center
- flex-direction
- row(默认)
- row-reverse
- column
- column-reverse
- align-self(子元素)
- flex-start
- flex-end
- center
- order(子元素)
- 可选 0,1,2,3 etc
- align-content
- 只适用多行的flex容器,也就是说子项不止一行时该属性才有效果
- flex-wrap
- 指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向。
- nowrap(默认)
- wrap
- wrap-reverse
网格布局(grid) #
练习游戏:
属性:
- grid-template-columns
- grid-template-rows
- grid-column-start(子元素)
- grid-column-end(子元素)
- grid-column(等价于 3+4)
- grid-row-start(子元素)
- grid-row-end(子元素)
- grid-row(6+7)
- grid-area(等价于 row-start/column-start/row-end/column-end)
- order(元素间的排序)
- grid-template(1+2),中间要有斜线。
举例:
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-template-columns: repeat(1, 12.5%);
grid-template-columns: 1fr 5fr; /*(fractional 分数)*/
grid-template: 60% 40% / 200px;
}
#watch {
grid-column-start: 1;
grid-column-end: 2;
grid-column: 1/2;
grid-column-start: 1;
grid-column-end: span 2;
grid-area: 1 / 4 / 6 / 5;
}
大于号、加号、取代符号 #
大于符号(>) #
大于符号就是选择底下的直接元素
例如:
<div class="box">
<p>001</p>
<div>
<p>002</p>
<p>003</p>
</div>
<p>004</p>
</div>
.box p{
/** 表示 class 为 box 的 div 下所有的 p 标签即内容为 001、002、003、004的p标签/
}
.box > p {
/** 表示 class 为 box 的div 下的直接的子元素 p 即内容为 001、004 的p标签/
}
加号(+) #
加号表示后方同层级的第一个元素
例如:
<div>
<p>001</p>
<div class="box">
<p>002</p>
</div>
<p>003</p>
<p>004</p>
</div>
.box + p{
/** 表示 class 为 box 的 div 后方同层级的第一个 p 元素即内容为 003 的 p 标签/
}
取代符号(~) #
表示后方同层级的全部元素
例如:
<div>
<p>001</p>
<div class="box">
<p>002</p>
</div>
<p>003</p>
<p>004</p>
</div>
.box ~ p{
/** 表示 class 为 box 的 div 后方同层级的所有 p 元素即内容为 003、004 的 p 标签/
}