摘要：中，中的标签元素大体被分为三种不同的类型块状元素内联元素又叫行内元素和内联块状元素。注意只有内联内联块与内联内联块之间的空白符才会形成一个空格，文本元素除空白符也是属于内联元素。

CSS中，html中的标签元素大体被分为三种不同的类型：块状元素（display：block）、内联元素(又叫行内元素display：inline)和内联块状元素（display:inline-block）。可以通过代码来相互转换。
一.常用的块状元素有：

、
、
-
、
、
、
、、
、
 、


块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。默认高度等于子元素高度。父子均是块级元素时，子块的高度可能冲破父级的限制
二.常用的内联元素有：
、、
、、、、、、、、

内联元素特点：
1.和其他内联元素都在一行上；
2.可以通过margin、padding来改变左右的距离，但不可以改变上下的距离，导致width、height、line-height失效或。可以使用border。
3.内联元素之间有空白区域，空白区域的形成是因为之间有回车，在html中，空格、制表符、回车都属于空白符，多个空白符都会视为一个空格，空格的大小由父级
的font-size决定。注意：只有内联(内联块)与内联(内联块)之间的空白符才会形成一个空格，文本元素(除空白符)也是属于内联元素。常用解决方法，给
设置font-size: 0;，在上把font-size设置回去

三.常用的内联块状元素有：
、

inline-block 元素特点：
1.和其他元素都在一行上；
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.它也会有元素间出现空白区域的问题
四、参考的文章：
https://www.jianshu.com/p/1cf...
https://segmentfault.com/a/11...
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         混合云
                                             
                         专线服务
                                                                                                                                                 
                                      
                     
                    
                                                                                               圆形块状元素html
                                                                                                           任意元素和
                                                                                                           通过js和元素赋值
                                                                                                           块状
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/117269.html
               
                      
               

                 
                                  
上一篇：利用clear清除浮动的一些问题
  
                                                
                                       
下一篇：less学习之Bootstrap（按钮篇）
                                  
              
              

                
相关文章
                

                             
                                                                                                    

                                                

                          
前端学习笔记之Html标签元素类别
                                                     
摘要：中的标签元素可以分为三种不同的类型块状元素内联元素和内联块状元素。常用的块状元素有等内联元素与块状元素相对应，具有如下特点和其他内联元素都在一行上元素的高度宽度行高及顶部和底部边距不可设置元素不能设置高度，宽度就是它包含的文字或图片的宽度。

HTML 中的标签元素可以分为三种不同的类型：块状元素、内联元素和内联块状元素。
块状元素的特点有：
1、独占一行。每个块级元素都从新的一行开始，...
                                                   
                          

                                

                                    ghnor
                                    2019-08-01 16:48
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
CSS盒模型
                                                     
摘要：常用块状元素常用内联元素常用内联块状元素盒模型填充设置元素与边框之间的距离，叫做填充。用设置，也分为四部分，即上右下左，它们是顺时针。1、什么是CSS盒模型？CSS盒子模型包括元素、内边距、边框、外边距，如下图：
　　　　
2、元素分类：元素可以分为块状元素、内联元素、内联块状元素。
　　　　常用块状元素：、、...、、、、、、 、
　　　　常用内联元素：、、、、、、、、、、
　　　　常用内...
                                                   
                          

                                

                                    Pandaaa
                                    2019-04-23 13:07
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
html的嵌套规则
                                                     
html元素分为块状元素和内联元素，块状元素作为其他元素的容器。块状元素可以嵌套其他块状元素块状元素可以嵌套内联元素内联元素不能嵌套块状元素p内不能嵌套块状元素有几个特殊块状元素只能包含内联元素，而不能包含块状元素，这几个元素是:h1、h2、h3、h4、h5、h6、p、dt块状元素和块状元素并列，内联元素和内联元素并列li里面可以嵌套div下拉列表框option中只能嵌套文本ol和li之间、ul和...
                                                   
                          

                                

                                    tinyq
                                    2019-08-01 16:39
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
HTML+CSS基础课程-imooc-【更新完毕】
                                                     
摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。

6-1 认识CSS样式
CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...
                                                   
                          

                                

                                    Heier
                                    2019-08-01 15:04
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
CSS阶段总结
                                                     
摘要：布局之左右布局与左中右布局方法为子元素设置浮动，然后在其父元素上使用类来清除浮动。

CSS布局之左右布局与左中右布局
方法：为子元素设置浮动，然后在其父元素上使用clearfix类来清除浮动。代码示例：
html部分：

  a
  b
  c


CSS部分：
.child{
  float: left;
}
.clearfix::after {
    display: block...
                                                   
                          

                                

                                    daryl
                                    2019-08-30 15:54
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论
   
                
 
                      

              
           
           

              
 
                

                    
                    
CoyPan
                    
男|高级讲师
                    

                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          阅读更多
                    
                      

                                                  
我从外包公司离职了,一个配合混乱的团队如何毁了一个项目?
                            
阅读 3453·2021-11-17 09:33
                                                       
不求钱财只为源码，软件自由保护协会起诉知名电视品牌 GPL 违规
                            
阅读 1803·2021-10-26 09:51
                                                       
Hostodo：斯波坎VPS六六折,美国西海岸机房,年付12美元起
                            
阅读 1367·2021-09-29 09:44
                                                       
块状元素、内联元素和内联块状元素
                            
阅读 1456·2019-08-30 15:55
                                                       
百度前端任务(3)(4)(5)——巧谈前端基础html,css布局
                            
阅读 1323·2019-08-30 15:52
                                                       
浏览器解析渲染HTML文档的过程
                            
阅读 2203·2019-08-30 15:43
                                                       
css 布局：两边固定中间自适应
                            
阅读 3337·2019-08-29 17:00
                                                       
浏览器怪异模型和标准模型的区别
                            
阅读 2196·2019-08-29 16:23
                                                
                      
                
                
                 

                  
云社区相关服务
 
                    

                        
                            
                            提问
                        
                        
                            
                            学习
                        
                        
                        
                            
                            认证
                        
                      
                        
                            
                            产品
                        
                        
                        
                            
                            技术服务
                        
                          
                            
                            售前咨询
                        
                    
   
                
                   
              
  

                  
最新活动
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
阅读需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    









<