2021.11.22 日报 用户界面样式，css三角，文字溢出部省略号显示，布局技巧与css初始化

css三角

设定盒子宽高为0.border: 10px tansparent solid；想要哪个三角就给哪个三角设定颜色

用户样式

1. 鼠标样式cursor：（default小白默认，move十字架 pointer 小手 not-allowed禁止 text文本）光标在该盒子上时显示的样式
2. 表单边框表单边框；outline：none 去掉选中文本框时候边框变蓝
3. 取消文本框右下角拖拽reset：none 取消文本域右下角的拖拽文本域（文本域两个标签最好在一行）

对齐

vertical- align（只有行内元素和行内块元素有这种属性） ：baseline 基线对其（元素在父元素基线对齐）
top顶部对齐 元素放在父元素顶部对齐。bottom底部对齐 （放在父元素底部）middle中线对齐 （放在父元素中间）（是文字移动）（针对行内和行内块元素）（使文字表单图片实现对齐效果）图片底部有小的空白缝隙解决方案：修改样式vertical-align top bottpm middle 或把元素转换成块级元素

文字溢出部分用省略号显示

1.单行文本显示：white-space：nowrap（强制一行显示）（默认normal自动换行）然后overflow：hidden （溢出部分隐藏）text- overflow：ellipsis；（用省略号代替溢出部分）
2.多行文字显示：overflow：hidden；text- overflow：ellipsis；display：webkit-box；（转换成弹性盒子）-webkit-line-clamp：2；（限制一个块元素显示的文本的行数）-webkit-box-arient：vertical；（设置或者检索伸缩盒子对象的子元素的排列方式）

布局技巧

1.两个盒子浮动造成边框重合变粗：使用marginleft：-边框宽度，使边框完全重合，视觉上边框宽度不变.
2.使鼠标经过某个盒子四个边框变色：如果盒子没有定位，则鼠标经过时候增加定位，如果有定位那么增加层级.
3.快速布局一个大盒子里设定一个小盒子，小盒子浮动后不会遮住大盒子里其他文字，所以其他文字不用设定宽高右浮动.
4.给父盒子添加text align- center其子元素全部都会水平居中.
5.css三角强化.当下边框设定宽度为0px时候，下半部分没有撑开，导致正方形只保留上面1/2.

css初始化.

主要：给所有元素设定内外边距0。li清除圆点.img：border：0（照顾ie低版本浏览器，因为img旁边有链接a的话会有空隙），vertical- align：middle button：cursor：pointer.
链接a：text- decoration ：none。body：-webkit-font-smoothing：antialiased；（页面文字清除锯齿）。清除浮动.