关于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中 ...
随机推荐
- java中的异常体系？throw和throws的区别？
一.java中的异常体系 Thorwable类(表示可抛出)是所有异常和错误的超类,两个直接子类为Error和Exception,分别表示错误和异常.其中异常类Exception又分为运行时异常(Ru ...
- 8_根轨迹_Part2_根轨迹手绘技巧
传递函数分母部分相同
- 开发一个自己的 CSS 框架（四）
这一节,我们来讲规矩,谈网格,做人可以不要脸,不讲规矩,不讲道理(特指傲娇兽),但底线还是要有的,如同网格一样,不能超出. jeet 这里我们别人封装好的模块,不过呢,我们也会详细介绍一下原理.首先我 ...
- JAVA环境搭建之MyEclipse10+jdk1.8+tomcat8环境搭建详解
一.安装JDK 1.下载得到jdk-8u11-windows-i586.1406279697.exe,直接双击运行安装,一直next就可以,默认是安装到系统盘下面Program Files, 我这里装 ...
- 面试官：Zookeeper集群怎么搭建？
哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java拧螺丝选手,不必 ...
- 在oracle控制台当你输入错误的时候，还不能删除，回退的解决方法
对于回退出现^H解决方法 oracle@prd:/home/oracle$sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on ...
- route -n 讲解
我们经常会出现临时添加路由,或者是路由重启路由丢失等导致网络不通的情况,上网查发现很多介绍或者没有实验跟进导致理解的时候很费劲的情况,可能人家认为是比较简单的事情了,但是很多不尽然,老手也不一定能很快 ...
- 帝国cms 7.5版列表页分页样式修改笔记
最近在用帝国改版我的个人博客站点,这个也是我第一次尝试用帝国来做博客,之前用过wordpress,每用一个新的程序,都会有些新的收获,也会学到一些新的东西. 在改用帝国之前,我也在网上大概了解了一下, ...
- eBPF+Ftrace 合璧剑指：no space left on device？
本文地址:https://www.ebpf.top/post/no_space_left_on_devices 最近在生产环境中遇到了几次创建容器报错 "no space left on d ...
- ElasticSearch 设置某个字段不分词
先说结论:字段类型更改为 'keyword' elasticSearch官方文档中创建index代码如下 PUT /my_store { "mappings" : { " ...