CSS盒模型、行内元素与块级元素

最新推荐文章于 2023-01-18 21:26:41 发布
最新推荐文章于 2023-01-18 21:26:41 发布
阅读量542 收藏
点赞数
分类专栏： 前端学习 文章标签： web前端开发 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyMiss/article/details/78064716
版权 
一、CSS盒模型 
盒模型概述 
盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示：

 
 

  
  

 
 
内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度，如实线、虚线、点画线。在边框外边的是外边距，外边距是透明的，一般使用它控制元素之间的间隔。
什么是标准模式和混杂模式 
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
怎样区分标准模式和混杂模式 
浏览器根据DOCTYPE（文档声明）是否存在以及使用那种DTD来选择要使用的呈现方式。如果XHTML和HTML文档保航形式完整的DOCTYPE，那么它一般以标准模式呈现。相反，如果文档的DOCTYPE不存在或者形式不正确则导致HTML和XHTML以混杂模式呈现。
在网页顶部增加DOCTYPE的声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



这样会使所有浏览器按照W3C标准盒模型去解析页面元素，就满足了跨浏览器的要求了。






两种模式下的盒模型 


standard mode 


  
  


   
   

    
    
   
   


  
  



标准模式下盒子的实际宽度为：



width + padding-left + padding-right + border-left-width + border-right-width


实际高度为：


heigth + padding-top +padding-bottom + border-top-width + border-bottom-width


quirks mode


  
  


   
   

    
    
   
   


  
  



混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。






二、块级元素与行内元素 
我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.　另外

   
   
  1. 块级元素可以设置width,height属性.
  2. 行内元素设置width,height属性无效，它的长度高度主要根据内容决定.
  3. 块级元素即使设置了宽度,仍然是独占一行.
  4. 块级元素可以设置margin和padding属性.
  5. 行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
  6. display: block使元素将以块级方式呈现
  7. display: inline使元素将以行内形式呈现
  8. display: inline-block使一个元素可以设置宽度高度，同时又以行内形式显示
    

     
     
      

      

      

      

      

    
                
    
        
    
        
    
    
    
  

    
    
    
      
    
        
    
            
    
              
                
                  hyMiss
                
              
            
    
            
    
                关注
              
            
    
        
    
        
    
          
      
    
      
    
            
    
                专栏目录
          
    

    

    

    


                
    

    
	
    
		
    
			
    
				
					
    css盒模型和块级、行内元素深入理解
    
				    
			
    
			
    
				
    
					09-25
				
    
			
    
		
    
		
    
			
				
    总的来说，理解和掌握CSS盒模型及块级元素与行内元素的概念，对于创建响应式、灵活的网页布局至关重要。通过熟练运用这些知识，开发者能够精确控制网页元素的外观和交互，从而实现理想的网页设计效果。
    
			    
		
    
	
    

    
                
    
              
                
    

    
	
    
		
    
			
    
				
					
    001-盒模型、行内元素、块元素
    
				    
			
    
			
    
				
    
					WinSolstice的博客
				
    
				
    
					09-14
					
					295
					
				
    
			
    
		
    
		
    
			
				
    1. 盒模型是什么盒模型是CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成， 
那么页面元素也对应的有内容、边框、内外边距等组成。 
这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的属性。2. 盒模型的种类目前有：标准盒子模型和IE盒子模型 2种盒模型标准盒模型: 
IE盒模型： 
    根据上图可以看出他们的不同：标准盒模型：元
    
			    
		
    
	
    

    
                
    

  
              
    
                

    
	
    
		
    
			
    
				
					
    [HTML/CSS]盒子模型，块级元素和行内元素
    
				    
			
    
			
    
				
    
					
				
    
				
    
					10-14
					
					217
					
				
    
			
    
		
    
		
    
			
				
    目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    行内元素有哪些？块级元素有哪些？CSS的盒模型？
    
				    
			
    
			
    
				
    
					LuckXinXin的博客
				
    
				
    
					02-27
					
					1696
					
				
    
			
    
		
    
		
    
			
				
    行内元素：a,b,br,i,span,input,select等等。
