【HTML&&CSS】页面版块布局(亲身实践,帮你避坑)

音乐分享(点击链接可以听哦)

带我去很远地方 - 黄霄雲

⭐⭐⭐️‍️‍️‍ 

 

目录

⭐案例1 

​原因:

⭐案例2

法一:

法二:


 

 

案例1 

平时学的时候没有在意这一点,感觉很简单,但是真正实践的时候就傻眼了

 先来一个题目

盒子尺寸300*300,背景天蓝色,边框10px实线黄绿色,上下左右20px的内边距,水平居中

错误代码

错误代码

错误代码

 




  
  
  
  Document
  


  

 结果【HTML&&CSS】页面版块布局(亲身实践,帮你避坑)_第1张图片

右击检查,发现盒子大小已经超出300px了

【HTML&&CSS】页面版块布局(亲身实践,帮你避坑)_第2张图片 原因:

⭐border会撑大盒子

⭐padding会撑大盒子

解决方法 

那么为了实现需求,可以改变盒子的实际宽度 

(实际大小=左border+左padding+内容宽度+右padding+右border) 

那么变成width: 240px即可 

案例2

 下面我将用两种方法来实现下图的布局 

【HTML&&CSS】页面版块布局(亲身实践,帮你避坑)_第3张图片

法一:

使用浮动




  
  
  
  Document
  


  
header
leftside
rightside

法二:

使用位置定位

父相子绝(父亲属性是:relative,儿子属性是:absolate) 




  
  
  
  Document
  


  
header
leftside
rightside

Code over!

 

你可能感兴趣的:(前端易错合集,css,html,前端)