20 个常用的 CSS 技巧 http://www.phpxs.com/code/1009945/
用 max-width 来防止图片撑破容器
css 代码
- img {
- display:inline-block;
- max-width: 100%;
- }
用 ###pointer-event 来禁用事件
该属性可以做以下事:
[ol]
[li] 阻止任何点击动作的执行 [/li]
[li] 使链接显示为默认光标 (cursor:default)[/li]
[li] 阻止触发 hover 和 active 状态 [/li]
[li] 阻止 JavaScript 点击事件的触发 [/li]
[/ol]
css 代码
- // 使用该类, 任何点击事件将无效
- .disabled { pointer-events: none; }
用 ###overflow 来清楚浮动
overflow 除了定义溢出元素内容区的内容会如何处理外, 还可以创建块格式化上下文, 清除浮动.
html 代码
- <div class="clearfix">
- <div class="left">left</div>
- <div class="right">right</div>
- </div>
css 代码
- .clearfix {
- overflow: hidden;
- }
用 ###user-select 来禁用文本选中
IE6-9 不支持该属性, 可以通过给 body 添加 onselectstart="return false;" 的内联 JavaScript 语句搞定.
css 代码
- body{
- user-select: none; // 页面中的文本不能被选中
- }
- input,textarea,[contenteditable] {
- caret-color: red;
- }
用 ###table-layout 来控制表格单元格宽度
由于表格单元格的宽度根据其内容进行调整, 也许你设置了表格的宽度, 但是不起作用;
刨根揭底, 是因为表格有个叫做 table-layout 的属性, 其浏览器默认值是 auto 在作怪.
当我们把这个值设置为 fixed 的时候, 给 th/td 标签设置的宽度就起作用了.
css 代码
- table {
- table-layout: fixed;
- width: 100%;
- }
用 ###:valid :invalid 来做表单及时验证
[ol]
[li]:required 伪类指定具有 required 属性的表单元素 [/li]
[li]:valid 伪类指定一个通过匹配正确的所要求的表单元素 [/li]
[li]:invalid 伪类指定一个不匹配指定要求的表单元素 [/li]
[/ol]
html 代码
- <div class="container">
- <div class="row" style="margin-top: 2rem;">
- <form>
- <div class="form-group">
- <label>name</label>
- <input type="text" required placeholder="请输入名称">
- </div>
- <div class="form-group">
- <label>email</label>
- <input type="email" required placeholder="请输入邮箱">
- </div>
- <div class="form-group">
- <label>homepage</label>
- <input type="url" placeholder="请输入博客 url">
- </div>
- <div class="form-group">
- <label>Comments</label>
- <textarea required></textarea>
- </div>
- </form>
- </div>
- </div>
css 代码
- .form-group {
- width: 32rem;
- padding: 1rem;
- border: 1px solid transparent;
- }
- .form-group:hover{
- border-color: #eee;
- transition: border .2s;
- }
- .form-group label {
- display: block;
- font-weight: normal;
- }
- .form-group input,.form-group textarea {
- display: block;
- width: 100%;
- line-height: 2rem;
- padding: .5rem .5rem .5rem 1rem;
- border: 1px solid #ccc;
- outline: none;
- }
- .form-group input:valid ,.form-group textarea:valid {
- border-color: #429032;
- box-shadow: inset 5px 0 0 #429032;
- }
- .form-group input:invalid ,.form-group textarea:invalid {
- border-color: #D61D1D;
- box-shadow: inset 5px 0 0 #D61D1D;
- }
用 ###:target 来实现折叠面板
html 代码
- <div class="container">
- <div class="row" style="margin-top: 2rem;">
- <div class="t-collapse"><a class="collapse-target" href="#modal1">target 1</a>
- <div class="collapse-body" id="modal1">
- <a class="collapse-close" href="#">target 1</a>
- <p>
css3 明确规定了伪类用一个冒号: 来表示, 而伪元素则用两个冒号:: 来表示.
伪类更多的定义的是状态, 如: hover, 或者说是一个可以使用 CSS 进行修饰的特定的特殊元素, 如: first-child
常见伪类::hover :active :focus :visited :link :lang :first-child :last-child :not
- </p>
- </div>
- </div>
- <div class="t-collapse"><a class="collapse-target" href="#modal2">target 2</a>
- <div class="collapse-body" id="modal2">
- <a class="collapse-close" href="#">target 2</a>
- <p>
伪元素简单来说就是不存在于 DOM 文档树中的虚拟的元素, 它们和 HTML 元素一样, 但是你又无法使用 JavaScript 去获取, 如: before
常见伪元素:::before ::after ::first-letter ::first-line
- </p>
- </div>
- </div>
- </div>
- </div>
scss 代码
- .t-collapse {
- border: 1px solid #ccc;
- margin-top: -1px;
- &:first-child {
- margin-top: 0;
- }
- .collapse-target,.collapse-close {
- cursor: pointer;
- height: 3rem;
- line-height: 2rem;
- padding: .5rem 2rem;
- text-decoration: none;
- user-select: none;
- background: #eee;
- }
- >.collapse-target {
- display: block;
- }
- >.collapse-body {
- position: relative;
- display: none;
- padding: 2rem;
- .collapse-close {
- display: none;
- position: absolute;
- top: -3rem;
- width: 100%;
- left: 0;
- }
- &:target {
- display: block;
- .collapse-close {
- display: block;
- border-bottom: 1px solid #ddd;
- }
- }
- }
- }
用 ###:not 来排除其他选择器
用以设置表单元素在 readonly 和 disabled 状态之外的 hover 等状态, 以便于当元素在 readonly 和 disabled 时, 元素不具有 hover 状态.
Scss 代码
- @mixin buttonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) {
- color: $color;
- border-color: $border;
- background-color: $background;
- &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) {
- &:hover,
- &:active {
- color: $hoverColor;
- border-color: $hoverBorder;
- background-color: $hoverBackground;
- }
- }
- }
用 ###:nth-child(even/odd) 来实现隔行变色
Scss 代码
- ul {
- &.odd {
- >li:nth-child(odd) {
- background: red;
- }
- }
- &.even {
- >li:nth-child(even) {
- background: green;
- }
- }
- }
用 ###::selection 来美化选中文本
css 代码
- ::selection{
- color: #fff;
- background-color: #6bc30d;
- }
用 ###::placeholder 来美化占位符
css 代码
- input::-webkit-input-placeholder{
- color: #f00;
- }
- input::-moz-placeholder{
- color: #f00;
- }
- input:-ms-input-placeholder{
- color: #f00;
- }
用 ###::first-letter 来实现段落首字下沉
css 代码
- p::first-letter{
- font-size: 6em;
- line-height: 1;
- float: left;
- }
用 ###::first-line 来特殊标记段落第一行
css 代码
- p::first-line{
- color: red
- }
用 ###font-size:0 来清除间距
html 代码
- <div class="items">
- <div class="item">1</div>
- <div class="item">2</div>
- <div class="item">3</div>
- <div class="item">4</div>
- </div>
Scss 代码
- *{
- box-sizing: border-box;
- }
- .items {
- font-size: 0;
- > .item {
- display: inline-block;
- width: 25%;
- height: 50px;
- border: 1px solid #ccc;
- text-align: center;
- line-height: 50px;
- background-color: #eee;
- font-size: 16px; // 不要忘了给子元素设置字号
- }
- }
来源: http://www.qdfuns.com/article/47113/f61186cc48e057038e6f39ef212b24f3.html