css
songywaa
每天进步一点点
展开
-
display-inline+calc实现左中右布局,中间自适应
.box {clear: both; /* 干掉间隙 */ font-size: 0}.left { display: inline-block; width: 200px; font-size: 16px; background-color: #0000FF;}.right { display: inline-block; ...原创 2019-11-14 23:18:10 · 174 阅读 · 0 评论 -
使用grid实现左中右布局,中间内容自适应
grid很方便实现左中右布局,哪个div需要做自适应,布局时候就应该放到中间.box{ display:grid; grid-template-columns: 200px auto 200px;}.left{ }.right{ }.center{ }<div class="box"> <div class="left"&...原创 2019-11-14 23:00:31 · 959 阅读 · 0 评论 -
使用定位实现左中右布局,中间内容自适应
定位有俩种方式:1、左右使用定位,中间正常;2、左中右都使用定位;第一种方法:(注意div.center的位置).box{ position: relative; } .left{ position:absolute; left: 0; width:200px; } .right{...原创 2019-11-14 22:51:52 · 535 阅读 · 0 评论 -
使用flex实现左中右布局,中间自适应
.box{ display:flex;}.left,.right{ width:200px;}.center{ flex:1;}<div class="box"> <div class="left">我是左边</div> <div class="center">我是中间</div> <...原创 2019-11-14 22:02:43 · 5510 阅读 · 0 评论 -
使用float实现左中右布局,中间内容自适应
使用float实现左中右布局,一定要注意中间div的位置问题/*css*/.left{ float:left; width:200px; } .right{ float: right; width:200px; } .center{ padding: 0 200px;/*使用margin也可以*/ }<div class="bo...原创 2019-11-14 21:26:39 · 1331 阅读 · 0 评论 -
CSS hack
什么是css hack?由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hac...原创 2019-11-12 18:54:03 · 118 阅读 · 0 评论