01
2020
05

CSS3盒子尺寸box-sizing不增框宽度

W3C的盒子是反自觉的,也就说我们把一样东西放到一个盒子里,再把盒子放到仓库里,东西占的尺寸是盒子的尺寸,而不是东西的尺寸。border-box 不反自觉。很多现代框架如 bootstrap 就是这么处理的。/*把所有元素的内边距和边框不再会增加它的宽度*/ box-sizing: border-box;  

CSS

<style type="text/css">    
*{    
	margin: 0;    
	padding: 0;    
}    
#hd{    
	width: 70%;    
	height: 300px;    
	background: blue;    
	margin: 10px auto;    
	/*可以接受最小宽度*/    
	min-width: 600px;    
	/*可以接受最大宽度*/    
	max-width: 900px;    
}    
#hrty{    
	width: 600px;    
	height: 300px;    
	margin: 10px auto;    
	padding: 10px 10px;    
	border: 3px solid blue;    
	/*把所有元素的内边距和边框不再会增加它的宽度*/    
	box-sizing: border-box;    
}    
.hty{    
	width: 20%;    
	height: 100px;    
	margin-top: 120px;    
	border: 3px solid purple;    
	float: left;    
	/*把所有元素的内边距和边框不再会增加它的宽度  这样5个20%就能并在一行,不用计数其它多余的东西*/    
	box-sizing: border-box;    
}    
</style>

HTML

<body>    
<div id="hd"></div>    
<div id="hrty">    
当然,如果你问我,闰土啊,你在太原这座城市生活了这么久,究竟在太原做前端开发是种怎么样的体验,惊不惊喜,意不意外,刺不刺激?    
我告诉你,在太原当码农,老刺激了,噗嗤~。这或许是一个沉重的话题,每每聊到这时,我便陷入了深思。说实话,从杭州回到老家太原,如果我跟你说心理上没有落差,那是骗人的。太原大部分能和互联网沾点边的公司, 整体的技术栈还是相对来说比较陈旧的,当然这个是由项目性质决定的,面向互联网的项目比较少,优秀的产品基本没有,技术氛围不算浓厚,公司内部的技术交流会是少之又少。    
比如和我同在太原的童鞋小Z,最近就跟我诉苦,说他们公司以前的项目都是jsp,jq写的。他面试的时候和经理聊过,这家公司从去年就开始用vue1.x.x系列开发项目了。但是小Z进组以后发现他们对前端自动化没有什么了解,只是知道 npm run build 能打包项目,但是不知道为什么。知其然不知其所以然,说的就是这个。基本上只是用vue代替了以前jq的dom操作,并没有优化工作流程。还有最近在对接口的时候接触到了前任封装的ajax方法,是用jq的ajax搭配promise。原本几十行代码,他换成axios以后只有不到十行,在项目中经常能见到这种新旧混杂的地方。    
对于小Z的吐槽,我已经司空见惯了。最后他跟我说了句,用vue的页面仔还是页面仔,哈哈~    
吐槽完了劣势,我们再来说说优势。相比于一线城市,在太原撸代码的优势,则是体现在了生活层面。比如说不用租房,不用天天吃外卖,同事都是山西人,很容易交流。在一个生活了十几年的城市,无时无刻都能感觉到放松和亲切。    
还有一个优势,相对于一线城市来说,工作没有太大的压力,有什么比较困难的需求都会让找个成品或者用个第三方,没有那种让造轮子的领导。我在杭州的时候为了压缩首屏加载时间,连UI框架都没用,全是手写,不过那段日子也是我成长最快的时候。    
总之,离家近,便利又心安。    
</div>    
<div class="hty"></div>    
<div class="hty"></div>    
<div class="hty"></div>    
<div class="hty"></div>    
<div class="hty"></div>    
</body>

上面代码效果图片

原文链接:https://www.qiquanji.com/post/7732.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。