css补漏笔记

一.text-align 只有对行内级元素生效

　　justify 两端对齐 [ text-align: justify ]

　　[ 最后一行呢就正常不生效,你要强制生效 [ text-align-last : justify ]

二. word-spacing 字与字之间的间距

　　word-spacing : 30px ; 

三. 2个斜体的区别 :

　　font-style : italic; (字体本身有设置过斜体时,显示的斜体)

　　Font-style : oblique (强制斜体)

四. 强制继承性 inherit 例子 : border:inherit;

五. 盒子阴影 [可以设置多个阴影]

　　box-shadow : x轴 y轴 模糊度 [扩散度-可以不写] 颜色 [inset 内扩散,可不懈];
　　box-shadow : 10px 10px 10px [10px] black [inset]

六. 文字阴影 [可以设置多个阴影]

　　text-shadow : x轴 y轴 模糊度 颜色

七. 行内非替换元素 : span a

　　width , height: 不生效
　　padding / border :左右生效,也占据空间 ; 上下看起来生效,但是不占据空间
　　margin : 左右生效,上下不生效

八. background-size

　　background-size : contain; 不压缩,拉伸宽度[保持宽高比]
　　cover : 全屏,部分看不见 [这个用的比较多]
　　100% 100% : 变形

九. 内容滚动,背景跟着滚动

　　background-attachment : loacl ;
　　默认为 : scroll ,还有一个值 : fixed

十. nth-child 和 nth-of-type 的区别 :

　　必须第三个且得是div
　　Div:nth-child(3){}

　　第三个div
　　Div:nth-of-type(3){}

十一. 字体图标 ：

　　1.去字体图标库下载字体 【 注意要免费，不收钱，最好让ui设计 】
　　　　默认下载下来的是ttf字体
　　2.使用字体
　　　　1.将字体放到对应的目录中
　　　　2.通过@font-face来引入字体，并且设置格式
　　　　3.使用字体
　　　　注意 ： @font-face 用于加载一个自定义的字体

　　　　@font-face{
　　　　　　font-family : "hyfont01";
　　　　　　src : url(./fonts/AaJianHaoTi-2.ttf)
　　　　}
　　　　Body{
　　　　　　font-family:"hyfont01"
　　　　}

十二. position

　　将position设置为absolute/fixed , 任何元素都可设置宽高(宽高默认由内容决定)
　　Sticky 是 相对于最邻近的滚动视口

十三.flex

　　1.flex-direction : 修改主轴的方向(默认横)
　　　　row : 从左到右(默认)
　　　　row-reverse : row的反转 (从右到左)
　　　　column : 列变成主轴的方向 (从上到下)
　　　　column-reverse : 列主轴进行反转 (从下到上)

　　2.flex-warp : 换不换行
　　　　nowrap : 不换行 (默认)
　　　　wrap : 换行
　　　　wrap-reverse : 换行 (从下往上排)

　　3.justify-content : 对齐方式
　　　　flex-end : 对齐反一个方向
　　　　center : 居中对齐
　　　　space-between : 两边贴边
　　　　space-around : item之间距离相等,距离两边是半个item的距离
　　　　space-evenly : item之间距离相等,距离两边是整个item的距离

　　4.order 给flex-item排列的顺序,越小排得越前
　　　　order : 3;

　　5.flex-shrink ： 给flex-item压缩的；

　　　　（默认为1，就是会压缩；0就不会） 得flex-container有空位

　　6.flex-item ： 给flex-item拉伸的；

　　　　（默认为0） 得flex-container有空位

 

十四.css函数

　　var : 使用css定义的变量
　　calc : 计算css值,通常用于计算元素的大小或位置
　　blur : 高斯模糊效果
　　gradient : 颜色渐变函数

　　自定义属性 : --  例如 : html{ --main-color:#000 } .box{color : var(--mian-color)}

　　calc(100%-100px)

<div class='box'>
    <img src='../11.jpg>
<div>

.box{
    filter:calc(10px) 偏差越大,图片越模糊
}

        background-image : linear-gradient(to right ,red,blue)   //to right 就是从左到右    //to right top 从左下角到右上角   //45deg 角度

十五 . 媒体查询

　　1.@import 和 媒体查询 结合使用
　　　　例子 : @import url(./css/body_bgc.css)(max-width:800px) 当最大为800的时候才引入

　　2.link + 媒体查询
　　　　例子 : <link ref="stylesheet" media="(max-width:800px)" href="./css/body_bgc.css" >

　　3.@media 方法
　　　　@media (max-width:800px) {
　　　　　　写上...
　　　　}
　　4. Js方法
　　　　使用 Window.matchMedia() 和 MediaQueryList.addListener()方法来测试和监控媒体状态

　　5.多个条件
　　　　小于800,大于500
　　　　@media (max-width:800px) and (min-width:800px) {
　　　　　　写上...
　　　　}

 

十六.手机端

em ： 相对于自己的font-size，如果自己没有设置，那么会继承父元素的font-size
rem ： 相对于html的font-size

像素单位常见的有三种像素名称：
　　1.像素（也叫物理像素）
　　　　指的是 显示器上的真实像素，每个像素的大小是屏幕固定的属性，屏幕出厂以后就不会改变了
　　　　显示器或者手机的时候，提到设备分辨率就是设备像素的大小
　　　　例如 ： iphonex的分辨率 1125 * 2436 指的是设备像素

　　2.设备独立像素（逻辑像素）
　　　　如果面向开发者，我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的
　　　　开发者针对不同的屏幕很难进行比较好的适配，编写程序必须了解用户的分辨率来进行开发
　　　　所有在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念
　　　　比如 ：你购买了一台显示器，在操作系统上是 1920 * 1080 设置的显示分辨率，那么无论你购买的2K，4K的显 示器，对于开发者来说，都是 1920 * 1080 的大小

　　3.css像素
　　　　它默认情况下的等同于设备独立像素（逻辑像素）
　　　　screen.width 得到电脑屏幕的宽度

DPR（逻辑像素/物理像素） ： 可以通过window.devicePixelRatio 获取到
PPI ：一英寸=2.54厘米，1英寸放多少个物理像素。100PPI ： 一英寸放100个物理像素

　　1.视口 viewport
　　　　在浏览器中，我们能看到的就是视口
　　　　fixed就是相对于视口来进行定位的
　　　　在pc端，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个

　　　　在移动端不一样 ： 你的布局视口和你可见的视口不太一样
　　　　　　这是因为移动端的网页窗口往往比较小，可能会希望一个大的网页在移动端可以完整的显示
　　　　　　所以在默认情况下，移动端的布局视口是大于视觉视口的

　　2.移动端视口划分 ；
　　　　A:布局视口 （viewport pc就只有这个视口） 默认情况下，一个pc端在移动端端显示
　　　　　　1.它会按照宽度为980px来布局一个页面的盒子和内容
　　　　　　2.为了显示可以完整的显示在页面中，对整个页面进行缩小
　　　　　　我们把980px布局的这个视口，叫布局视口（布局视口默认宽度980px）

　　　　B:视觉视口 （visual）
　　　　　　手机可见的视口，就叫做视觉视口

　　　　　　为了让布局视口一致，那么久产生了  <meta name='viewport' content='width=device-width' >

　　　　　　设备宽度和布局视口缩放比例1.0   <meta name='viewport' content='width=device-width' initial-scale=1.0>

　　　　　　禁止手动缩放   <meta name='viewport' content='width=device-width' initial-scale=1.0 user-scalable=no>

　　　　　　有些浏览器紧张手动缩放无效，所以还要再加2个   <meta name='viewport' content='width=device-width' initial-scale=1.0 user-scalable=no minimum-scale=1.0 maximum-scale=1.0 >

　　　　C:理想视口 （ideal）

 

十七.移动端适配的方案 ：

lib-flexible.js  [更改html的fontsize的值]

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

 

　　1.rem转换 ：
　　　　第一种 ： 用webpack的postcss-pxtorem

　　　　第二种 ： less/scss
　　　　　　.pxToRem(@px){
　　　　　　　　result: 1rem * (@px / 37.5); //这里的37.5，是看你的设计稿的
　　　　　　}
　　　　　　p{
　　　　　　　　font-size:.pxToRem(14)[result] ;
　　　　　　}

　　　　第三种 ： vscode的插件（ px to rem ）【默认除以75，就是用设计图的750的】-----用的最简单
　　　　　　如何去配置除以75的这个值 ？
　　　　　　点击插件的扩展设置，里面的。root font size 这里就可以设置了（要37.5还是多少，自己设置）

　　2.vw 转换:
　　　　目前更推荐使用vw，vh（rem的已经5年前的了，现在不更新了，vw，vh兼容性更好了）
　　　　第一种 ： 用 webpack的 postcss-px-to-viewport-8-plugin

　　　　第二种 ： less/scss
　　　　　　@vwUnit：3.75。（这里对应的是375的设计稿）
　　　　　　.pxToVw（@px）{
　　　　　　　　result:(@px / @vwUnit) * 1vw
　　　　　　}
　　　　　　.box{
　　　　　　　　font-size:.pxToVw(16)[result]
　　　　　　}
　　　　第三种 ：vscode的插件和上面一样  ---用的最简单

 

 十八.css转化less文件

 十九.去除苹果底部的一横的

height:calc(env(safe-area-inset-bottom) + 50px)

 

 二十. > 箭头的写法

.right{
   position:relative;
   padding-right:8px;
   font-size:16px;
   color:red;
   &::after{
       content:"";
       position:absolute;
       width:10px;
       height:10px;
       top:0;
       bottom:0;
       margin:auto  0;
       border:1px solid red;
       border-top-color:transparent;
       border-left-color:transparent;
       transform:rotate(-45deg);
   }