display属性探索

html代码

    
        
        
        
    
    
        

            行内元素1
            行内元素2
            行内元素3
          行内元素4
          行内元素5
            
            
行内块状元素1
            
行内块状元素2
            
            
块状元素1
            
块状元素2
        
    

css代码

.container{
    width: 600px;
    height: 600px;
    border: 1px solid green;
    color: #000000;

}

span,.myDiv1,.myDiv2,.myDiv3,.myDiv4{
    /* 此时span为inline; */
    width: 200px;
    height:100px;
    border: 1px solid red;
}

浏览器加载如图:

截屏2020-12-30 上午8.53.21.png

1 通过浏览器打开,你会发现,在块级元素container 内,

行内元素的特点:

• 设置宽高无效
• 不自动换行
• 默认排列从左到右。
• 设置margin左右有效，上下无效
• 设置padding上下左右都有效
• 但会撑大空间
• 常见的标签为span b i sub sup做出平方效果
• 行内元素可通过 display: inline-block; 转换为 行内块级元素

块级元素的特点:

• 设置宽高有效
• 对margin、padding上下左右都有效
• 自动换行,一行1个,从上到下排列

2将行内元素转为行内块级元素,

css代码

span{
    display: inline-block;
} 

浏览器加载如图:

截屏2020-12-30 上午10.11.13.png

此时行内元素span 转为 行内块级元素
其特性如下:

• 设置宽高有效
• 不自动换行

3 将行内元素转为块级元素

span{
    display: block;
} 

浏览器加载如图:

块级.png

此时行内元素span也是块级元素起具有块级元素的特点

4以上是行内元素转为 行内块级元素 和 块级元素.

那是否可以将块级元素转为 行内元素或者 行内块级元素 转为 行内元素.

.myDiv1,.myDiv2{
    display:inline;
} 

浏览器加载如图:

块级1.png

5 在以上测试时发现 行内元素 span之间有诡异的3em的间隔,解决办法如下:

• 行内元素拼接起来,不要换行. 这也是行内元素的通常做法.
• 在js里拼接好字符串后再通过innerHtml方法显示出来
• 换行符号的宽度是由所在标签的字体大小有关，以上面的代码为例，span的font-size越大，块1与块2之间的空白就越宽，反之则越小,所以将字体设置为0即可
• 将margin-right: -3em; 这个比较麻烦 当行内元素多时.