css
关注
分享
扫一扫
文章平均质量分 65
Kou_Hi
这个作者很懒，什么都没留下…
展开
-
CSS中margin边界叠加问题及解决方案(1)
你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的转载 2016-03-03 20:48:08 · 508 阅读 · 0 评论 -
ng-style用法
我想给ng-style传一个controller里面的变量，折腾了半天，引号不能忘ng-style="{'background-color':'{{markColor}}'}"原创 2016-06-24 16:03:59 · 22318 阅读 · 1 评论 -
flexbox功能、兼容、原理
http://www.imooc.com/video/6048 [Flexible boxes更加优雅的Web布局] https://philipwalton.github.io/solved-by-flexbox/ [Solved by Flexbox] https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex [MDN-flex]原创 2016-06-07 15:31:00 · 1792 阅读 · 0 评论 -
css可替换元素(replaced element)
MDN上 概述 CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS c原创 2016-06-12 14:47:59 · 2182 阅读 · 0 评论 -
负margin用法权威指南
本文由陈陆扬根据John Imbong的《The Definitive Guide to Using Negative Margins》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-us转载 2016-06-12 15:29:59 · 749 阅读 · 0 评论 -
<img>元素底部为何有空白
示例: http://codepen.io/GitKou/pen/NrGbXP 块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。取值 (行内(inline)元素)多数值是相对于父元素：baseline元素基线与父元素的基线对齐。一些 可原创 2016-06-07 10:50:28 · 870 阅读 · 0 评论 -
css垂直水平居中小技巧
1.https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/.Center-Container { position: relative;}.Absolute-Center { width: 50%; height: 50%; overflow: auto; marg原创 2016-05-24 17:07:07 · 509 阅读 · 0 评论 -
z-index学习
看了z-index，写个总结； 这些资源： 1. 深入理解CSS中的层叠上下文和层叠顺序:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/() 2. CSS深入理解之z-indexh ：ttp://www.imooc.com/learn/643 3. Wh原创 2016-06-08 16:42:56 · 484 阅读 · 0 评论 -
Inline-block没有内容时，仍有高度
如下图，第二个line-block的span没有内容，但是div的高度是120px demo: https://codepen.io/GitKou/pen/qNxNxj<div> <span class="a">111</span> <span class="b"></span></div>div { font-size: 20px; line-height: 60px; b原创 2016-07-18 16:39:11 · 2405 阅读 · 3 评论 -
视差滚动Parallax
参考资料: 1.https://www.youtube.com/watch?v=STwoa-9jxi0 2.图片都来自 https://www.instagram.com/vsco/demo点这里： https://codepen.io/GitKou/pen/rLYvkA 主要几点： 1. background-attachment: fixed; 2. 改变 background-pos原创 2016-07-19 19:55:17 · 736 阅读 · 0 评论 -
纯CSS视差滚动
参考旭哥的：http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/<div class="box"> <img src="http://img.blog.youkuaiyun.com/20160714170115893" alt="" class="curtain"> <div class="comehere"></di原创 2016-07-19 19:23:27 · 3010 阅读 · 0 评论 -
css画空心箭头
<i class="u-arrow u-arrow-left "></i>.u-arrow { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #999; border-right: 1px solid #999; }原创 2016-09-01 15:32:44 · 5495 阅读 · 0 评论 -
为什么说移动一个元素用Translate()比Pos:abs Top/Left好？
为什么说移动一个元素用Translate()比Pos:abs Top/Left好？整理来自：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/Distraction: Pixel snapping 1. Animating with Top/Left： ht原创 2016-08-11 20:11:22 · 4277 阅读 · 3 评论 -
IFC(Inline formatting contexts)学习
翻译来自： https://www.w3.org/TR/CSS21/visuren.html#inline-formatting在IFC中，盒子依次水平排列，从它的包含块的最顶端开始。水平方向的margins、borders和paddin体现在这些盒子之间。这些盒子可以在垂直方向可以以不同的方式对齐：底部对齐、顶部对齐或者以内部文字的基线对齐。包含这些盒子的一行矩形区域成为行框。行框的宽度由包含原创 2016-10-17 17:48:37 · 1354 阅读 · 0 评论 -
word-break:break-all和word-wrap:break-word的区别
最开始我们说了，word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word转载 2016-06-01 17:07:16 · 2227 阅读 · 0 评论 -
圆，半径自适应外层高度
效果可查看https://codepen.io/GitKou/pen/OXPggx HTML： <div class="m-edge" style="margin-top: 50px"> <div class="semicircle leftSemiCircle"></div> <div class="dashedLine"></div> <di原创 2016-06-01 15:32:46 · 634 阅读 · 0 评论 -
input type="button"和button区别
转自 https://davidwalsh.name/html5-buttonsOne of the things I love about CSS is how easy it is to make one element look like another. In the example above, the first element is an anchor, the second转载 2016-05-04 15:40:05 · 1640 阅读 · 0 评论 -
JQuery里的子元素过滤选择器，加空格与不加空格的区别
最近学习jquery，发现它的选择器的写法与css的基本语法很像，加不加空格差别很大。 $(“:first-child)——：first只是返回单个元素，而first-child选择符将为每个父元素匹配第一个子元素。例如子元素过滤选择器 li:first-child(不加空格),这里的父元素指的是li标签的父元素； li :first-child(加空格)，这时候因为变成了ance de原创 2016-03-08 14:25:05 · 3685 阅读 · 0 评论 -
自己对BFC的疑问
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。有几点我很疑惑： 第一点： <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 {float:left; background: red; height: 100px原创 2016-03-26 22:51:38 · 319 阅读 · 0 评论 -
a标签的四个css伪类(link、visited、hover、active)样式理解
转自点击打开链接伪类是CSS 用于向某些选择器添加特殊的效果，chrome和firefox中的css监控并不会显示所有的样式，有些显示会有点不全，IE下还是有点问题的，不过大体不变伪类是CSS 用于向某些选择器添加特殊的效果。 a标签中有四个： link、visited、hover、active 未移入a标签链接时：link 移入a标签链接时：l转载 2016-03-12 21:53:05 · 5335 阅读 · 0 评论 -
:before和::before的区别
转自 点击打开链接_________________________在一次项目中，有一次要用到::selection伪元素，然后开发同学问我，CSS中一个冒号和两个冒号有神马区别？这好像真的是个问题，或许很多前端同学对此都有疑惑，查了些资料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。W3C关于CSS3选择器的规转载 2016-03-12 22:39:47 · 435 阅读 · 0 评论 -
CSS3详解：transform
转自点击打开链接-------------------------近来，HTML5和CSS3的发展速度还是很可观的，国内外不乏一些大站，酷站都在使用最新的技术。面对新的技术，我们该如何正确的把握和使用到今后的项目实战中呢？针对这一问题，浩子决定剖析CSS3，一一像各位同学解答CSS3到底是个神马东西。就已transform开始吧，写的不好的话，请严重拍砖！！CSS3 t转载 2016-03-13 14:55:41 · 377 阅读 · 0 评论 -
CSS中空格和>区别，A B, A>B
转自点击打开链接----------------------这些是CSS3特有的选择器，A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。另外：没有A+B表示HTML中紧随A的B元素。nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一转载 2016-03-13 15:01:56 · 6363 阅读 · 0 评论 -
BFC(块级格式化上下文)
BFC(块级格式化上下文)字数1536 阅读990 评论1 喜欢8BFC(块级格式化上下文)@(CSS)[CSS|BFC][TOC] 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我转载 2016-03-26 21:13:42 · 444 阅读 · 0 评论 -
Ruby环境SCSS编译中文出现Syntax error: Invalid GBK character
解决办法：找到Ruby的安装目录，里面也有sass模块，如这个路径：C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.8\lib\sass 在该路文件里面 engine.rb，添加一行代码：require … require ‘sass/supports’Encoding.default_external = Encoding.find(‘utf-8转载 2016-05-24 14:08:18 · 817 阅读 · 0 评论 -
css实现正方形div的3种方式
1.CSS3 vw 单位 1vw = 1% viewport width<div class="vw">hello,viewport</div>.vw { width: 50%; height: 50vw; background: #ccc; }2.padding-bottom <div class="placeholder"></div原创 2016-05-24 16:33:51 · 32706 阅读 · 0 评论 -
jsbin-jsfiddle-or-codepen-which-one-to-use-and-why
There are lots of css – js playgrounds now in the market, and the most popular ones are JSbin (by Remy Sharp), JSfiddle (by Oskar Krawczyk), codepen (by Chris Coyier, Tim Sabat and Alex Vasquez). So转载 2016-05-25 15:46:57 · 754 阅读 · 0 评论 -
边长、边数可配置的旋转多面体
效果点击这里 https://jsbin.com/kakoxe/edit?html,css,js,output 或者看这里 http://codepen.io/GitKou/pen/GqKZGW (这里加了rotate3d(1,1,0,100deg)，使得沿对角线转)css3画出来的多面体，这个多面体的每个侧面都是正方形，底面是个边数可配置的多面体 buildPolyhedron(10, 300原创 2016-05-25 14:44:31 · 1091 阅读 · 0 评论 -
html中的换行符也占空间，如何解决
如上图：parent的width：600px; child1和child2的width：300，display:inline-block; 我们希望它们并排显示，但为什么会换行呢？<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styleshe原创 2016-05-26 10:06:52 · 4113 阅读 · 0 评论 -
详解rotate3()
转自http://tympanus.net/codrops/css_reference/rotate3d/The rotate3d() function is a 3D transform function that is used to rotate an element in three-dimensional space.The element is rotated by转载 2016-05-26 10:44:28 · 3921 阅读 · 0 评论 -
CSS3圆角详解
作者： 阮一峰日期： 2010年12月 9日CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章，清晰易懂地解释了CSS3圆角的各个方面，非常值得学习。以下就是我翻译的中文版。=========================================CSS3圆角转载 2016-05-04 10:59:48 · 374 阅读 · 0 评论 -
translate元素中的Position: fixed
最近写奇葩的布局遇到了奇葩的问题，想给一个父元素加上translate3d来实现GPU加速，发现加上tranlate3d之后，fixed定位的自元素不是相对于viewport了，二是相对于有translate3d的父元素。查了查fixed的定义，按照标准定位确实是相对于viewport - https://www.w3.org/TR/css-position-3/#fixed-pos Fix原创 2017-09-05 20:24:12 · 2129 阅读 · 0 评论