前端布局
paranoidMao
天生我才必有用 千金散尽还复来
展开
-
布局神器(二)display:flex
2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。一、Flex布局是什么?Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: -webkit-flex; /*在webkit内...转载 2018-03-06 17:58:11 · 250 阅读 · 0 评论 -
布局神器(一)display:table-cell
display:table-cell页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就display:table-cell做学习总结。display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其...转载 2018-03-06 17:47:50 · 1096 阅读 · 0 评论 -
用 CSS 实现元素垂直居中,有哪些好的方案?
今天我们就细数一下几种方法:1,使用position:absolute,设置left、top、margin-left、margin-top的属性.one{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-top:-100px;margin-left:-100px;background:red...转载 2018-04-08 21:32:06 · 187 阅读 · 0 评论 -
CSS布局--圣杯布局&双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样: 圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padd...原创 2018-07-26 11:12:28 · 198 阅读 · 0 评论