块级元素：div，p,h1,h2,h3,h4,form，ul等等。
CSS盒模型：内容，border，margin，padding。



    
			    
		
    
	
    

    
		
    
			
		
    

    
	
    
		
    
			
    
				
					
    CSS中块级元素，行内块元素，行内元素的特点
    
				    
			
    
			
    
				
    
					Din_volcano的博客
				
    
				
    
					10-23
					
					2726
					
				
    
			
    
		
    
		
    
			
				
    网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。HTML 元素一般分为块元素和行内元素两种类型。块级元素和行内元素都是元素显示模式，而本文讲的是这几种模式的区别以及使用规则。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    浅谈CSS块级元素与行内元素(内联元素)的区别和联系
    
				    
			
    
			
    
				
    
					12-13
				
    
			
    
		
    
		
    
			
				
    在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？  其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    css中行内元素和块级元素的区别
    
				    
			
    
			
    
				
    
					12-04
				
    
			
    
		
    
		
    
			
				
    　3、 行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 二、行内元素和块级元素的相互转换 　行内元素转化为块...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    行内元素的盒模型1
    
				    
			
    
			
    
				
    
					08-08
				
    
			
    
		
    
		
    
			
				
    本文将深入探讨行内元素的盒模型，并介绍与之相关的`display`和`visibility`属性。  首先，行内元素，如`<span>`、`<a>`或``，具有特定的<em>盒模型特性。行内元素不支持直接设置宽度（width）和高度（height），这...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    有那些行内元素、有哪些块级元素、盒模型？
    
					
    最新发布
    
				    
			
    
			
    
				
    
					W1254667的博客
				
    
				
    
					01-18
					
					148
					
				
    
			
    
		
    
		
    
			
				
    noframes – frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容）noscript – ）可选脚本内容（对于不支持 script 的浏览器显示此内容）div – 常用块级容易，也是 css layout 的主要标签。span – 常用内联容器，定义文本内区块。big – 大字体br – 换行。font – 字体设定(不推荐)h1 – 大标题h2 – 副标题。select – 项目选择。small – 小字体文本。acronym – 首字。s – 中划线(不推荐)
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    css基础 内联元素 块元素 盒子模型
    
				    
			
    
			
    
				
    
					anihasiyou的专栏
				
    
				
    
					09-22
					
					1256
					
				
    
			
    
		
    
		
    
			
				
    1.内联元素(inline element)
* a – 锚点
* abbr – 缩写
* acronym – 首字
* b – 粗体(不推荐)
* big – 大字体
* br – 换行
* em – 强调
* font – 字体设定(不推荐)
* i – 斜体
* img – 图片
* input – 输入框
* label – 表格标签
* s – 中划线(不推荐)
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    行内元素有哪些?块级元素有哪些?CSS的盒模型?转载
    
				    
			
    
			
    
				
    
					weixin_30768661的博客
				
    
				
    
					10-29
					
					196
					
				
    
			
    
		
    
		
    
			
				
    块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding
css中的display属性(行内元素和块级元素)
我们常用的display属性值有：
inline
block
inline-block
none

把 display 设置成 none 不会...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    Web基础(从零开始)——CSS盒子模型（块元素、行内元素、行内块元素）
    
				    
			
    
			
    
				
    
					qq_57633498的博客
				
    
				
    
					11-12
					
					536
					
				
    
			
    
		
    
		
    
			
				
    1.块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

特点：（1）自己独占一行，就算设置了宽度，也是独占一行

    （2）高度、宽度、外边距、内边距都可以控制

     （3）宽度默认是父元素的100%

     （4）是一个容器及盒子，里面可以放行内或者块级元素

注：（1）文字类的元素不能使用块级元素

    （2）<p>...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    行内元素有哪些?块级元素有哪些?CSS 的盒模型?
    
				    
			
    
			
    
				
    
					weixin_42856661的博客
				
    
				
    
					08-17
					
					2702
					
				
    
			
    
		
    
		
    
			
				
    块级元素：div p h1 h2 h3 h4 form ul 
行内元素: a b br i span input select 
Css盒模型:内容，border ,margin，padding
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    CSS——块级、行内元素&盒模型
    
				    
			
    
			
    
				
    
					cicistream
				
    
				
    
					03-03
					
					1005
					
				
    
			
    
		
    
		
    
			
				
    盒模型是CSS基本模型之一，页面上每个元素都包含在盒模型内，由元素内容、内边距（padding）、边框（border）和外边框（margin）组成
      块级元素常见标签：div p form ul ol li
