随笔分类 - Html+CSS
摘要：这个问题可以说是老生常谈了，面试时经常问道，一直没整理过，这次做个系统梳理 1、利用display：table实现 从caniuse.com上查到，display：table可以兼容到IE8，以目前环境大部分场合都没问题，上代码 适用于内容区宽度，高度不固定的情况 2、利用绝对定位 这是最容易想到的
阅读全文
摘要：CSS很多人都会写也用的很溜，毕竟这是一门描述性语言，不需要太多的语法，算法知识，上手非常容易，因此遭到很多人轻视，但用好CSS真的不是一件很容易的事，常见的自适应布局就很考验技能，你不光要会写，还得懂内在原理。 前端面试都会考到圣杯布局，以前写过很多次，但一直没做个总结，以至于每次别人问都不能很好
阅读全文
摘要：我们都知道背景图片可以通过background-position进行定位，常用的有数值以及关键字，百分数也是支持的，但用的少，那么问题来了，如果设置为百分数是如何计算的？ 如果用数值，背景图片将会相对于该元素进行计算，如 背景图片的左上角将会出现在元素左上角下方20px，左边20px的地方 此时背景
阅读全文
摘要：外边距折叠的几种情况：1、当一个元素出现在另一个元素上面时，第一个元素的底外边距和第二个元素的顶外边距发生叠加，效果图如下： PS：这里的元素特质块级元素，inline元素竖向margin无效，display为inline-block的元素触发了BFC也不会出现叠加，input，img之类的行内替换
阅读全文
摘要：这个系列主要记录一下常被忽略但又经常产生影响的知识点，纯做个记录，方便查询 html换行被解析为空格也是常说的3像素空隙的问题，根据测试不同浏览器产生的空隙大小会不一样，Chrome，Firefox，IE8+都存在这样的问题，这个问题的原因相比大家都知道，浏览器把换行解析成了“空白节点”，就是jav
阅读全文
摘要：BFC是CSS中一个非常重要的概念，经常用来清除浮动以及处理外边距折叠，但BFC到底是个什么东西却很难准确的表达清楚，国内的相关技术文档基本都不全面，本文的目的就是对BFC的方方面面做个整理，当然未必会一次性整理到位，后面如果发现有遗留错误的会继续补充。 什么是BFC？ BFC(Block form
阅读全文
摘要：本篇约定Bootstrap简写为BT BT的受欢迎程度是大家有目共睹的，用它可以快速的搭建出网站。很早就接触过这个框架，其中的栅格系统，css模块化以及js插件做的相当不错，由于工作中较少使用也一直没有好好梳理下，这篇文章就来好好分析一下这个系统。 BT虽然很好，但也不是没有缺点，由于框架很多都是模
阅读全文
摘要：经常有客户咨询说你们会做H5吗，就像这个，拿过来一看，一个上下滑动的贺卡，这已经成为了大部分人对H5的理解，甚至很多大公司都推出了制作这种动画的工具，可以快速生成此类页面。（其实，这就用到了一些CSS3的技巧，好吗！！！） 我大H5就是你们说的这样吗，伤心！！！！ H5可是个牛逼闪闪的东西，且是你们
阅读全文
摘要：要实现li列表计数比较简单，直接设置list-style-type即可，但是要实现非li列表计数该怎么办呢，counter()可以轻松实现 结果如下图所示：
阅读全文
摘要：w3school对transform的介绍很简单 transform的默认值是none 其所举的例子也只是对一个值进行过渡，其实还可以对多个值同时进行过渡，写法如下 tips： 附w3.org对transform的介绍：https://www.w3.org/TR/css-transforms-1/
阅读全文
摘要：transition是CSS3新增的动画属性，可以实现属性的平滑过渡，大大提高用户体验，对于多个属性进行过渡的话很多人会这样写 很不幸的是如果我只需要对其中一两个而不是全部属性进行过渡话很多人就素手无策了，其实你可以这样写 tips： transition有四个属性，很多人都会遗忘，分别是trans
阅读全文
摘要：body{ font-size: 14px; } ul ,li{ margin:0px; padding:0px; list-style: none; } .box{ width: 1000px; height: 40px; background:rgba(0,0,255,.7); color: white; text-align: center; transform: skew(-45de...
阅读全文
摘要：先上一张关系图 最底下的一个是画布，往上一层是html结构，再往上一层是body结构 默认情况下html，body的height都是0，你给这两个元素分别加个边框就能看出来，要特别注意的是加背景颜色是看不出来的，这是由于画布，html和body的逆向继承有关系，给body设置背景颜色会被html，画
阅读全文
摘要：CSS3中提出了background-size属性，该属性可以设置背景图片的大小，该属性的值设置为绝对数值或者百分比时对background-position没有任何影响，当设置为contain/cover时就会产生影响，其中有一个值会无效。 background-size:contain 该属性会
阅读全文
摘要：background-position:value1 value2 value1和value2的值可以值绝对值也可以是百分数，大部分值都很好理解，但是50% 50%这两个值是如何计算的呢？ 图片水平和垂直居中。与 background-position:center center;效果等同。 等同于
阅读全文
摘要：最近公司有个客户的网站用手机safari打开出现背景图片错乱，本来应该显示A图片的却显示B图片，网速越慢的情况下越容易出现这种问题，悲催的是这种情况只在iPhone 6上出现，并且不是一直这样，多刷新几次就正常了，用安卓测试一切正常，pc端显示也一切正常。经过一番努力发现这种现象只在ios 8 版本
阅读全文
摘要：手机浏览器种类： UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于Android修改的 全球仅有四
阅读全文
摘要：首先这里涉及到虚拟像素和物理像素，不管是移动设备还是pc都存在这个概念1、在显示器精度还不是很高的年代，一个物理像素就等于一个虚拟像素，1000px的网页就占据了1000的物理像素（如果你玩过小霸王，对这个应该有很直观的影响，上面的人物都是一个格子一个格子组成的）2、随着显示器精度的不断提高，同等面
阅读全文
摘要：viewport：视口，视觉窗口，显示区域。在显示面积上手机屏幕相对桌面显示器要小很多，在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的
阅读全文
摘要：文本域宽度如果用cols来控制，缩放网页的时候文本域的宽度不会自动变化用width来表示就会跟着网页缩放而缩放看到下面一段文字：对于内容至上的网页，在禁用CSS的情况下，HTML内容要做到易于阅读。如果textarea没有cols和rows，在禁用CSS的情况下，textarea变的很小，用户无法输...
阅读全文
浙公网安备 33010602011771号