一些CSS小技巧

Posted charlotteeeeeee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一些CSS小技巧相关的知识,希望对你有一定的参考价值。

参考及推荐:前端优秀实践不完全指南

1:左边定宽(250px),右边宽度自适应

flex:

.g-app-wrapper {
    display: flex;
    min-width: 1200px;
}
.g-sidebar {
    flex-basis: 250px;
    margin-right: 10px;
}
.g-main {
    flex-grow: 1;
}

float:

.g-app-wrapper{
    width:100%;
}
.g-app-wrapper.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.g-sidebar {
    width: 250px;
    float:left;
}
.g-main {
    margin-left: 250px;
}

2:页面中可适当添加不可选中内容,比如按钮等

.btn{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

3:鼠标使用情况下去除元素focus,键盘情况下保留focus

input:focus {
  outline: 1px solid red;
}
input:focus:not(:focus-visible) {
  outline: none;
}

以上是关于一些CSS小技巧的主要内容,如果未能解决你的问题,请参考以下文章

CSS文字处理实用小技巧总结

VS中添加自定义代码片段——偷懒小技巧

CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

20个让你效率变的更高的CSS代码小技巧!

记录下最近写前端的一些小技巧

2018-05-22 CSS 左右布局左中右布局以及一些小技巧