19.box-sizing
content-box
Element Width/Height = border + padding + content width/height
border-box
Element Width/Height = width/height - border - padding
20.border-radius百分数圆角半径的计算方式
.con{border-radius:33%}
如果元素宽度为600px，就从距左边198px处向内弯曲600 * 0.33 = 198px
21.图像边框
img{
boder:25px solid;
border-image-source:url(imgs/circle.png);
border0image-source:33.33%; //放置四条裁剪线
}
22.半圆形
通过宽、高均为0的容器设置两条连续的边框线，再加上圆角属性即可
section div{
box-sizing: border-box;
width: 0;
height: 0;
border:4em solid;
outline: 1px dashed black;
}
.div1{
border-color:lightgreen transparent transparent coral;
border-radius: 50%;
}
23.扇形
正方形容器，一个角的圆角属性设置为100%
.duck .div1{
background-color: seagreen;
border-radius: 100% 0 0 0;
}
24.三角形
容器的宽、高均为0，只有一边上色，其他3边边框的颜色为透明，并设置边框宽度为0.5em
下边框的高度就是三角形的高度
section div{
width: 0;
height: 0;
outline: 1px dashed black;
border-style: solid;
border-color:transparent transparent dodgerblue transparent;
}
.div1{border-width: 5em;}
25.弹性布局flex--详解
弹性元素沿主轴排布
各行弹性元素沿垂轴的方向添加
在flex-wrap属性之前，所有的只有一行弹性元素，那一行弹性元素在主轴上排布，沿主方向，从主轴起边指向主轴终边。
主轴：内容沿此轴流动。在弹性盒中，指弹性元素流动的方向
主轴尺寸：主轴方向上内容的总长度
主轴起边：主轴上内容开始流动的那一端
主轴终边：主轴上内容流动的那一端，与主轴起边相对
垂轴：块级元素沿此轴重叠。在弹性盒中，指放置新弹性元素行的方向（前提是允许换行）
垂轴尺寸：垂轴方向上内容的总长度
垂轴起边：垂轴上块级元素开始堆叠的那一边
垂轴终边：垂轴上起边相对的那一边
从右至右书写模式下主轴和垂轴的维度和方向，及其起边和终边的位置
row row-reverse column column-reverse
主轴 从左至右 从右至左 从上到下 从下到上
主轴起边 左边 右边 顶边 底边
主轴终边 右边 左边 底边 顶边
主轴尺寸 宽度 宽度 宽度 宽度
主轴维度 横向 横向 纵向 纵向
垂轴 从上到下 从上到下 从左到右 从左到右
垂轴起边 顶边 顶边 左边 左边
垂轴终边 底边 底边 右边 右边
垂轴尺寸 高度 高度 高度 高度
垂轴维度 纵向 纵向 横向 横向
（1）flex-direction属性
row：从左到右排列（横向）
row-reverse：从右到左排列（横向）
column：从上到下排列1，2，3，4，5（纵向）
column-reverse：从上到下排列5，4，3，2，1（纵向）
注：这种布局方式不适用于语言文字的排列
（2）换行flex-wrap属性
默认情况下弹性元素不会换行，也不会自行调整尺寸
nowrap：不换行
wrap：多出的一行在下面显示
wrap-reverse：多出的一行在上面显示，即第一行显示
（3）justify-content属性（对齐方式）
justify-content: flex-start; 紧靠主轴起边，居左
justify-content: flex-end; 紧靠主轴终边，居右
justify-content: center;居中显示在每一行里
justify-content: space-between; 首尾的两个元素挨着容器边缘，中间的其他元素平均排列
justify-content: space-around; 首尾的两个元素与容器边框的距离是元素之间间距一半，各元素平均排列
justify-content: space-evenly;把余下的空间拆分开，不过每个间距的长度是相等的
（4）align-items属性（对齐元素）
26.栅格布局grid
（1）放置栅格线
宽度固定的栅格轨道：栅格线之间的距离不随栅格轨道中内容的变化而变
弹性栅格轨道：
grid-template-columns:1fr 1fr 1fr 1fr;
等同于grid-template-columns: 25% 25% 25% 25%;
（2）根据轨道中的内容适配
重复栅格线
repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
grid-template-columns: repeat(2, 1fr); /*2列*/
等同于grid-template-columns:1fr 1fr;
网友评论