1. CSS三角

html文件内容如下
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
        .box {
            width: 0px;
            ;
            border: 10px solid transparent;
            border-top-color: pink;
    </style>
</head>
<div class="box"></div>
</body>
</html>
显示效果如下 
2. 界面样式
 
界面样式就是更改一些用户操作样式，提高用户体验 
更改用户的鼠标样式
表单轮廓
防止表单域拖拽 
2.1 cursor鼠标光标形状
 
设置在对象上移动的鼠标指针，采用何光标形状。示例如下 
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
    </style>
</head>
    <li style="cursor: default">我是小白光标形状</li>
    <li style="cursor: pointer">我是小手光标形状</li>
    <li style="cursor: move">我是移动光标形状</li>
    <li style="cursor: text">我是文本光标形状</li>
    <li style="cursor: not-allowed">我是禁止光标形状</li>
</body>
</html>
显示效果如下
  
2.2 input输入框输入文字时不改变边框颜色
 
当我们选择input输入框，进行文字输入的时候，边框会改变颜色。如果想让边框不改变颜色，可以设置outline: none 
示例如下： 
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
    </style>
</head>
<input type="text" style="outline: none" />
</body>
</html>
2.3 textarea不能拖拽改变大小
 
textarea默认可以在右下角进行拖拽，改变输入框的大小。但是会影响布局，所以需要设置不能拖拽 
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
    </style>
</head>
<textarea style="resize: none">我是多行文本输入标签</textarea>
</body>
</html>
3. vertical-align属性应用
 
只针对于行内元素或者行内块元素有效。经常用于设置图片或表单(行内块元素)和文字的垂直对齐方式 

 vertical-align的可选值为：1. bottom: 图片的底线和文字的底线对齐，2. baseline：默认，图片的底线和文字的基线对齐，3. middle: 图片的中线和文字的中线对齐，4. top：图片的顶线和文字的顶线对齐 
示例如下： 
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
        img {
            vertical-align: middle;
    </style>
</head>
<img src="images/baidu.png">百度一下
</body>
</html>
显示效果如下
  
4. 溢出的文字省略号显示
 
4.1 单行文本溢出显示省略号
 
示例如下： 
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /*1. 先强制一行内显示文本, 默认normal自动换行*/
            white-space: nowrap;
            /*2. 超出的部分隐藏*/
            overflow: hidden;
            /*3. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
    </style>
</head>
    我是一长串文字，此处省略一万字
</body>
</html>
显示效果如下
  
4.2 多行文本溢出显示省略号
 
必须严格控制盒子的高度 
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
        div {
            width: 100px;
            height: 46px;
            background-color: pink;
            /*1. 超出的部分隐藏*/
            overflow: hidden;
            /*2. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
            /*3. 弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*4. 限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp: 2;
            /*5. 设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
    </style>
</head>
    我是一长串文字，此处省略一万字
</body>
</html>
显示效果如下
  
5. CSS初始化
 
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，所以需要进行CSS初始化 
CSS初始化参考如下 
    margin: 0;
    padding: 0
em, i {
    font-style: normal
    list-style: none
img {
    border: 0;
    vertical-align: middle
button {
    cursor: pointer
    color: #666;
    text-decoration: none
a:hover {
    color: #c81623
button, input {
    /*"\5B8B\4F53"是宋体的Unicode编码*/
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
body {
    /*CSS3抗锯齿形，让文字显示的更清晰*/
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
.hide, .none {
    /*隐藏元素*/
    display: none
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
.clearfix {
    *zoom: 1
                    vertical-align的可选值为：1. bottom: 图片的底线和文字的底线对齐，2. baseline：默认，图片的底线和文字的基线对齐，3. middle: 图片的中线和文字的中线对齐，4. top：图片的顶线和文字的顶线对齐。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，所以需要进行CSS初始化。当我们选择input输入框，进行文字输入的时候，边框会改变颜色。textarea默认可以在右下角进行拖拽，改变输入框的大小。CSS初始化参考如下。
				去掉chrome(谷歌)浏览器默认的input、textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 
1、使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框，我以前一直以为这是chrome的特性，没法去掉，原来是css的效果，outline这个属性。 你可以用下面的css代码去掉所有元素的边框： 
*:focus {outline: none;} 用下面的代码去掉你要去掉的元素的边框： 
.nohighlight:focus { outline:none; } 
textarea文本域左边的文字一直都是在textarea的左下边，看起来不美观 
设置一个属性就可以搞定 
复制代码代码如下: <label xss=removed>备注信息：</label><textarea rows=”5″ cols=”65″></textarea> 
第二个问题 
textarea文本域明明设置好的cols和rows但是还是能改变大小 
同样的一个属性就可以搞定 
复制代码代码如下: <textarea rows=”5″ cols=”65″ style=”resize:none;”></tex
轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none; }
防止拖拽文本域 resize
实际开发中，我们文本域右
				文章目录溢出的文字省略号显示单行文本溢出显示省略号多行文本溢出显示省略号常见布局技巧margin负值的运用文字环绕浮动效果行内块的应用CSS三角强化CSS初始化
溢出的文字省略号显示
分为两种情况：
单行文本溢出显示省略号
多行文本溢出显示省略号
单行文本溢出显示省略号
三个步骤：
强制一行内显示文本
超出的部分隐藏
文字用省略号替代超出的部分
代码实现：
/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐
<video width="320" height="240" controls="controls">
但是有的时候发现设置了视频的高度却并没有发生变化，我们可以设置其父元素的宽高，让video填充满父元素。只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。
object-fit语法
object-fit:fill | contain | 
const textarea = document.getElementById("myTextarea");
const button = document.getElementById("myButton");
textarea.addEventListener("input", () => {
  if (textarea.value.trim().length > 0) {
    button.removeAttribute("disabled");
    button.style.backgroundColor = "blue"; // 点击后按钮变蓝色
  } else {
    button.setAttribute("disabled", "disabled");
    button.style.backgroundColor = "gray";
以上是具体实现方法，您可以根据自己的需要进行调整。如果还有其他问题，请随时联系我，我会尽快回复您。