[TOC] Demo - 淘宝首屏：http://a-1.vip/demo/TB ## :-: <a href="http://www.w3school.com.cn/cssref/css_units.asp">CSS 单位</a> :-:  ## :-: <a href="https://www.runoob.com/cssref/css-functions.html">CSS 函数</a>  ## :-: 去掉button默认样式 ``` border: none; background-color: transparent; outline: none; //消除默认点击蓝色边框效果 ``` ## :-: CSS三件套打点展示 ``` div{ /* 文字溢出禁止换行 */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 文字溢出部分点点... */ text-overflow: ellipsis; } ``` ## :-: CSS文本的对齐 ``` /* 文本·水平居中 */ text-align: center; /* 文本·水平居左 */ text-align: left; /* 文本·水平居右 */ text-align: right; /* 文本·行高(与父级元素一样高时即垂直居中) */ line-height: 35px; /* 定义行内元素在行框内的垂直对齐方式 */ vertical-align: middle; 取值： baseline —— 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 sub —— 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小） super —— 把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小） text-top —— 把当前盒的top和父级的内容区的top对齐 text-bottom —— 把当前盒的bottom和父级的内容区的bottom对齐 middle —— 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐 top —— 把当前盒的top与行盒的top对齐 bottom —— 把当前盒的bottom与行盒的bottom对齐 /* 缩进2个字符的距离 */ text-indent: 2em; /* 调整文字之间的间距 */ letter-spacing: 5px; ``` ## :-: DIV - 水平垂直居中 ``` div 水平居中 div.demo { box-sizing: border-box; width: 450px; height: 450px; border: 1px solid red; margin: 0 auto; } 方法一：未知盒子宽高、 父级元素 position: relative; div.demo { box-sizing: border-box; width: 450px; height: 450px; border: 1px solid red; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 方法二：已知盒子宽高、 父级元素 position: relative; div.demo { box-sizing: border-box; width: 450px; height: 450px; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin-top: -225px; margin-left: -225px; } CSS3.0方法：未知盒子宽高、 父级元素 position: relative; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ``` ## :-: 触发bfc的属性、(解决margin塌陷) ``` /* 绝对定位 */ position: absolute; /* 行级块元素 */ display: inline-block; /* 左浮动、右浮动 */ float: left/right; /* 溢出部分隐藏 */ overflow: hidden; ``` ## :-: float - 清除浮动流 ``` ul::after { /* 设置块级属性 */ display: block; /* 添加空文本内容 */ content: ""; /* 清除浮动流的属性 */ clear: both; } ``` ``` // 添加背景 background: url(../images/jt_l.png) no-repeat; background-position: 22px 13px; ``` ## :-: 禁止文本内容选中 ``` body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ``` ## :-: 关于设置最大/最小宽高，以及滚动条及其样式 ``` div#demo { /* 设置最小高度、宽度 */ min-height: 100px; max-height: 500px; /* 设置最大高度、宽度 */ min-width: 100px; min-width: 500px; /* 超出部分滚动条展示(自适应) */ overflow-y: auto; } /* ········· ········· 设置滚动条的样式 ········· ········· */ div#demo::-webkit-scrollbar { /* 滚动条整体样式 */ /* 高宽分别对应横竖滚动条的尺寸 */ /* 宽度 */ width: 6px; /* 高度 */ height: 0; } div#demo::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */ /* 圆角 */ border-radius: 3px; /*内投影*/ /* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */ /* 背景色 */ background: #d1d4db; } div#demo::-webkit-scrollbar-thumb:hover { /* 滚动条里面小方块 鼠标悬浮样式 */ /* 背景色 */ background: #e2e5ee; } div#demo::-webkit-scrollbar-track { /* 滚动条里的轨道 */ /* 圆角 */ border-radius: 3px; /*内投影*/ /* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */ /* 背景色 */ background: rgb(246, 246, 246); } ``` ## :-: 编辑框(input) ``` input { /* 编辑框(input) 取消轮廓样式 */ outline: none; width: 200px; height: 20px; border: 1px solid #425; border-radius: 5px; padding: 0 5px; } ```