div高度是由什么决定的：
div高度是由内部文档流中元素的高度的总和决定的
文字对齐代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
font-size: 20px;
}
span {
display: inline-block;
width: 5em;
text-align: justify;/*在多行的情况下，左右对齐*/
overflow: hidden;
line-height: 1;
height: 20px;
}
span::after {
content: '';
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
</body>
</html>
单词中断显示：
word-break:break-all;
边框不占空间：
outline:1px solid red;
单行文本显示隐藏出现省略号：
div {
white-space: nowrap;/*不换行*/
overflow: hidden;/*隐藏多余部分*/
text-overflow: ellipsis;/*多出的文本显示省略号*/
}
多行文本隐藏显示省略号：
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
1:1的div：
.one {
padding-top: 100%;
border: 1px solid red;
}
flex
flex之前主要使用：
- normal flow （正常流，也叫文档流）
- float + clear
- position + absolute
- display: inline-block
- 负 margin
flex布局：
- 块级布局侧重垂直方向，行内布局侧重水平方向，flex布局是与方向无关的
- flex布局可以实现空间自动分配，自动对齐（flexible：弹性，灵活）
- flex适用于简单的线性布局，更复杂的布局要交给grid布局
基本概念
flex container 的属性
| 属性 | 针对方向 |
|---|---|
| flex-direction | 方向 |
| flex-wrap | 换行 |
| flex-flow | 上面两个的简写 |
| justify-content | 主轴方向对齐方式 |
| align-items | 侧轴对齐方式 |
| align-content | 多行/列内容对齐方式（用得较少） |
flex item 的属性
| 属性 | 针对方向 |
|---|---|
| flex-grow | 增长比例（空间过多时） |
| flex-shrink | 收缩比例（空间不够时） |
| flex-basis | 默认大小（一般不用） |
| flex | 上面三个的缩写 |
| order | 顺序（代替双飞翼） |
| align-self | 自身的对齐方式 |
我们再看看单个属性分别有那些方法：
flex-direction:
| 值 | 描述 | 试试手 |
|---|---|---|
| row | 默认值。灵活的项目将水平显示，正如一个行一样。 | 尝试一下 » |
| row-reverse | 与 row 相同，但是以相反的顺序。 | 尝试一下 » |
| column | 灵活的项目将垂直显示，正如一个列一样。 | 尝试一下 » |
| column-reverse | 与 column 相同，但是以相反的顺序。 | 尝试一下 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 尝试一下 » |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
flex-wrap：
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
justify-content:
| 值 | 描述 | 测试 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 测试 » |
| flex-end | 项目位于容器的结尾。 | 测试 » |
| center | 项目位于容器的中心。 | 测试 » |
| space-between | 项目位于各行之间留有空白的容器内。 | 测试 » |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 测试 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
align-items:
| 值 | 描述 | 测试 |
|---|---|---|
| stretch | 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 | 测试 » |
| center | 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 | 测试 » |
| flex-start | 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 | 测试 » |
| flex-end | 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 | 测试 » |
| baseline | 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 | 测试 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
align-content:
| 值 | 描述 | 测试 |
|---|---|---|
| stretch | 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 | 测试 » |
| center | 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。） | 测试 » |
| flex-start | 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。 | 测试 » |
| flex-end | 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。 | 测试 » |
| space-between | 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。 | 测试 » |
| space-around | 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。 | 测试 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
flex-grow:
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
flex-shrink:
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
flex-basis:
| 值 | 描述 |
|---|---|
| number | 一个长度单位或者一个百分比，规定灵活项目的初始长度。 |
| auto | 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
order:
| 值 | 描述 |
|---|---|
| number | 默认值是 0。规定灵活项目的顺序。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
align-self:
| 值 | 描述 | 测试 |
|---|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 | 测试 » |
| stretch | 元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 | 测试 » |
| center | 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 | 测试 » |
| flex-start | 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 | 测试 » |
| flex-end | 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 | 测试 » |
| baseline | 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 | 测试 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
美化按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.frankButton {
box-sizing: border-box;
display: inline-block;
background: none;
height: 36px;
line-height: 36px;
padding: 0 16px;
text-decoration: none;
font-size: 14px;
border:none;
transition: all .5s;
position: relative;
overflow: hidden;
z-index: 0;
}
.frankButton:hover {
background: #E5E5E5;
}
.frankButton:focus {
outline: none;
background: #E5E5E5;
}
.frankButton > .circle {
position: absolute;
top: 50%;
left: 50%;
width:6px;
height: 6px;
background: gray;
margin-top: -3px;
margin-left: -3px;
transition: transform .5s;
border-radius: 3px;
z-index: -1;
pointer-events: none;
visibility: hidden;
}
.frankButton > .circle.active {
transform: scale(15);
visibility: visible;
}
</style>
</head>
<body>
<button id="b" class="frankButton">按钮
<span class="circle"></span>
</button>
</body>
<script>
b.onclick = function(){
b.querySelector('.circle').classList.add('active')
}
b.querySelector('.circle').addEventListener('transitionend',function(){
b.querySelector('.circle').classList.remove('active')
})
</script>
</html>
上面代码我认为需要注意的知识点：
visibility: hidden:
| 值 | 描述 |
|---|---|
| visible | 默认值。元素是可见的。 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
pointer-events: none;/*不会响应鼠标事件*/
transform: scale(15):
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
小知识
<input type="text" autocomplete="off">中autocomplete的作用是取消浏览器的自动补全
vertical-align: top;可以去除img下的空隙
font-size控制一个看不见的格子，控制em-aquare
line-height控制字体实际占地高度
The early bird catches the worm
网友评论