css技巧

css技巧

 

1. :focus {} 用于设置 input框获取焦点的样式,

2. :focus-within:表示一个元素获得焦点，或，该元素的后代元素获得焦点。

form:focus-within {
  background: #ff8;
  color: black;
}

3. :active ,:hover ，按钮激活效果，鼠标放上去的效果。

4.使不固定高度盒子里面文字水平、垂直居中的方法。

1. display: flex;
2. align-items: center;

5. input type=number 去除右侧箭头方法

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}

6. 滚动条样式火狐有兼容性。

7.绝对定位中多个display:inline-block 上下对不齐。

8.  使用 translate兼容性问题。

{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);  
    // 使用translate位移后，在google浏览器中会使盒子模糊。
}

9.解决最小字体不能小于12px的问题，

body, div, fieldset, form, h1, h2, h3, h4, h5, h6, html, p, span {
  -webkit-text-size-adjust: none
}

10. 有横向滚动条的内容被垂直触摸，在ios机上无法滚动页面。可使用：

html,body{
    position:relative;
    -webkit-overflow-scrolling:touch;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-9.select:none;
    -wekit-user-select:none
}

11.click事件在IOS系统上有时失效，给绑定click事件的元素加上cursor：pointer解决。
12.placeholder垂直居中问题：在IOS和Android中显示不同。解决方法是：在保证input输入文本垂直居中的条件下，给placehoder设置padding-top。

13.当祖父元素用overflow属性时，父元素采用transform属性会影响子元素定位position:absolute；导致子元素超出隐藏；建议用其他属性替换transform属性。

14.click事件在IOS系统上有时失效，给绑定click事件的元素加上cursor：pointer解决。

15.解决苹果机滚动卡顿问题

body {
    -webkit-overflow-scrolling: touch;
}

16.文字超出已...方式显示

//一行...
.hide1 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
//两行...
.hide2 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: -moz-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  box-orient: vertical;
  -webkit-box-orient: vertical
}

17. ios若页面走缓存，可以用此方法清除。window.onpageshow = function(event) if (event.persisted) {window.location.reload()}

18.去除一些默认样式 

button, input, select, textarea {
  -webkit-appearance: none
}

button {
  display: block
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400
}
b, em, i, s {
  font-style: normal
}
a, em, img, li, ul {
  list-style: none;
  border: 0;
  text-decoration: none;
  font-style: normal
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, textarea, ul {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box
}

19.不同浏览器兼容性处理

/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
   .input {
    margin-left: -30%;
   }
}
/*firefox*/
@-moz-document url-prefix() {
   .input {
       margin-left: -26%;
   }
}
url()：匹配整个URL；

url-prefix()：匹配文档的URL是否以参数指定的值开头；

domain()：匹配文档的域名是否为参数中指定的域名或者为它的子域名；

regexp()：匹配文档的URL是否和参数中指定的正则表达式匹配.该表达式必须匹配整个URL。

20.使用rem移动端适配方案

@media only screen and (min-width: 320PX) and (max-width: 360PX) {
  html {
    font-size: 21.33px
  }
}
@media only screen and (min-width: 360PX) and (max-width: 375PX) {
  html {
    font-size: 24px
  }
}
@media only screen and (min-width: 375PX) and (max-width: 390PX) {
  html {
    font-size: 25px
  }
}
@media only screen and (min-width: 390PX) and (max-width: 414PX) {
  html {
    font-size: 26px
  }
}
@media only screen and (min-width: 414PX) and (max-width: 640PX) {
  html {
    font-size: 27.6px
  }
}
@media screen and (min-width: 640PX) {
  html {
    font-size: 35px
  }
}

20.如何使文字均匀两边对齐

p {
    text-align: justify;
    text-align-last: justify;
}

21.css原生变量的使用

:root {
    --font_size_12: 12px;
}
.div{
  
    font-size: var(--font_size_12);
}

22.关于继承的使用。

在大多数情况下，我们在设置元素的 border 和 padding 并不希望改变元素的 width,height 值，这个时候我们就可以为该元素设置 box-sizing:border-box;。

我不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing: border-box;。

23.在开发pc端网页时，往往有这样的需求，就是网页放大多少倍后，要使页面布局不会乱。百度的做法是，当网页放大到一定倍数后，让网页横向出现滚动条，这样页面在放大时就不会乱啦。具体代码很简单。

body {
 min-width: 1190px;
}

参考文章：https://juejin.im/post/5cb45a06f265da03474df54e