随笔分类 - 布局
1
摘要：参考weui的Panel结构 核心：定位，补充：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。 预览： https://besswang.github.io/Panel/index.html 拓展： 还有一种居中的方案，不过是针对文字的居中。是文字内容，不是所有的标签
阅读全文
摘要：需要固定宽高的垂直居中： 一，定位 1.1 之absolute 写法一：position:absolute; 写法二：margin:auto这个必须要有 1.2定位之fixed; 写法同上。 二，display:table-cell 属性使内容垂直居中 三，行内元素的垂直居中line-height.
阅读全文
摘要：关键:vh; flex; 首先,必然定义的container是父级盒子; display:flex; flex-direction:column; /*垂直显示*/ justify-content:center; /*盒子在主轴的中心,要理解,{flex-direction:column;}的时候主
阅读全文
摘要：1，Syntax: 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式； 当设置为box-sizing:border-box时，将采用怪异模式解析计算； 2，兼容： 3,什么时候用？ 1，设置内边距 1 <!DOCTYPE html> 2 <html lan
阅读全文
摘要：IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下： 上面的 hack 同样对 IE9 和 IE10 起作用，那么如何单单只针对ie8来渲染呢： 解决思路： 1，首先用IE8hack；其次用CSS3 之类的 IE8 不支持的选择器来重新覆盖一遍，符合条件的常用选择器有 :roo
阅读全文
摘要：用法一： 方头括号【】因为中文标点符号占半个字的位置，所以在布局的时候，如果开头有中文符号，需要给text-index：-0.5em缩进，使得与折行的文字对齐。 用法二： 首行缩进两个字符：text-indent:2em; 用法三： 隐藏字符:text-indent:-999em; 总结：用法多种多
阅读全文
摘要：一，基于绝对定位的垂直居中 方法一：position+calc(固定宽高) 1,position：absolute； 2,css3:calc计算属性 calc实现： 内容部分必须固定宽和高。 calc可以做用于任何具有大小的东东，比如border、margin、pading、font-size和wi
阅读全文
摘要：GitHub: https://github.com/StefanKovac/flex-layout-attribute 引入基本的样式，可以更好的布局，可以在线制作： http://progressivered.com/fla/?a=00000&d=0&h=2&i=00000&s=0&v=2
阅读全文
摘要：容器属性: 左右对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around; 上下对齐方式：align-items:flex-start/flex-end/center/baseline/stretch 其中，
阅读全文
摘要：稳定、快速、免费的开源项目 CDN 服务 BootCDN： jQuery3 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> bootstrap-css <link
阅读全文
摘要：三、js解决方案： 一、js的解决方案： clamp.js 引用： 注意：用这个方法，一定要给文字加行高。 四、jq的dotdotdot.js http://dotdotdot.frebsite.nl
阅读全文
摘要：解决办法，给display：inline-block的父元素上加font-size:0; 未添加font-size：0：如下图： 添加font-size：0后，如下图：
阅读全文
摘要：一，内联元素的垂直居中之图片 查了多方资料，最终觉得淘宝工程师的做法更能满足我的需求，于是把它记录在此： 铺垫：vertical-align 这个属性的特点，它是相对兄弟级(line-height)来定位的，并且它仅对行内元素有效； display:table-cell属性指让标签元素以表格单元格的
阅读全文
摘要：帮助理解： 最外层： 其中包括header，body，footer; .box .header{height:40px;}
阅读全文
摘要：order flex-grow flex-shrink flex-basis flex align-self 1.1 order css order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行
阅读全文
摘要：一个高度为100px， 另外一个高度自动补全当前界面下剩余的高度：
阅读全文
摘要：一，概念 flexible box ,意为“弹性布局”，用来为盒状模型提供最大的灵活性。 块级布局更侧重于垂直方向，行内布局更侧重于水平方向，于此相对的，弹性盒子布局算法是方向无关的。 块级flex布局： 行内元素flex布局： webkit内核的浏览器，必须加上-webkit前缀： 注意：设为fl
阅读全文
1
