随笔分类 -  Html5+CSS3

摘要：1、bootstrap3使用px为单位，bootstrap4使用rem和em为单位；bootstrap3用float布局，bootstrap4用flex布局。 参考 2、布局：.container ：固定宽度； .container-fluid：100% 宽度；.row ：一行 3、jquery滚动 阅读全文

摘要：首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 23 阅读全文

摘要：获取元素、浏览器、页面显示区域（可视区域）的高度： $('.class').height(); $(window).height(); $(document).height(); 获取元素、浏览器、页面 的滚动条到顶部的垂直高度： $('.class').scrollTop(); $(window) 阅读全文

摘要：如果只做pc端，那么静态布局（定宽度）是最好的选择； 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定； 如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式 阅读全文

摘要：说明： display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。 不考虑IE浏览器的 阅读全文

摘要：首先，分析一下名字的由来： - W3C制定标准 2009年第1次草案：[display:box;]- W3C制定标准 2011年第2次草案：[display:flexbox | inline-flexbox;]- W3C制定标准 2012年第5次草案及以后的候选推荐标准：[display:flex 阅读全文

摘要：商城的产品详情页面出现了，图片之间有一条空白缝隙的问题，代码如下： 再调试的时候，加入如下代码： 依然有空白缝隙，该游览器在基于appcan平台开发的app中内置的游览器，感到很奇怪，经过一番研究，解决方法如下： 原来底部间隙的原因是因为行内元素默认的垂直对齐方式为baseline造成的字体下方会有 阅读全文

摘要：1、Webkit内核的浏览器，必须加上-webkit前缀。 2、设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 阅读全文