h1~h6
      行内元素常见标签：span em strong a 
      块级元素可以包含块级和行内元素，反之则不可。
      在排版时，可以用disp
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    CSS中的行盒（line-boxes）和行内盒子（line-box）
    
				    
			
    
			
    
				
    
					星环
				
    
				
    
					09-03
					
					4115
					
				
    
			
    
		
    
		
    
			
				
    CSS中的行盒（line-boxes）和行内盒子（line-box）以及盒模型的关系。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    HTML块级元素，行内元素，盒子，超详细！！！
    
				    
			
    
			
    
				
    
					m0_62951223的博客
				
    
				
    
					09-01
					
					761
					
				
    
			
    
		
    
		
    
			
				
    块级元素 行内元素，盒子
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    CSS行内盒模型及文字样式
    
				    
			
    
			
    
				
    
					Taciturn_Grasp的博客
				
    
				
    
					02-12
					
					331
					
				
    
			
    
		
    
		
    
			
				
    1. 什么是行内盒模型
		行内盒模型（inline box moldel），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则

内容区:由font-size决定大小
文本基线:由字体本身的设计决定
行框:由line-height控制最小行框高度
行间距=(line-height  –  font-size)

2. 行内盒模型的概念分析
2.1行内盒模型内容区
内容区:由font-si...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    CSS基础——块级元素、块级盒子以及BFC
    
				    
			
    
			
    
				
    
					weixin_34327223的博客
				
    
				
    
					02-09
					
					755
					
				
    
			
    
		
    
		
    
			
				
    最近在补CSS的基础，看到盒子觉得理解起来比较混乱和困难，于是在网上查了好多资料，然后自己整理之后写了下来。
这次写一下块级元素、块级盒子以及BFC，如果有错误，欢迎大家指正 ：）

在页面中，每个元素被表示为一个矩形的方框，这就是盒子。
元素在页面中会生成盒子。
盒子是CSS布局中的基本单位，一张页面是由一个或多个盒子组成的。盒子从内到外由内容(Content)、内边距(Padding)、边框(...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    CSS盒模型详解：块级与行内元素差异与应用
    
				    
			
    
			
    
				
    
					
				
    
			
    
		
    
		
    
			
				
    深入理解CSS盒子模型是Web前端开发中的基础概念，它对于控制网页布局至关重要。CSS盒子模型将每个HTML元素视为一个矩形框，由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。本篇...
    
			    
		
    
	
    

    
              
    

    

          
    



        
    

    
    

    


    
    

    

      
    
      
    
        
      
    
      
    

    

    
	
    
		评论	
	
    
	
	

    

    
  
    
    
    
      添加红包
      
    
    
    
    
      
    
        
        
    
          
          
        
    
        
    请填写红包祝福语或标题
    
      
    
      
    
        
        
    
          
          个
        
    
        
    红包个数最小为10个
    
      
    
      
    
        
        
    
          
          元
        
    
        
    红包金额最低5元
    
      
    
      
    
        
        
    
          当前余额3.43元
          前往充值 >
        
    
      
    
      
    
        
    
          需支付：10.00元
        
    
        
        
      
    
    
    
  
    

    

    
  
    
    
    
  
    
  
    
    
    
  
    

    

    


    
  
    
    
    
      
    
        
    
          
    
            
            
    成就一亿技术人!
    
          
    
          
    
        
    
        
    
          
    
          
    
            领取后你会自动成为博主和红包主的粉丝
            规则
          
    
        
    
      
    
      
    
        
    
          
    
            
              
            
            
    
              
    hope_wisdom
     发出的红包
            
    
          
    
        
    
        
    
          
    
          
    
          
    
        
    
      
    
    
    
    
    
  
    

    
      
      
    
      
    实付元
    
      
    使用余额支付
    
      
    
        
    
          
    
            
            点击重新获取
          
    
        
    
        
    扫码支付
    
      
    
      
    
        
          
            
          
          
        
      
    
      
    
        
        钱包余额
          0
          
    
            
            
    
              
    
                
    抵扣说明：
    
                
     1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
     2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
    
              
    
            
    
          
    
      
    
      余额充值