CCS笔记

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

css外部样式表

"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水平垂直居中

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

鼠标形状

"cursor:auto">auto

"cursor:crosshair">crosshair

"cursor:default">default

"cursor:e-resize">e-resize

"cursor:help">help

"cursor:move">move

"cursor:n-resize">n-resize

"cursor:ne-resize">ne-resize

"cursor:nw-resize">nw-resize

"cursor:pointer">pointer

"cursor:progress">progress

"cursor:s-resize">s-resize

"cursor:se-resize">se-resize

"cursor:sw-resize">sw-resize

"cursor:text">text

"cursor:w-resize">w-resize

"cursor:wait">wait

水平居中的方法

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

画三角形

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！