CSS
文章平均质量分 74
zhq2005095
这个作者很懒,什么都没留下…
展开
-
CSS-左侧固定宽度,右侧自适应宽度的两列布局实现方法总结
这其实是遇到的一道面试题:面试官要求实现左侧固定宽度,右侧宽度自适应的两列布局。用尽可能多的方法来实现。这是很简单的一个题目,我只是想到了浮动和定位两种方式,但是其中还有回答错误的地方,比如绝对定位的div,我说不用管宽度,是自己拉升的,可是回来后一查资料,发现我说错了,绝对定位的div是宽度随着内容撑开的,并不是自动去拉升的。仔细分析其原因:是因为平时写页面的时候,仅仅局限于实现功能了之后,就没有原创 2017-02-22 21:53:48 · 886 阅读 · 0 评论 -
CSS-深入理解之margin
在一次面试过程中,面试官问到margin的塌陷的问题,以及margin负值的问题。当时有点蒙,对这块知识点的理解一点都不深入。为了补充这方面的知识,特意去查了一下相关的资料,发现张鑫旭大神在慕课网上有视频讲解。在这里,梳理和总结一下其中的知识点。1. margin可以改变容器的尺寸1.1 margin能够改变可视区域的尺寸的条件适用于没有设定width/height的普通block水平的元素(fl原创 2017-03-19 22:20:50 · 1790 阅读 · 0 评论 -
CSS-深入理解之float浮动
这篇文章依然是学习张鑫旭大神的课程的一个总结。听完这个课程后,只能说我以前对于float浮动的理解太肤浅了,很多的细节都不清楚,知其然而不知其所以然。1. float浮动的设计目的float浮动设计的本来的目的就是为了实现网页中文字环绕图片的布局。2. float浮动的特性包裹破坏3. float浮动的作用去空格化能够让inline元素的display属性变为block原创 2017-03-20 22:54:34 · 997 阅读 · 0 评论 -
CSS-关于定位,你所需要知道的一切
CSS中的定位在实际开发中经常用到,一些比较刺手的布局,很多时候通过定位这个杀手锏就能够解决。但是对于定位中的细节都模模糊糊的,为了搞明白其中的细节,特意搜索了相关的资料,总结了一下,防止时间久了就忘记了。position的属性值static:默认值。没有定位,元素出现在正常的流中。relative:相对定位。1. 不论其父元素和相邻元素的position是什么,均相对于自身原来的位置来偏移。2原创 2017-03-15 23:59:31 · 884 阅读 · 0 评论 -
CSS-水平和垂直居中的总结
在实际开发过程中,经常能够遇到需要居中的布局,包括水平居中和垂直居中。在CSS中,水平居中还算比较容易解决,使用 text-align: center 和 margin: 0 auto 就能够解决大部分的需求,但是垂直居中比较麻烦一点儿,以为跟水平居中相对应的 vertical-align: middle 和 margin: auto 0 使用起来是很难有达到预期的效果的,尤其是 margin: a原创 2017-02-26 10:16:00 · 263 阅读 · 0 评论 -
CSS-BFC的概念及其作用
之前对 BFC 这个概念早有耳闻,但是因为在实际开发当中没怎么用过,所以对其也没太重视,也仅仅是知道这三个字母而已,对其具体的概念没有深入研究过。但是最近在看 CSS 相关的资料的时候,经常出现 BFC 这个词汇,发现不懂的话,会影响阅读的顺畅感。所以特意搜索了相关的资料,整理了下来。BFC 的定义首先 BFC 这个词语的英文的全称为 block formmating context。直译为”块级格原创 2017-04-02 23:38:03 · 1233 阅读 · 0 评论 -
CSS-两侧固定宽度,中间自适应的三列布局
在实际开发中,左右两侧固定宽度,中间自适应的三列布局是经常能够遇到的,尤其是最近的一个项目中,属于微信公众号,移动端的网页。在部分页面中,就需要用到这种布局,我是采用flex布局来搞定的。为了总结一下相关的知识,特意在网上收集了几篇相关的文章。 这种布局,主要是通过两类技术原理来实现的:基于margin来实现;基于CSS3中的弹性布局flex属性来实现;绝对定位的方法这种方法,其实原理很简单原创 2017-03-14 23:34:54 · 1522 阅读 · 0 评论 -
CSS-清理浮动的方法总结
对父元素设置overflow: hidden;使用.clearfix的空div;在下面的元素中设置clear: both;原创 2017-02-23 14:08:50 · 397 阅读 · 0 评论 -
CSS-移动端页面布局的适配方案总结
占坑,待续。。。使用Flexible实现手淘H5页面的终端适配 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html再聊移动端页面的适配 https://www.w3cplus.com/css/vw-for-layout.html如何在Vue项目中使用vw实现移动端适配 https://www.w3cp...原创 2018-05-22 14:52:26 · 2727 阅读 · 0 评论