微信手机网站,房地产网站建设联系方式,中国服务外包公司排名,职工素质建设 网站最近正在复习#xff0c;紧张地准备几天后的笔试#xff0c;然后刚好看到这个地方。 block#xff1a;块级元素#xff0c;会换行#xff0c;如div,p,h1~h6,table这些#xff0c;可以设置宽高#xff1b; inline:行内元素#xff0c;不换行#xff0c;挤在一行显示紧张地准备几天后的笔试然后刚好看到这个地方。 block块级元素会换行如div,p,h1~h6,table这些可以设置宽高 inline:行内元素不换行挤在一行显示如span,a,i,em,strong,mark,input,button之类,不能设置宽高。 inline-block:行内块级元素本质还是块级元素可以设置宽高只不过多了一个挤在一行显示的特性但是这种特性会有一个问题就是会有一个默认间距。 下面贴个代码 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title测试界面/title6 style typetext/css7 *{8 padding: 0;9 margin: 0;
10 }
11
12 .div{
13 display:inline-block;
14 width: 100px;
15 height: 100px;
16 background-color: aqua;
17 text-align: center;
18 line-height: 100px;
19 font-size: 25px;
20 border:1px solid #000;
21 }
22
23 /style
24 /head
25 body
26 div classdiv111/div
27 div classdiv222/div
28 div classdiv333/div
29
30 /body
31 /html 可以看到是有默认间隙的而要去除这种间隙的方法我目前知道两种一种是在其父级容器中将font-size设置为0另外一种则是将自身设置为浮动选用任意一种方法后默认间距都消失不见了。 另外还有一个很容易被忽略的问题就是对于行内元素来说无论是padding还是margin都是只有左右的真实有效而上下的是无效的。把上面代码改一下换成一堆span元素并设置每个元素的margin为30px;去掉line-height代码如下 1 .span{
2 margin: 30px;
3 width: 100px;
4 height: 100px;
5 background-color: aqua;
6 text-align: center;
7 font-size: 25px;
8 border:1px solid #000;
9 } 可以看到最后的效果是这样的
