解决flex-direction: column 之后元素宽度自动变为100%
一、问题描述 当我们设置父元素flex-direction为column后，他的子元素如果我们没有设置具体宽度（可能我们希望子元素宽度由内容撑开），这时就会发现，所有的子元素宽度默认是100%了 二、解决方式 1.设置某个子元素 我们给对应子元素的align-self设置除auto和stretch之外的值就行 align-self: baseline
如何用一行 CSS 分别实现 10 种现代布局？
前言 更新于 2020/7/12，和 Una Kravets 邮件确认了下，最近她在 web.dev 也发布了新的关于视频里面布局的 blog，有兴趣的可以前去一观 one line layouts 周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 CSS 的东西，虽然由于太过底层没啥人愿意看, sad）。 注意：下面大部分代码已经由各大主流最新浏览器实现，...
[转]纯CSS 实现radio checkbox样式美化
.demo--label{margin:20px 20px 0 0;display:inline-block} .demo--radio{display:none} .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1} .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px} .demo--checkbox.demo--radio...
css cursor 的可选值（鼠标的各种样式）
style.cursor 的可选值（鼠标的各种样式） crosshair; 十字准心 The cursor render as a crosshair 游标表现为十字准线 cursor: pointer; cursor: hand; 写两个是为了照顾IE5，它只认hand。 手 The cursor render as a pointer (a hand) that indicates a link 游标以暗示(手指)的形式来表明有一个连接 cursor: wait; 等待/沙漏 The cursor indicates that the program is busy (often a watch or an hourglass) 游标暗示当前程序正忙(一般为一块表或是一个沙漏) cursor: ...
CSS里padding和width的问题
最近遇到一个问题：padding在ie10+，chrome,ff上不占宽度，在IE9下面占宽度。试了很多办法无解，最后百度得知一解决方法。下面详细说明： 情况一 在一个block元素上使用padding后元素实际的宽度会增加，这是一个常识。 这本来是一个很浅显的道理，但许多初学者考虑的时候却觉得很怪异。 我这里按自己的解释来说明一番。 给个假设情况：一个width：10px的元素，padding：10px； 那么实际宽度就是width+padding-left+padding-right=30px; 假如说padding对宽度无影响，那么width是10px；但是padding在横向的宽度是20p...
CSS浏览器兼容
一，由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据...
CSS重置CSS多浏览器兼容
这一块CSS代码重置适合所有的浏览器以防止你的CSS代码不一致导致的兼容性问题 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline...
你不得不收藏的30个CSS代码片段
CSS 是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题， 在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的； Css Reset by Eric Meyer...
如何写兼容所有浏览器的CSS
如何写出兼容大部分浏览器的CSS 代码 前阵子一直在从事b/s 项目的开发，在css 方面有一些心得体会，特写来与大家分享，欢迎大家评论，不过请勿人身攻击啊，因为在前几年我也写过一篇文章：[原]兼容浏览器的布局CSS心得体会 楼下有很多人的评论： 就让我继续毁人吧。 1：使用Firefox 当主开发浏览器 为什么我推荐使用firefox 做为主开发浏览器, 首先目前市场上浏览器很多，ie6 + ,firefox ,opera,chrome,qq 浏览器，360浏览器，搜狗浏览器… 为什么我把qq 浏览器，360浏览器，搜狗浏览器 这些也算进去,是因为...