关于div及display
1、DIV
div被看作是一个盒子，可以设置width、height。这个盒子其实是由三部分构成width(height)、padding、border。在默认情况下，所见到的div是border和padding为零的。故三者加起来也就是平时默认情况下div的宽高总和。对div设置属性box-sizing，则会影响div外观的大小(在border或padding不为零的情况下)。
box-sizing: content-box->div的宽高就是设置的宽高，但是这时如果设置了border或padding属性值(为正值)，div盒子会变大，从外观上（可添加背景测试），但是作为容器的div容量并没有变大，能装的容量还是之前的大小，只是看起来变大而已——虚胖！！！
box-sizing: border-box->div整体的宽高由本身容器大小与border、padding之和所得。也就是设置border、padding值越大，div本身的容量就会越小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.aaa {
box-sizing: content-box;
/*box-sizing: border-box;*/
width: 100px;
height: 100px;
padding: 20px;
background: #ccc;
border: #000 solid 10px;
}
</style>
</head>
<body>
<div class="aaa">
2019.5.9 21.27分
</div>
</body>
</html>
2、display：flex（注意浏览器兼容）
flex是flexible box的缩写，意为“弹性布局”，为盒装模型提供最大的灵活性，可运用在行内元素（display: -ms-flexbox; display: -webkit-inline-flex; display: inline-flex;）或容器（display: -ms-flexbox; display: -webkit-flex; display: flex；）中，设置该布局后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素成为Flex容器，简称容器；它的所有子元素自动成为容器成员，称为Flex项目，简称项目。
容器默认存在两根轴，水平主轴（main axis）、垂直交叉轴（cross axis）；main start是主轴的开始位置（与边框的交叉点），main end是结束位置；cross start是交叉轴的开始位置，cross end是结束位置；项目默认从主轴排列，main size是单个项目占据的主轴空间，cross size是占据的交叉轴空间。
flex容器的属性有以下几个：
●flex-direction：决定项目在主轴方向的排列方向，可能值如下：
row（默认）：主轴为水平方向，起点左端；
row-reverse：主轴为方向水平，起点右端；
column：主轴为垂直方向，起点在顶部；
row-reverse：主轴为垂直方向，起点在底部；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex-direction</title>
<style>
.flexContainer {
display: flex;
float: left;
width: 130px;
height: 130px;
margin: 5px;
background: lightblue;
} .fc1 { flex-direction: row;}
.fc2 { flex-direction: row-reverse;}
.fc3 { flex-direction: column;}
.fc4 { flex-direction: column-reverse;} .flexItem {
width: 25px;
height: 25px;
background: lightpink;
border: cornflowerblue solid 1px;
}
</style>
</head>
<body>
<p>flex-direction决定项目在主轴方向的排列:rowrow-reverse columncolumn-reverse</p>
<div class="flexContainer fc1">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
</div>
<div class="flexContainer fc2">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
</div>
<div class="flexContainer fc3">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
</div>
<div class="flexContainer fc4">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
</div>
</body>
</html>
●flex-wrap：项目在默认情况下是在一条线（又称轴线）上排列的，该属性定义如果一条轴线上排不下，如何进行换行，属性值如下：
nowrap（默认）：不换行；
wrap：换行，第一行在上面；
wrap-reverse：换行，第一行在下面；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.flexContainer {
display: flex;
margin: 10px;
background: lightblue;
} .fc1 { width: 300px;}
.fc2 { width: 200px;}
.fc3 { width: 200px; flex-wrap: wrap;}
.fc4 { width: 200px; flex-wrap: wrap-reverse;} .flexItem {
width: 30px;
height: 30px;
background: lightpink;
border-radius: 50%;
border: #888 solid 1px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="flexContainer fc1">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
<div class="flexItem"><i>4</i></div>
<div class="flexItem"><i>5</i></div>
<div class="flexItem"><i>6</i></div>
<div class="flexItem"><i>7</i></div>
<div class="flexItem"><i>8</i></div>
<div class="flexItem"><i>9</i></div>
</div>
<div class="flexContainer fc2">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
<div class="flexItem"><i>4</i></div>
<div class="flexItem"><i>5</i></div>
<div class="flexItem"><i>6</i></div>
<div class="flexItem"><i>7</i></div>
<div class="flexItem"><i>8</i></div>
<div class="flexItem"><i>9</i></div>
</div>
<div class="flexContainer fc3">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
<div class="flexItem"><i>4</i></div>
<div class="flexItem"><i>5</i></div>
<div class="flexItem"><i>6</i></div>
<div class="flexItem"><i>7</i></div>
<div class="flexItem"><i>8</i></div>
<div class="flexItem"><i>9</i></div>
</div>
<div class="flexContainer fc4">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
<div class="flexItem"><i>4</i></div>
<div class="flexItem"><i>5</i></div>
<div class="flexItem"><i>6</i></div>
<div class="flexItem"><i>7</i></div>
<div class="flexItem"><i>8</i></div>
<div class="flexItem"><i>9</i></div>
<div class="flexItem"><i>10</i></div>
<div class="flexItem"><i>11</i></div>
<div class="flexItem"><i>12</i></div>
<div class="flexItem"><i>13</i></div>
<div class="flexItem"><i>14</i></div>
<div class="flexItem"><i>15</i></div>
<div class="flexItem"><i>16</i></div>
<div class="flexItem"><i>17</i></div>
<div class="flexItem"><i>18</i></div>
</div>
</body>
</html>
●flew-flow：flex-direction属性和flew-wrap属性的简写形式。
flex-flow: <flex-direction> || <flew-wrap>;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex-direction和flex-wrap属性的简写</title>
<style>
.flexContainer {
display: flex;
float: left;
flex-flow: row-reverse wrap;
width: 120px;
height: auto;
background: lightblue;
} .flexItem {
width: 30px;
height: 30px;
margin: 1px;
background: lightpink;
color: #fff;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="flexItem"><i>1</i></div>
<div class="flexItem"><i>2</i></div>
<div class="flexItem"><i>3</i></div>
<div class="flexItem"><i>4</i></div>
<div class="flexItem"><i>5</i></div>
</div>
</body>
</html>
●justify-content：定义项目在主轴上的对齐方式（主轴的方向由flex-direction决定），属性值如下：
flex-start（默认）：项目随水平主轴自左往右，垂直主轴自上而下排列；
flex-end: 项目随水平主轴自右往左，垂直主轴自下而上排列（注意，如当flex-direction：column-reverse时，自下而上会变成自上而下）；
flex-center: 项目随水平主轴水平居中，随垂直主轴垂直居中；
space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间距大一倍；
space-between： 项目在水平主轴左右两端，垂直主轴上下两端排列，项目之间的间距相等；
注意：当使用 justify-content:space-aroud / justify-content:space-between 时，设一行有三个元素，而最后一行有两个元素就会布局很奇怪，解决方法，flex容器后面添加伪类元素，其width和其他子项目一样，flexDiv;after{content:''; width:同子元素一样}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
.flexContainer {
display: flex;
width: 400px;
height: 70px;
background: lightblue;
margin: 10px;
flex-direction: row-reverse;
} .flexContainer1 {
display: flex;
float: left;
width: 150px;
height: 200px;
background: lightblue;
margin: 10px;
flex-direction: column-reverse;
} .fc1{ justify-content: flex-start; }
.fc2{ justify-content: flex-end; }
.fc3{ justify-content: center; }
.fc4{ justify-content: space-around;}
.fc5{ justify-content: space-between;} .flexItem {
background: lightpink;
border: #888 solid 1px;
}
</style>
</head>
<body>
<p>flew-direction: row(row-reverse也可以，只是顺序倒过来)</p>
<div class="flexContainer fc1">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
</div>
<div class="flexContainer fc2">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
</div>
<div class="flexContainer fc3">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
</div>
<div class="flexContainer fc4">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
</div>
<div class="flexContainer fc5">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
</div>
<p>flew-direction: column-reverse(column)</p>
<div class="flexContainer1 fc1">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
</div>
<div class="flexContainer1 fc2">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
</div>
<div class="flexContainer1 fc3">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
</div>
<div class="flexContainer1 fc4">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
</div>
<div class="flexContainer1 fc5">
<div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
<div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
<div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
</div>
</body>
</html>
●align-items：定义项目在交叉轴上对齐方式（交叉轴方向由flex-direction决定从上到下，还是从左到右）。
flex-start：项目随垂直交叉轴自上而下，水平交叉轴自左往右；
flex-end：项目随垂直交叉轴自下而上，水平交叉轴自右往左；
center：项目在垂直交叉轴居中，水平交叉轴居中；
baseline：项目在垂直交叉轴以第一行文字的基线对齐，水平交叉轴上呢，嗯？？
stretch（默认值）：项目在垂直交叉轴上，如果高度未设置或为auto时，占满整个容器的高度；在水平交叉轴上，如果宽度未设置或为auto，将占满整个容器的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align-item</title>
<style>
.flexContainer {
display: flex;
float: left;
width: 150px;
height: 100px;
margin: 5px;
background: lightblue;
} .fc1 { align-items: flex-start; }
.fc2 { align-items: flex-end; }
.fc3 { align-items: center; }
.fc4 { align-items: baseline; }
.fc5 { align-items: stretch; } .flexItem {
background: lightpink;
border: #A1A1A1 solid 1px;
} /* 这部分测试的是align-items在交叉轴（纵轴）方向的排列 */
/* 如果不设定具体宽高，则项目的宽高是由内容所决定的 */
.ft1 { width: 40px; height: 20px; }
.ft2 { width: 60px; height: 70px; }
.ft3 { width: 30px; height: 40px; }
/* 测试项目在纵轴方向上高度自适应，align-items：stretch时的效果 */
.fcft div { height: auto; } /* 测试align-items在交叉轴（水平）方向排列 (flex-direction: cloumn)*/
.fc {
display: flex;
flex-direction: column;
width: 100px;
height: 150px;
}
.fcft1 div { width: auto; }
</style>
</head>
<body>
<p>align-items在交叉轴（垂直）上排列(flex-direction:row,项目水平排列[一行])</p>
<div class="flexContainer fc1">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<div class="flexContainer fc2">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<div class="flexContainer fc3">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<div class="flexContainer fc4">
<div class="flexItem ft1"><i style="font-size: 23px;">1</i></div>
<div class="flexItem ft2"><i style="font-size: 50px;">2</i></div>
<div class="flexItem ft3"><i style="font-size: 30px;">3</i></div>
</div>
<div class="flexContainer fcft fc5">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<hr style="clear: both; border: #000 solid 1px;">
<p>align-items在水平交叉轴上的排列(flex-direction:column,项目垂直排列[一列])</p>
<div class="flexContainer fc fc1">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<div class="flexContainer fc fc2">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<div class="flexContainer fc fc3">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
<div class="flexContainer fc fc4">
<div class="flexItem ft1" style="text-align: center;"><i style="font-size: 20px;">1</i></div>
<div class="flexItem ft2" style="text-align: right;"><i style="font-size: 50px;">2</i></div>
<div class="flexItem ft3" style="text-align: center;"><i style="font-size: 30px;">3</i></div>
</div>
<div class="flexContainer fc fcft1 fc5">
<div class="flexItem ft1"><i>1</i></div>
<div class="flexItem ft2"><i>2</i></div>
<div class="flexItem ft3"><i>3</i></div>
</div>
</body>
</html>
●align-content：定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：与交叉轴的中点对齐；
space-between：与交叉轴两端对齐，轴线之间间隔平均分布；
space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与 边框的间隔大一倍；
stretch（默认值）：轴线占满整个交叉轴；
3、项目的属性（注意浏览器兼容）
●order：定义项目的排列顺序，数值越小，排列越靠前，默认为0，语法：.item { order: integer }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>项目排列顺序</title>
<style>
.flexContainer {
display: flex;
flex-direction: row;
padding: 2px;
margin: 10px;
background: lightblue;
}
.flexItem {
width: 40px;
height: 20px;
margin: 3px;
background: lightpink;
}
.ft1 { order: -1; }
.ft2 { order: 0; }
.ft3 { order: 1; }
.ft4 { order: 2; }
.fc { flex-direction: column; }
</style>
</head>
<body>
<div class="flexContainer">
<div class="flexItem ft1">-1</div>
<div class="flexItem ft2">0</div>
<div class="flexItem ft3">1</div>
<div class="flexItem ft4">2</div>
</div>
<div class="flexContainer fc">
<div class="flexItem ft1">-1</div>
<div class="flexItem ft2">0</div>
<div class="flexItem ft3">1</div>
<div class="flexItem ft4">2</div>
</div>
</body>
</html>
●flew-grow：定义项目的放大比例，默认为0（即如果存在剩余空间，也不会放大），每个元素的放大数值由自身的flew-grow值除以总的flew-grow数，再乘以剩余的宽度，语法：item { flex-grow: <number>; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>项目放大</title>
<style>
.flexContainer {
display: flex;
height: 70px;
background: lightblue;
} .flexItem {
height: 50px;
margin: 2px;
background: lightpink;
border: #888 solid 1px;
} .ft1 { width: 50px; }
.ft2 { width: 100px; }
.ft3 { width: 150px; } </style>
</head>
<body>
<div class="flexContainer">
<div class="flexItem ft1"></div>
<div class="flexItem ft2"></div>
<div class="flexItem ft3"></div>
</div>
<br />
<div class="flexContainer fc">
<div class="flexItem ft1" style="flex-grow: 1;"></div>
<div class="flexItem ft2" style="flex-grow: 1.5;"></div>
<div class="flexItem ft3" style="flex-grow: 2;"></div>
</div>
</body>
</html>
●flex-shrink：定义项目的缩小比例，默认1，即空间不足将缩小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex-shrink项目缩小比例</title>
<style>
.flexContainer {
display: flex;
background: lightblue;
margin: 5px;
}
.fc{ min-width: 550px;} .flexItem {
height: 50px;
background: lightpink;
} .ft1 { width: 50px; }
.ft2 { width: 100px; }
.ft3 { width: 150px; } </style>
</head>
<body>
<div class="flexContainer">
<div class="flexItem ft1" style="flew-shrink： 1"></div>
<div class="flexItem ft2" style="flew-shrink： 2"></div>
<div class="flexItem ft3" style="flew-shrink： 2.5"></div>
<div class="flexItem ft3" style="flew-shrink： 2.5"></div> </div>
<div class="flexContainer fc">
<div class="flexItem ft1"></div>
<div class="flexItem ft2"></div>
<div class="flexItem ft3"></div>
<div class="flexItem ft3"></div>
</div>
</body>
</html>
该例子不放图了,因为整体没有设margin或border值，项目之间没有间隔，不好区分（其实是我设了margin值后不知道怎么计算更准确，个人水平暂时解决不了）可以通过控制台查看各个元素宽。
具体缩小程度计算方法如下：
比如原来容器的width：450（50+100+150+150），缩小后容器的width：326px，也就是整体缩小了124px，则每个项目的缩小宽度等于本身没有缩小前的宽度减去缩小前宽度除以缩小前容器宽度乘以容器整体缩小的宽度，即50-50/450*(450-326)。这里的计算不用带上flew-shrink值。
●flex-basis：定义在分配多余空间之前项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本身大小。如果该值设跟width或height属性一样的值（比如200px），则项目将占据固定空间——item{flex-basis: <length> | auto;}
●flex：flex-grow、flex-shrink、flex-basis的简写，默认值为：0 1 auto；
●align-self：允许单个项目有于其他项目不一样的对齐方式，可覆盖align-items属性，属性值如下：align-self：auto | flex-start | flex-end | center | baseline | stretch; auto为默认值，表示可继承父元素的align-items属性，如果没有父元素，则等同于stretch（除了auto，其余属性和align-items属性完全一致）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a {
width: 450px;
height: 300px;
display: flex;
flex-direction: row; /* 项目应该是水平、由左往右排列 */
padding: 5px;
background: lightblue; /*justify-content: flex-end;*/
align-items: flex-end;
} .b {
width: 120px;
height: 30px;
background: lightpink;
margin: 3px;
} </style>
</head>
<body>
justify-content: flex-end; flex-direction决定的的是各个子项目的排序方向，在没有其他属性作用下从而决定整体，而justify-content则只决定整体,align-items同理。
<div class="a">
<div class="b" style="align-self: flex-start;">1you are the best</div>
<div class="b">2you are the best</div>
<div class="b">3you are the best</div>
</div>
</body>
</html>
3、display：table-cell
用途：
行内元素中设置垂直居中，行内元素如果放的是文字，并给该元素添加具体的宽高，内容不超出行内元素的宽高，垂直居中效果比较明显。但如果该容器添加的内容比给定的宽高大（比如图片），该容器的宽高也会变大，直到和内容一样。代码如下：
运用在块级元素中，
关于div及display的更多相关文章
- 同级div设置display:inline-block，父级div强制不换行
同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...
- DIV中display和visibility属性差别
DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...
- 关于div设置display: inline-block之后盒子之间间距的处理
当两个盒子都设置display: inline-block之后并且css也清除了默认样式 这时候会发现div盒子之间仍然存在间隙 将font-size清0间距就会取消
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）
首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...
- 多个div使用display:inline-block时候div之间有间隔
开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带 ...
- document.all("div).style.display = "none"与 等于""的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何隐藏DIV对象
DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- Spring 框架的事务管理有哪些优点？
它为不同的事务 API 如 JTA,JDBC,Hibernate,JPA 和 JDO,提供 一个不变的编程模式. 它为编程式事务管理提供了一套简单的 API 而不是一些复杂的事务 API 它支持声明式 ...
- 【动态系统的建模与分析】9_一阶系统的频率响应_低通滤波器_Matlab/Simulink分析
magnitude response:振幅响应 phase response:相位响应 传递函数G(S)为什么将S看成jw化成G(jw)通过[动态系统的建模与分析]8_频率响应_详细数学推导 G(jw ...
- H5进阶篇--实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- Angular2入门系列（五）———— 路由参数设置
Angular2入门系列(五)---- 路由参数设置路由配置: { path: '', component: CarProFile, children: [ { path: 'add', compon ...
- 简单才是美! SpringBoot+JPA
SpringBoot 急速构建项目,真的是用了才知道,搭配JPA作为持久层,一简到底!下面记录项目的搭建,后续会添加NOSQL redis,搜索引擎elasticSearch,等等,什么不过时就加什么 ...
- activity-alias属性的使用
activity-alias是Android里为了重复使用Activity而设计的.1. 含义和作用: 对于activity-alias标签,它有一个属性叫android:targen ...
- 记一次修改框架源码的经历，修改redux使得redux 可以一次处理多个action，并且只发出一次订阅消息
redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...
- 前后端分离mockjs以及webpack-dev-server代理
一: 在webpack中使用mockjs mockjs 也就是模拟数据(mock.js模拟的数据可以不跨域) 安装mock新建mock.js var Mock = require('mockjs') ...
- vue上拉加载下拉加载
npm i vue-scroller <scroller :on-refresh="refresh" :on-infinite="infinite" :n ...
- 手撕spring核心源码，彻底搞懂spring流程
引子 十几年前,刚工作不久的程序员还能过着很轻松的日子.记得那时候公司里有些开发和测试的女孩子,经常有问题解决不了的,不管什么领域的问题找到我,我都能帮她们解决.但是那时候我没有主动学习技术的意识,只 ...