浮动(Floats)原理与清除浮动

浮动概念浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就像浮动元素不存在一样。浮动影响浮动元素会造成父元素塌陷当给元素设置float之后,元素脱离文档流,父元素没有设置height,造成塌陷。.super{ border:1px

业界 2016年07月08日

纯CSS实现扁平化风格开关按钮

开关样式预览图css代码部分input[type=checkbox] {visibility: hidden;}.checkbox {width: 120px;height: 30px;background: # FFF;margin: 1px 1px;border-radius: 10px;position: relative;}.checkbox:before {con

业界 2016年07月08日

CSS不常用属性---Tips2背景

backgrounddiv{ background: red url(img.png) no-repeat scroll left top/100% border-box content-box;}对应的属性全称[background-color][background-image][background-repeat][background-attachment][

业界 2016年07月08日

CSS Float nine rules

注：本文是对众多博客的学习和总结，可能存在理解错误。请带着怀疑的眼光，同时如果有错误希望能指出。如果你喜欢我的文章，可以关注我的私人博客:http://blog-qeesung.rhcloud.com/入门前端也算是有三个月之久了，发现Float这个属性一直都很迷惑，只是知道一些简单的浮动规则，并没有深入去学习，一旦遇到一点复杂的浮动场景，自己也就懵了。于是在网上找了数篇关

业界 2016年07月10日

【转】【译】让你的网站更炫酷的一些小 tips

原文链接 : 101 Ways to Make Your Website More Awesome原文作者 : Nicholas Tart译文出自 : 掘金翻译计划译者 : 达仔译文链接：https://github.com/xitu/gold-miner/blob/master/TODO/101-ways-to-make-your-website-more-awesome

业界 2016年07月09日

网站的肥胖症危机（节译版）

1、大多数网站的主要内容是文本，更准确地说，是简短的文本。文本本身并不大，但是展示它们的网页，正变得越来越大。Twitter展示单条评论（140个字符）的页面，超过900KB。Medium的一篇文章大约400个词，页面大小是1.2MB。如果这种趋势持续下去，2020年，网页的体积平均将超过5MB，比一本俄罗斯长篇小说还大。比如，陀思妥耶夫斯基的《罪与罚》，文本压缩后不到80

业界 2016年07月11日

巧用SASS之如何遍历n个子元素并为其设置属性

最近在新项目中引入了 SASS 来编写样式代码，心想既然用到了这种高端货，就要用得巧用得妙，不能单纯地只是把常用属性定义成变量或定义重用的代码块等等。因此在编写样式时，都要时刻提醒自己是不是可以巧用SASS来解决一些问题。这次遇到的需求是， 里有7个重复的 1. ，这7个 需要应用7中不同颜色的 background-color ，需求很简单，如下是简易的效果图。针对这

业界 2016年07月12日

CSS：选择器

1. 元素选择器p { line-height: 1.5em; }h2 { color: # 696969; }2. id 和 类选择器id .class3. 关系选择器A B：后代选择器 （所有后代）A > B：子选择器（直接后代）A + B：相邻兄弟选择器（AB为兄弟，仅紧邻 A 的 B 生效）A ~ B：一般兄弟选择器（A 之后的所有 B 兄弟生效）注意：子选择器：I

业界 2016年07月11日

CSS 布局：position

点击链接预览：CODEPEN 参考：cssnext 演示你对Position的了解程度有多少?HTML和CSS高级指南之二——定位详解html 部分： Tabs PostCSS 部分（使用pluins：postcss-cssnext）： :root {--r: 50px;--height: calc(2*var(--r));--w: 10px; }.tabs {width:

业界 2016年07月11日

前端面试大全

HTML面试题1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js;3.你做的页面在哪些流览

业界 2016年07月12日