RelativeLayout用到的一些重要的属性：第一类:属性值为true或falseandroid:layout_centerHrizontal水平居中android:layout_centerVertical垂直居中android:layout_centerInparent相对于父元素完全居中android:lay...

看到微博和朋友圈都实现了图片九宫格，曾经有次面试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽高，然后进行浮动。今天想折腾一下，实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格，算上inline-block的话就是五种了。首先要注意的是九宫格容器是宽高相等的正方形，并且是自适应的，这里关键是实现宽...

IPhoneX全面屏是十分科技化的，但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配，没有X的同学可以开启 Xcode9 的iPhoneX模拟器作为学习和调试。设计和尺寸相关IPone型号屏幕尺寸屏幕密度开发尺寸像素密度倍图4系列3.5英寸326ppi320*480p...

flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持flex 的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5...

CSS浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用Flexbox和CSSGrid来对齐元素，变得相对容易起来。使用Flexbox可以使元素对齐变得容易，因此Flexbox已经被广泛使用了。同时，CSSGrid布局也为网页设计行业带来了很大的...

本篇适用于初次使用rem为单位切图而无从下手的童鞋。核心是根据屏幕动态改变根元素字体大小，以达到适配各种屏幕。这只是一个拿来就用的教程。很多东西没有详细说明。不过对于快速做手机端切图很有帮助。模板：Github使用：1.下载完成后首先修改js文件中的基本单位：psd宽度是640就写640，是750就写750.现在的设计...

 一切都始于这样一个问题：怎样通过CSS简单而优雅的实现水平、垂直同时居中。记得刚开始学习CSS的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到Word文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现CSS中并不存在float:center 的写...

怎样布局正六边形？-->如果不能直接布局，就只能采用图形的组合。-->既然是正六边形，则：-->AB=2分之根号3乘2倍的边长，也就是对于矩形ABCD来说，AB是BD的根号3倍（也可以用正切算tan30deg）。这样的矩形旋转两次60deg，轨迹就恰好是一个正六边形。-->事实上我们常常是要让它...

关于css中的单位大家都知道在css中的单位，一般都包括有px,%,em等单位，另外css3新增加一个单位rem。其中px，%等单位平时在传统布局当中使用的比较频繁，大家也比较熟悉，不过px单位在进行自适应布局的过程当中则会有些力不从心，大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局。不过还有另...

 一旦一个容器赋予了display:flex属性，将会有以下特点：项目无法设置浮动。列表的样式会被清除。无法使用vertical-align设置垂直对齐方式。目前互联网上关于flex流动布局的文章很少，搜索关于flex的文章，大部分还介绍的是旧的知识点，显然已经不符合当前的w3c标准了，要想了解flex的相关...

 边界布局管理器把容器的的布局分为五个位置：CENTER、EAST、WEST、NORTH、SOUTH。依次相应为：上北（NORTH）、下南（SOUTH）、左西（WEST）、右东（EAST），中（CENTER），例如以下图所看到的。特征：l 能够把组件放在这五个位置的随意一个，假设未指定位置，则缺省的...

　　检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的bootstrap栅格布局。　　圣杯布局　　圣杯布局是一种三列布局，两边定宽，中间自适应：1*{2box-sizing:border-box;3}4html,body{5width:100%;6height:100%;7...

http://www.bootcss.com/p/layoutit/实用的快速布局网站FlatUI一个基于bootstrap的主题，界面非常之漂亮http://www.bootcss.com/p/flat-ui/jQueryUIhttp://www.jqueryui.org.cn/ EASYUIhttp://...

(1). 行内元素的水平居中？如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素<divclass="parent"><divclass="child"&g...

移动端布局1import'js/rem.js'; 引入rem.js文件后，css中就可以直接写rem单位了，改变移动端设备时，宽高会等比例更新。 flexbox布局（弹性盒布局）1*{2margin:0;3padding:0;4}5html,body{6height:100%;7}8li{9list...