calc()实现CSS响应式布局

最新推荐文章于 2022-09-15 15:59:53 发布
最新推荐文章于 2022-09-15 15:59:53 发布
阅读量533 收藏 1
点赞数
分类专栏： css3 文章标签： css 响应式 布局 calc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangluo1683/article/details/77099252
版权

calc()是CSS3新增的一个功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值，仅在css中就可以实现响应式布局，不用再担心元素把盒子撑破，页面也响应浏览器窗口变化，想想就感觉美好。

注意事项
  • 方法的表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(100%-20px)”这种没有空格的写法是错误的；
  • 方法的表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
实例
  • 容器盒子为100%显示，容器中渲染一个长300，宽200的图片。
  • 图片相对于容器居中显示

html 部分：

<div id="contenter">
   <img src="./myPng.png" class="dispalyImg">
</div>

css部分:


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  yangluo1683
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
响应式布局，height占满剩余空间，不要有滚动条

				
			

			

				

					for what
				

				

					04-19
					
					2547
					
				

			

		

		

			
				
目录

由一道题引发的思考

问题一：为什么在 #div1 上直接 height:100%，不生效？

问题二：为什么设置了 height : 100%，会有纵向滚动条的出现？

由一道题引发的思考

面试中遇到的，查了后发现是挺麻烦的。今天重新做了下，整理一下遗漏的知识点：

基本样式


<div>
    <p>1.两个div平分灰色的空间</p>
   ...

			
		

	



                

              
                



	

		

			

				
					
margin 偏移用 calc()方法出现的问题

				
			

			

				

					weixin_42116924的博客
				

				

					05-19
					
					3882
					
				

			

		

		

			
				
.div0 {
width: 200px;
height: 160px;
border: 1px solid #000;
}
.redbox {
width: 30px;
height: 30px;
background: #c00;
margin-top: calc(50% - 15px);
margin-left: calc(50% - 15px);
}

        


问题来了，为什...

			
		

	



                


  
              

                


	

		

			

				
					
css3的calc计算宽高函数用法

				
			

			

				

					weixin_45610510的博客
				

				

					09-28
					
					1335
					
				

			

		

		

			
				
简介：
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
calc()能给元素的做计算，可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说：width:calc(50% + 2em)
calc()的语法：
.elm...

			
		

	





	

		

			

				
					
css计算高度calc_css 高度计算你真的会了?!(关于margin)

				
			

			

				

					weixin_39562089的博客
				

				

					11-29
					
					618
					
				

			

		

		

			
				
今天看博客,看到一个小伙伴面试字节时的一个问题.问题:父元素container的高度为多少?(代码如下)<刚看到这道题的时候我直接入坑了,算出的结果为container 的上边框 1+第一个 inner 的 margin-top10+第一个inner 的高度 10+两个 inner 间 margin 重叠的 10+第二个 inner 的高10+第二个 inner 的 margin-botto...

			
		

	



		

			
		



	

		

			

				
					
css3的calc()属性

				
			

			

				

					zeroyulong的博客
				

				

					04-19
					
					261
					
				

			

		

		

			
				
语法：calc() = calc(四则运算)说明：用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width：calc(100% - 10px);任何长度值都可以使用calc()函数进行计算；calc()函数支持+ - * / 运算calc()函数使用标准的数学运算优先级规则示例：&lt;!DOCTYPE html&gt;
&lt;html&gt;

	&lt;head&gt...

			
		

	





	

		

			

				
					
CSS3 calc()会计算属性详解

				
			

			

				

					09-27
				

			

		

		

			
				
