CSS学习记录

持续记录中…

版本管理

v1.0.1

• 2021.7.1 版本更新
• 18-23

v1.0.0

• 2021.4.24
• 1-17

1、outline：

outline:#00FF00 dotted thick;

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

2、-webkit-font-smoothing

-webkit-font-smoothing: antialiased; /*chrome、safari*/

-moz-osx-font-smoothing: grayscale; /*firefox*/

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。

3、-moz-osx-font-smoothing

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

作用同上，上面是WebKit的实现，这个是FireFox的实现。

4、-webkit-text-size-adjust

-webkit-text-size-adjust: 100%;

此属性作用于mobile，用于防止iPhone在竖屏转横屏时放大文字。

5、-webkit-tap-highlight-color

-webkit-tap-highlight-color: transparent;

去掉点击事件后出现的高亮的阴影

6、appearance

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

去掉灰色背景

7、width:fit-content

width:-moz-fit-content;

设置之后div的宽度为刚好包裹住内容的宽度；
配合margin:auto;使用可以设置元素居中；由于兼容性不好，用的时候需要加上前缀。

8、offset

• offsetLeft：元素相对于定位父级左内框的距离;
• offsetTop: 元素相对于定位父级顶部内框的距离。
• offsetWidth: 元素在水平方向上占用的空间大小，无单位(以像素px计);
• offsetHeight: 表示元素在垂直方向上占用的空间大小，无单位(以像素px计)。包括滚动条的宽度。

tips：偏移量属性都是只读的

9、background-size

• background-size: length|percentage|cover|contain;
  • length: 宽 高，只设置一个值，第二个为auto
  • percentage: 同上，但是是计算相对于背景定位区域的百分比
  • cover: 保持纵横比缩放成完全覆盖的最小大小
  • contain: 保持纵横比缩放成适合背景的最大大小

background-image: url(../ui-img/footerBg.png);
background-size: 100% 2.4rem;
background-repeat: no-repeat;

10、修改input的placeholder样式

::-webkit-input-placeholder {
    color: red;
    font-size: 20px;
    font-weight: bolder;
}

11、去除input的focus的外边框

outline: none;

12、处理单选按钮

<input class="radio-type" id="radio-agree" type="radio" value="agree" name="agree">

// input 去除选中后丑陋的黑色边框
input[type=radio]:focus {
    outline: none;
    border: none;
}

// 未选中时的样式
.radio-type {
    width: 8px;
    height: 8px;
    appearance: none; // 去除原有样式
    position: relative;
}

// 未选中时的样式
.radio-type:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid #878787;
    display: inline-block;
    vertical-align: middle;
}

// 选中时的样式
.radio-type:checked:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid #06cd8e;
    display: inline-block;
    background: #ffffff;
}

.radio-type:checked:after {
}

.radio-type:checked+p {
    color: #01a772;
}

13、表格处理

• 表格圆角

    border-collapse: separate;

• 表格内容和边框间距

    border-spacing: 0;

14、滚动条样式优化

/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0);
    background: rgba(129, 167, 214, 0.1);
    border: radius 8px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(34, 95, 173, 0.8);
    // background: rgba(6, 205, 142, 0.8);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(34, 95, 173, 0.2);
}

15、超出部分…表示

div {
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}

16、resize

• 多行文本输入框设置为none后右下角不可拖动

resize: none;

17、响应式element表格

<!--绑定height-->
<el-table
        :data="tableData"
        :height="tableHeight"
        :span-method="objectSpanMethod"
        border
        style="width: 100%;"
      >

<!--在data中绑定tableHeight，并定义一个screenheight去记录页面内高度-->
data () {
    return {
      tableData: [],
      tableHeight: '500',
      screenHeight: window.innerHeight,
   
<!--监听屏幕大小变化，并将变化后的页面高度赋值给screenHeight   -->
mounted () {
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight
        this.screenHeight = window.screenHeight
      })()
    }
  },
  
<!--监听screenHeight的值变化，一旦改变实时改变tableHeight-->
watch: {
    screenHeight (val) {
      this.screenHeight = val
      this.tableHeight = this.screenHeight - 240
    }
  },
  
<!--在created初始化页面时计算tableHeight-->
created () {
    this.tableHeight = window.innerHeight - 240
  }

18、滚动条隐藏

// 在需要滚动的dom上加如下伪类
::-webkit-scrollbar {display:none;}
// 或者
::-webkit-scrollbar {width: 0;}

19、flex布局

• 弹性布局
• 所有浏览器均支持
• 任何容器都可以指定为flex布局
• 行内元素的flex布局：display: inline-flex
• Webkit内核的浏览器，必须加上-webkit前缀

.box {
    display: -webkit-flex; /* Safari */
    display: flex;
}

• 设为flex布局以后，子元素的float、clear和vertical-align属性都会失效
• 采用flex布局的元素，称为flex容器，他的所有子元素称为flex项目
• 容器的两根轴：水平的主轴、垂直的交叉轴
• 项目默认沿主轴排列

---

容器的属性

flex-direction

• 决定主轴的方向
• row：（默认值）左到右
• row-reverse：右到左
• column：上到下
• column-reverse：下到上

.box {
    flex-direction: row|row-reverse|column|column-reverse;
}

flex-wrap

• 项目在一条轴线上排不下的换行情况
• nowarp：（默认）不换行
• wrap：换行第一行在上方
• wrap-reverse：换行，第一行在下方

.box {
    flex-wrap: nowrap|wrap|wrap-reverse;
}

flex-flow

• 是flex-direction和flex-wrap的简写形式

.box {
    flex-flow: <flex-direction> || <flex-wrap>;
}

.box {
    flex-flow: row nowrap;
}

justify-content

