随笔分类 - html+css
摘要：一、为什么要写这篇文章 今天看到一个问题： 两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？ 解决方案就是给第二个div加上：vertical-align:top。 关于vertical-align和基线
阅读全文
摘要：官网地址 http://lesscss.org/ less手册 www.lesscss.net/ bootstrap官网less介绍 http://www.bootcss.com/p/lesscss/ 一、浏览器端环境搭建 github下载地址：https://github.com/less/les
阅读全文
摘要：一、需求点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。二、代码JQuery点击图片查看大图by starof三、技巧需要点击图片中1、2、3、4四张小图分别查看大图，而下面左右按钮切换时是需要同时切换4张小图。因为移动端无法添加热点，最终一个解决方法是使用四个a标...
阅读全文
摘要：一、背景 设计狮童鞋总是会设计各种高大上的效果图，比如下面这个土豪金的效果。 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框，打钩时是一个金色的对勾。接下来说说怎样实现该效果。 二、解决方法 1、纯css解决方法 在css3 选择器（三）一文中介绍过一个选择器【:checked】选择
阅读全文
摘要：场景：图片宽高未知，使其在固定宽高容器中垂直居中。 一、vertical:middle原理配合after伪元素实现 为父元素设定一个伪元素：：after,其高度为父元素的高度，display:inline-block,将其设定为vertical-align:middle即可撑开line box，同时
阅读全文
摘要：css多栏自适应布局还是需要总结一下的，都是基本功。 一般使用position属性布局，或者用float属性布局，也可以使用display属性。 看资料说position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。 一、左侧尺寸固定右侧自适应 1、浮
阅读全文
摘要：一、区别区别体现在子元素继承时，如下：父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的...
阅读全文
摘要：一、介绍1、emw3cschool中给出css中尺寸单位如下：单位描述%百分比in英寸cm厘米mm毫米em1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字...
阅读全文
摘要：一、介绍css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::befor...
阅读全文
摘要：一、包含块(Containing Block) 要讲position,首先就涉及到一个概念：包含块。 1、包含块介绍 包含块简单理解就是一个定位参考块，就是"大盒子里套小盒子"中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。 1、初始包含块（Initial containi
阅读全文
摘要：一、浮动介绍 历史： 浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。 定位方式： 浮动让元素脱离正常流，向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。 Note: 1
阅读全文
摘要：今天帮别人调代码时，看到一个样式：background-position: 50% 0;background-size: 100% auto；对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。对back...
阅读全文
摘要：为什么要记录一下？因为今天我要设置一个字符加粗，然后就用font-weight:200,没有任何效果。现在看来很可笑，400才相当于normal，200怎么加粗，奇怪的是也没有变细。所以得研究一下font-weight的工作原理，以下正文。一、使用介绍font-weight设置文本的粗细，文本粗细设...
阅读全文
摘要：给textarea添加背景图用的好也很有意思哦。
阅读全文
摘要：一、使用介绍专为input元素服务，为其定义标记。for属性规定label与哪个表单元素绑定label和表单控件绑定方式又两种：1、将表单控件作为label的内容，这样就是隐士绑定。此时不需要for属性，绑定的控件也不需要id属性。隐式绑定：Date of Birth: 2、为标签下的for属性命名...
阅读全文
摘要：一、z-index z-index用来控制元素重叠时堆叠顺序。 适用于：已经定位的元素（即position:relative/absolute/fixed）。 一般理解就是数值越高越靠上，好像很简单，但是当z-index应用于复杂的HTML元素层次结构，其行为可能很难理解甚至不可预测。因为z-ind
阅读全文
摘要：前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值： scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。 fix
阅读全文
摘要：一、opacity属性 1、opacity 习惯上说“透明度”，其实应该叫“不透明度”。opacity 意思：不透明，而背景色的默认值：transparent意思才是“透明的”。所以opacity用来设置不透明度，取值从[0.0~1.0]，代表从完全透明到完全不透明，0.0就和transparent
阅读全文
摘要：一、介绍有两种使用标签的方式：1、通过href属性——创建指向另一个文档的链接2、通过使用name属性——创建文档内的书签name属性规定锚(anchor)的名称。1、name定位使用name，只能在标签上用，所以总结为“a标签+name属性”。2、ID定位使用id可以在任意标签使用。3、js定位使...
阅读全文