以下是一个简单的响应式布局示例，使用`calc()`调整元素的宽度和外边距：  ```html   <div class="item">Item 1  <div class="item">Item 2  <div class="item">Item 3     .container {  width: 100%;  display: ...

			
		

	





	

		

			

				
					
CSS三列布局的多种表现形式

				
			

			

				

					09-27
				

			

		

		

			
				
在网页设计中，CSS布局是至关重要的一个环节，特别是三列布局，它广泛应用于...随着CSS规范的不断进化，我们有更多的工具和技巧来实现灵活且响应式的布局。学习和掌握这些布局方式，有助于提升网页设计的效率和质量。

			
		

	





	

		

			

				
					
js响应式蜂巢样式

				
			

			

				

					09-20
				

			

		

		

			
				
2. **Flexbox或Grid布局**：Flexbox和Grid是CSS的两种布局模式，都非常适合构建响应式布局。Flexbox擅长处理一维布局，而Grid则适用于二维布局，如蜂巢样式。它们可以动态调整元素大小和位置，以适应屏幕变化。  3. ...

			
		

	





	

		

			

				
					
初探CSS3中的calc()功能

				
			

			

				

					09-25
				

			

		

		

			
				
这在创建响应式布局或处理复杂尺寸计算时非常有用。  ### 什么是calc()？  `calc()`是“calculate”的缩写，是一个用于计算长度、频率、角度、时间、百分比、数值的CSS函数。通过`calc()`，我们可以使用加法(`+`)、...

			
		

	





	

		

			

				
					
html 左中右自适应布局(使用calc css表达式)

				
			

			

				

					09-22
				

			

		

		

			
				
HTML布局设计中，实现左中右自适应布局是一项常见的需求，它允许页面元素根据窗口大小动态调整其宽度，保持整体布局的...这种布局方式在响应式设计中非常有用，能够使网页在不同设备和屏幕尺寸上保持良好的视觉效果。

			
		

	





	

		

			

				
					
css中会计算的属性,css3中样式计算属性calc()的使用和总结

				
			

			

				

					weixin_39964833的博客
				

				

					08-04
					
					2110
					
				

			

		

		

			
				
calc的介绍在css3样式中有一个类似与函数的计算属性calc()，它主要用于指定元素的长度，无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px，calc是支持单位的混合使用的，其计算优先级别和数学一致。calc的用法.elm{width:calc(expression);}...

			
		

	





	

		

			

				
					
css 中动态获取宽度,css中的calc动态计算长度值

				
			

			

				

					weixin_36085931的博客
				

				

					08-03
					
					1万+
					
				

			

		

		

			
				
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...

			
		

	





	

		

			

				
					
html margincalc居中,CSS设置居中的方案总结-超全

				
			

			

				

					weixin_29014237的博客
				

				

					06-24
					
					422
					
				

			

		

		

			
				
块级元素居中 html代码部分child行内元素居中 html代码部分childweb前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯水平居中01 行内元素 text-align: center;.parent {text-align: center;}02 块级元素 margin: auto;(低版本浏览器还需要设置 text-align: ...

			
		

	





	

		

			

				
					
css 的 calc() 方法

				
			

			

				

					飞猪
				

				

					10-26
					
					4681
					
				

			

		

		

			
				
css 的 calc() 方法
calc()语法:
.elm {
width: calc(expression);
}
expression是表达式
使用“+”、“-”、“*” 和 “/”四则运算；也可以混合使用各种单位进行计算，
+”和“-”计算的时候要加空格  举个例子：   "widht: calc(12%+5em)"这种没有空格的写法是错误的；“ * ”和 “ / ”可以没有空格。
举个例子，更直观
<!DOCTYPE html>
<html lang="en">
<h

			
		

	





	

		

			

				
					
巧用CSS3的calc()宽度计算做响应模式布局

				
			

			

				

					weixin_34246551的博客
				

				

					11-19
					
					408
					
				

			

		

		

			
				
今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码，

于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是
css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-...

			
		

	





	

		

			

				
					
css3 calc()方法详解

				
			

			

				

					qq_38233172的博客
				

				

					06-06
					
					7062
					
				

			

		

		

			
				
今天又请教了到了一个之前自己没有用到过得知识~~calc()  希望每一个在学前端的路上都能遇到一个带着跑起来的大神（不求飞，只求踏踏实实一点一滴积累）渴求学习新知识的人，就寻求一个能够指导交流，共同进步的同伴吧！

我们在涉及移动端布局的时候上篇讲到box-sizing的用法。但它可能会影响到其他布局。

此处的calc相比来讲，要简单的多。你可以使用calc()给元素的border、mar...

			
		

	





	

		

			

				
					
CSS3: calc计算属性

					
热门推荐

				
			

			

				

					CRPER
				

				

					04-30
					
					2万+
					
				

			

		

		

			
				
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；标准的写法：  .class{
       /*
         area: expression;
       */
       width:calc();
       padding:calc();
       margin-top:calc();
       ...
   }兼容性基本理论
cal

			
		

	





	

		

			

				
					
【CSS3】css中的数学运算-calc()

				
			

			

				

					王春燕的博客
				

				

					09-15
					
					2421
					
				

			

		

		

			
				
一、什么是calc()?
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。

比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

			
		

	





	

		

			

				
					
css3函数calc()

				
			

			

				

					weixin_33922672的博客
				

				

					11-02
					
					147
					
				

			

		

		

			
				
为什么80%的码农都做不了架构师？>>> 
                                        
                ...

			
		

	





	

		

			

				
					
vue响应式布局怎么实现

					
最新发布

				
			

			

				

					03-14
				

			

		

		

			
				
Vue响应式布局可以通过使用CSS中的媒体查询来实现。在Vue组件中，可以使用计算属性来动态计算CSS类名，根据不同的屏幕尺寸来应用不同的样式。例如：

```
<template>
  <div :class="containerClass">
    <div :class="itemClass">Item 1</div>
    <div :class="itemClass">Item 2</div>
    <div :class="itemClass">Item 3</div>
  </div>
</template>

<script>
export default {
  computed: {
    containerClass() {
      return {
        'container': true,
        'container--small': this.$vuetify.breakpoint.smAndDown,
        'container--medium': this.$vuetify.breakpoint.mdAndUp,
        'container--large': this.$vuetify.breakpoint.lgAndUp,
      }
    },
    itemClass() {
      return {
        'item': true,
        'item--small': this.$vuetify.breakpoint.smAndDown,
        'item--medium': this.$vuetify.breakpoint.mdAndUp,
        'item--large': this.$vuetify.breakpoint.lgAndUp,
      }
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 1 0 200px;
  margin: 10px;
}

@media (max-width: 599px) {
  .container--small {
    max-width: 400px;
  }
  .item--small {
    flex-basis: 100%;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .container--medium {
    max-width: 800px;
  }
  .item--medium {
    flex-basis: calc(50% - 20px);
  }
}

@media (min-width: 960px) {
  .container--large {
    max-width: 1200px;
  }
  .item--large {
    flex-basis: calc(33.33% - 20px);
  }
}
</style>
```

在上面的示例中，我们使用了Vuetify的断点对象来判断当前屏幕尺寸，然后根据不同的屏幕尺寸应用不同的CSS类名。在CSS中，我们使用媒体查询来定义不同的样式，例如在小屏幕上，容器的最大宽度为400px，每个项目占据整个行；在中等屏幕上，容器的最大宽度为800px，每个项目占据一半的宽度；在大屏幕上，容器的最大宽度为1200px，每个项目占据三分之一的宽度。这样就可以实现响应式布局了。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值