• flex-start：（默认值）左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比与边框的间隔大一倍

.box {
    justify-content: flex-start|flex-end|center|space-between|space-around;
}

align-items

• 项目在交叉轴上如何对齐
• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline：项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

.box {
    align-items: flex-start|flex-end|center|baseline|stretch;
}

align-content

• 定义了多根轴线的对齐方式，如果只有一根轴线不起作用
• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• cener：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch：（默认值）轴线占满整个交叉轴

.box {
    align-content: flex-start|flex-end|center|space-between|space-around|stretch;
}

---

项目的属性

order

• 定义项目的排列顺序
• 数值越小，排列越靠前，默认0

.item {
    order: <integer>;
}

flex-grow

• 定义项目的放大比例
• 默认0，即如果存在剩余空间，也不放大
• 如果所有项目的flex-grow属性都为1，则他们将等分剩余空间（如果有的话），如果有一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.item {
    flex-grow: <number>; /* default 0 */
}

flex-shrink

• 定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小
• 如果所有项目的flex-shrink都为1，空间不足时都将等比例缩小
• 如果一个项目的flex-shrink为0，其他都为1，则为0的项目不缩小
• 负值无效

.item {
    flex-shrink: <number>; /* default 1*/
}

flex-basis

• 定义了在分配多余空间之前，项目占据的主轴空间
• 默认为auto，即项目的本来大小
• 可以设为width或height一样的值，即项目将占据固定空间

.item {
    flex-basis: <length> | auto; /* default auto */ 
}

flex

• 是flex-grow，flex-shrink和flex-basis的简写，默认值 0 1 auto
• 后两个属性可选
• 快捷值：auto（1 1 auto）和none（0 0 auto）
• 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

.item {
    flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

align-self

• 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性
• 默认值auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
• 该属性除了auto,其他6个值和align-items属性完全一致

20、px、em、rem

绝对长度

绝对长度单位是一个固定的值，反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖环境（显示器、分辨率、操作系统）
cm

• 厘米

mm

• 毫米

in

• 英寸（1in = 9px = 2.54cm）

pt

• point，大约1/72in

pc

• pica，大约12pt，1/6英寸
• 1pc=12pt

px

• 1px = 1/96th of 1in
• 像素，相对长度单位，相对于显示器屏幕分辨率
• IE无法调整那些使用px作为单位的字体大小
• 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位
• firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器（或内核）
• 像素或许被认为是最好的设备像素，而这种像素长度和你在显示器上看到的文字屏幕像素无关
• px实际上是一个按角度度量的单位

---

相对长度

em

• 相对长度单位
• 相对于当前对象内文本的字体尺寸
• 如果当前行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸
• em的值不是固定的
• em会继承父级元素的字体大小

注意：

• 任何浏览器的默认字体高都是16px，1em=16px
• 为简化运算，需要在body选择器中声明font-size=62.5%
• 这样10px=1em，将原来的px除以10，然后换上em作为单位
• 重新计算那些被放大的字体的em数值，避免字体大小的重复声明

rem

• CSS3新增的相对单位
• 相对大小，相对的只是HTML根元素
• 优点：集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体逐层复合的连锁反应
• 除了IE8及IE8以下的版本，均已支持rem
• 对于不支持的浏览器，应对方法也很简单，多写一个绝对单位的声明，这样就可以优雅降级

p {font-size:14px;font-size:.875rem;}

• 注意：选择什么自提单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果考虑兼容，就使用px或者两者同时使用
• 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
• 对于需要适配各种移动设备，使用rem，例如只需要适配iphone和ipad等分辨率差别挺大的设备

vw

• viewpoint width，视窗宽度
• 1vw=视窗宽度的1%
• 主流浏览器主要版本支持

vh

• viewpoint height，视窗高度
• 1vh=视窗高度的1%
• 主流浏览器主要版本支持

vmin

• vw和vh中较小的那个
• 主流浏览器主要版本支持

vmax

• vw和vh中较大的那个
• IE和safari浏览器不支持

21、字体大小随屏幕变化（rem布局）

• 使用js动态的改变html的字体大小，来保证最初设计图中每个元素尺寸比例不变，以适用于不同尺寸的设备能够正常显示

新建rem.js

// rem.js
(function (doc, win) {

      var docEl = doc.documentElement,
    
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    
        recalc = function () {
    
    var clientWidth = docEl.clientWidth;
    
    if (!clientWidth) return;
    
    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
    
    console.log(docEl.style.fontSize)
    
        };
    
    if (!doc.addEventListener) return;
    
    win.addEventListener(resizeEvt, recalc, false);
    
    doc.addEventListener('DOMContentLoaded', recalc, false);
    
})(document, window);

在main.js中引入rem.js

import rem from './common/js/rem'

注意：这里的1920和100可以根据需要自行调整，1920可替换成你的设计图的宽度，100的话，便于计算，这样你在设计图中的200px直接除以100得到的2rem就是你需要给dom设置的大小

• docEl.style.fontSize = 100 * (调试设备宽度 / 设计图宽度) + ‘px’;

• 在写页面的过程中保持 调试设备宽度 等于 设计图宽度 就可以。

22、display:contents;

• 设置了此属性的元素本身不会被渲染，但是子元素能正常渲染
• 作用：充当无语义的包裹框，让代码更加符合语义化
• 类似于react的fragment，vue的template
• 不会渲染其背景、边框和内边距，但颜色、字体等继承的属性还是会对其子元素产生效果。( 盒子设置了background border padding width height 等属性会失效 )

23、calc失效

• 注意！！！calc()动态计算长度，必须在运算符的前后各保留一个空格，否则不会起作用
• 任何长度值都可以用calc计算
• 支持运算符：+ - * /
• 使用标准的数学运算优先级