发表于： 2020-03-21 09:07:25
1 1212
今天完成的事情：完成任务5.
明天计划的事情：完成任务6
遇到的问题：
收获：
1、绘制特殊形状。
圆形：先创建一个正方形div，设置border-radios为50%使得div变成圆形。
向左三角形：
.test-border {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #ff7f50;
}
向右三角形：
.test-border {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #ff7f50;
}
向下三角形：
.test-border {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ff7f50;
}
向上三角形：
.test-border {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ff7f50;
}
2、vertical-align和line-height。
vertical-align和line-height都是设置行内元素样式的相关属性。
line-height行高指的是文本基线之间的距离。只作用于行内元素和行内内容，并不会影响块状元素。但是块状元素也可以设置line-height属性，只是这样设置的时候实际上是只对该块状元素的行内元素才会有影响。
对于行内非替换元素，font-size和font-family确定了其内容区高度。
vertical-align用来设置垂直对齐方式，默认值为baseline，常见取值有top、middle、bottom。
图片元素在块状元素内底部留有空白的原因就是因为图片默认的vertical-align属性值为baseline。处理方法有：
⑴、将元素display设置为block。
⑵、父级元素的line-height设置为0.
⑶、将元素的vertical-align设置为top、middle或bottom。
3、flex布局
flex指弹性布局，任何一个容器都可以使用flex布局，包括行内元素。
.box {
display: flex;
}
.box {
display: inline-flex;
}
需要注意的是，设置flex布局后，子元素的float、clear、vertical-align属性将会失效。
采用flex布局的元素称为flex容器，其所有子元素自动成为容器成员，成为flex项目。
容器的属性：
flex-direction，定义主轴的方向，默认值为row水平排列，其他值为row-reverse，column，column-reverse。
flex-wrap，定义换行方式，默认值为nowrap不换行，其他值有wrap，wrap-reverse。
flex-flow，为flex-direction和flex-wrap的简写形式。flex-flow： <flex-direction>||<flex-wrap>；
justify-content，定义主轴上的对齐方式。默认值为flex-start左对齐，其他值有flex-end，center，space-between，space-around。
align-items，定义主轴交叉轴的对齐方式，默认值为stretch沾满整个容器，其他值有flex-start，flex-end，center，baseline。
align-content，定义有多根主轴线时的对齐方式，当只有一根主轴线时不起作用。默认值为stretch占满整个交叉轴，其他值有flex-start，flex-end，center，space-between，space-around。
返回列表
评论