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>

水平居中的方法

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

垂直居中的方法

position: absolute; top: 50%; transform: translateY(-50%);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标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验