CCS笔记

ccs笔记
cascading style sheet
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

css外部样式表

<link rel="stylesheet" type="text/css" href="style.css">

javascript外部引入

<script text="text/javascript" src="external.js"></script>

超出width宽度隐藏，用三个点的省略号显示

.text-hidden {
  width: 50px;
  word-break: break-all;
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
}

div水平垂直居中

<div class="vh-center">
</div>

.vh-center {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

鼠标形状

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

水平居中的方法

1. 行内居中：text-align:center
2. 块级居中：margin: 0 auto;
3. position: absolute; left: 50%; transform: translateX(-50%);
4. display:flex; jsutify-content: center

垂直居中的方法

1. position: absolute; top: 50%; transform: translateY(-50%);
2. display:flex; align-items: center
   3… display:table; display:table-cell; vertical-align: middle;

高度设置
height: calc(100% - 140px); //"+或-"两边要有空格 不然不生效

1rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem

1em
子元素字体大小的em是相对于父元素字体大小

1vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

0.5px的直线
height: 1px;
transform: scale(0.5);

盒模型是css中重要的基础知识，也是必考的基础知识
盒模型的组成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度
box-sizing的使用
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box

画三角形

.triangle { width:0; height: 0; border-width: 100px; border-style: solid; border-color:transparent #0099CC transparent transparent transform: rotate(90deg); /*顺时针旋转90°*/ }

说一下标签的用法
label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验