CSS
文章平均质量分 54
SalmonellaVaccine
这个作者很懒,什么都没留下…
展开
-
The 30 CSS Selectors you Must Memorize
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048转载 2014-10-04 01:16:34 · 796 阅读 · 0 评论 -
应不应该使用inline-block代替float
本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.vanseodesign.com/css/inline-blocks/,以及作者相关信息作者:转载 2014-12-09 05:43:41 · 593 阅读 · 0 评论 -
Interview Questions and Exercises About CSS
http://css-tricks.com/interview-questions-css/If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of thing转载 2014-12-08 16:48:49 · 843 阅读 · 0 评论 -
What Is A CSS Reset?
http://www.cssreset.com/what-is-a-css-reset/A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules thatresets the styling of all HTML elements to a consist转载 2014-12-09 01:42:45 · 994 阅读 · 0 评论 -
经验分享:CSS浮动(float,clear)通俗讲解
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: 由于CSS转载 2014-12-09 05:19:54 · 482 阅读 · 0 评论 -
css使宽度不定的div水平居中
http://www.w3clog.com/1496.html我们知道设置了宽度的div等块级元素居中很简单,像下面这样就可以了:CSS123456 div { width:100px; margin:0 auto;} 然而,如果div宽度不定的话,如何居中呢?同转载 2014-12-08 16:08:49 · 678 阅读 · 0 评论 -
CSS的优先级总结
http://www.w3clog.com/270.html首先说说css选择器群组的优先级,1到6优先级逐次降低,如下所示:#id{border:6px solid black !important;};嵌在style属性里的规则;一个或者多个ID选择符;一个或者多个类、属性或伪类选择符;一个活多个元素选择符;只有通配选择符,即*{border:0px solid bla转载 2014-12-08 16:09:25 · 528 阅读 · 0 评论 -
Center parent div with dynamic and set width child divs
http://stackoverflow.com/questions/26317115/center-parent-div-with-dynamic-and-set-width-child-divsCentering a Div of Unknown WidthWhen the div widths are variable, the centering technique转载 2014-12-12 03:37:10 · 631 阅读 · 0 评论 -
How to center absolute element in div?
http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-divQuestion:I need to place a div (with position:absolute;) element in the center of my window. But I am having转载 2014-12-30 01:32:55 · 456 阅读 · 0 评论 -
::after / ::before
http://css-tricks.com/almanac/selectors/a/after-and-before/::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While t转载 2014-12-09 05:27:59 · 452 阅读 · 0 评论 -
What is the difference between max-device-width and max-width for mobile web?
http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-webmax-width is the width of the target display area, e.g. the browser转载 2014-12-09 01:26:05 · 534 阅读 · 0 评论 -
不同类型的input选择器
Textinput:textCheckboxinput:checkboxNumberinput[]原创 2014-10-04 04:07:42 · 1149 阅读 · 0 评论 -
a tag中span居中
http://www.css-lab.com/demos/vertical-center/vert-align-navbar.html主要用于shen转载 2014-11-04 05:18:18 · 1073 阅读 · 0 评论 -
Vertically Center Multi-Lined Text
http://css-tricks.com/vertically-center-multi-lined-text/If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the转载 2014-12-03 07:16:53 · 543 阅读 · 0 评论 -
Align image in center and middle within div
http://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div#over img { display: block; margin-left: auto; margin-right: auto;}转载 2014-12-05 07:56:45 · 450 阅读 · 0 评论 -
跨浏览器的inline-block
糖伴西红柿Mar 4, 2009CSScss, inline-block30 条评论 »啊,inline-block,挺难琢磨并且迷人的声明上承诺了很多,其实提供了很少。很多次我拿到类似这样的 PSD 文件:就哭了。一般说来,这种类型的布局是小菜一桩。固定宽度,固定高度,向左浮动就解决了。但是,这个设计中内容的多少是可变的,这就意味着如果这些块中的一些内容比其他转载 2014-12-22 15:37:21 · 475 阅读 · 0 评论 -
CSS深入研究:display的恐怖故事解密(2) - table-cell
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html上集《CSS深入研究:display的恐怖故事解密(1) - display-inline》已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装。除了部分常用属性外,其他的都是传说哥。既然是传说哥,请不要迷恋。就让传说继续转载 2014-12-22 15:59:44 · 470 阅读 · 0 评论 -
Interviewing a front-end developer
http://blog.sourcing.io/interview-questions Part of my role at Twitter and Stripe involved interviewing front-end engineering candidates. We were given a fair amount of discretion on how we went a转载 2014-12-08 16:12:59 · 528 阅读 · 0 评论 -
CSS Box Shadow
http://css-tricks.com/snippets/css/css-box-shadow/Used in casting shadows off block-level elements (like divs)..shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px转载 2014-12-30 01:16:04 · 634 阅读 · 0 评论 -
Interview Questions and Exercises About CSS
http://css-tricks.com/interview-questions-css/If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to转载 2015-01-04 05:33:22 · 1137 阅读 · 0 评论 -
WAI-ARIA无障碍网页应用属性完全展示
http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=227转载 2015-03-05 00:34:45 · 899 阅读 · 0 评论 -
你真的了解word-wrap和word-break的区别吗?
http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。那它们到底是转载 2015-12-15 04:17:45 · 411 阅读 · 0 评论 -
Style input element to fill remaining width of its container
div总长一定,button长度会变化,需要input填满剩下的长度。http://stackoverflow.com/a/11815907/2177408Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer转载 2016-04-28 07:03:33 · 666 阅读 · 0 评论 -
Fullscreen API
https://davidwalsh.name/fullscreenBy David Walsh on December 23, 2013 As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One ver转载 2016-05-17 11:58:20 · 546 阅读 · 0 评论 -
How to make an icon spin with CSS
http://jsfiddle.net/gaby/9Ryvs/7/div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 4000ms;转载 2016-07-22 12:56:38 · 341 阅读 · 0 评论 -
background-position
https://css-tricks.com/almanac/properties/b/background-position/The background-position property in CSS allows you to move a background image (or gradient) around within its container.html转载 2016-08-06 06:56:36 · 440 阅读 · 0 评论 -
Make autofill background transparent
https://jsfiddle.net/ju3g47jh/14/div.select_custom_background { background-image: url(http://i.stack.imgur.com/mbisi.png) !important; width: 175px}input { backgr转载 2016-09-27 01:00:18 · 435 阅读 · 0 评论 -
Select removing dropdown arrow
http://stackoverflow.com/questions/16603979/select-removing-dropdown-arrowSimple way to remove drop down arrow from select in Chrome and Mozillaselect { /*for firefox*/ -转载 2016-09-27 01:10:10 · 315 阅读 · 0 评论 -
HTML5 Placeholder Styling with CSS
http://davidwalsh.name/html5-placeholder-cssBy David Walsh on December 27, 2010 35824/25/2011: This attribute is not styleable as of Opera 11. Internet Explor转载 2015-06-26 07:54:48 · 601 阅读 · 0 评论 -
The CSS3 Placeholder Pseudo-element
http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-elementGuil HernandezAn HTML5 feature that had the web community abuzz with excitement a couple of years ago was theplaceholde转载 2015-06-26 07:54:13 · 660 阅读 · 0 评论 -
如何和何时使用CSS的!important
http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html特别声明:此篇文章由David根据Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》进行翻译,整个译文带有我转载 2015-03-05 02:09:09 · 729 阅读 · 0 评论 -
How to Add a Dotted Underline Beneath HTML Text
http://stackoverflow.com/questions/15252597/how-to-add-a-dotted-underline-beneath-html-texta, a:visited {display: inline-block;border-bottom: 1px dashed #3a5b9f;}转载 2015-03-10 04:25:39 · 440 阅读 · 0 评论 -
通过CSS3 justify实现两端对齐
http://demo.doyoe.com/css3/justify/浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and Later* 两端对齐方案基于 text-align:justify 及 text-align-las转载 2015-04-01 08:40:26 · 1136 阅读 · 0 评论 -
Fit background image to div
http://stackoverflow.com/a/8200264You can achieve this with the background-size property, which is now supported by most browsers.To scale the background image to fit inside the div:ba转载 2015-04-11 04:16:27 · 823 阅读 · 0 评论 -
clear both or overflow hidden , a clearfix solution
http://stackoverflow.com/a/15182978/2177408overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This转载 2015-04-15 06:35:02 · 483 阅读 · 0 评论 -
Stacking Order of Multiple Backgrounds
https://css-tricks.com/stacking-order-of-multiple-backgrounds/Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best t转载 2015-04-15 06:38:55 · 437 阅读 · 0 评论 -
:last-child works, :first-child doesn't
http://stackoverflow.com/questions/25454603/last-child-works-first-child-doesntI have an aside with two <div class="sku"> elements. I'm trying to use CSS to manipulate the :first-child but转载 2015-05-15 08:32:56 · 773 阅读 · 0 评论 -
图解利用CSS实现三角形
http://segmentfault.com/a/1190000000652249利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻boder会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容转载 2015-05-30 00:46:06 · 557 阅读 · 0 评论 -
Understanding and Using rem Units in CSS
https://www.sitepoint.com/understanding-and-using-rem-units-in-css/By Adrian Sandu October 06, 2015CSS units have been the subject of several articles here on SitePoint (such as A Look at转载 2016-12-13 01:27:49 · 439 阅读 · 0 评论 -
两个div并列
div1 div2 body{ margin: 0; width: 100%;}#div1{ height: 30px; width: 10%; border: solid 1px #000000; background-color: #0066CC; float: left;}#div2{ height: 30px; width: 9转载 2014-10-11 00:37:02 · 598 阅读 · 0 评论