CSS-05（pink老师课程笔记）

精灵图

为了减少服务器接收和发送请求的的次数

background-position

一般情况下，向上向左均是负的

background: url(images/icons.png) no-repeat -1103px -333px;

字体图标

展示为图标，本质为文字

结构样式简单的使用字体图标，复杂的使用精灵图

字体图标追加（.json）

CSS三角

.box2 {

​ width: 0;

​ height: 0;

​ border: 50px solid transparent;

​ border-left-color: orange;

​ }

用户界面

鼠标样式cursor

default：小白（默认）

pointer：小手

move： 移动

text：文字

not-allowed：禁止

表单轮廓outline

outline：0；

outline：none；

取消表单轮廓线

防止拖拽文本域resize

resize：none；

vertical-align

针对行内或行内块元素，使其垂直对齐

场景：图片和文字垂直对齐

baseline：默认。放置在父元素的基线上

top：与行内最高元素的顶端对齐

middle：放置在父元素的中部

bottom：与行内最低元素的顶端对齐

bug：图片底部空白缝隙

原因：默认基线对齐

方法1：vertical-align:botom/middle/top

方法2：display:block

溢出文字省略号显示

单行文本

三个条件：

强制一行

white-space：nowrap；默认自动换行normal

溢出隐藏

overflow：hidden；

省略号代替

text-overflow：ellipsis；

多行文本

布局技巧

margin负值

消除相邻盒子边框叠加的问题

文字围绕浮动元素

行内块元素

父盒子添加text-decoration：center；则父盒子内的所有元素均水平居中。

三角强化

直角三角形：bottom去掉，top加大

.box2 {

​ width: 0;

​ height: 0;

​ border: 50px solid transparent;

​ border-right-color: orange;

​ border-style: solid;

​ border-width: 100px 50px 0 0;

​ }

CSS初始化

/* 清楚所以标签的内外边距 */

`* {`

margin: 0;

padding: 0;

}

/* em和i斜体文字不倾斜 */

em,

i {

font-style: normal;

}

/* 去掉li的小圆点 */

li {

list-style: none;

}

/* 取消图片底部的空白缝隙 */

img {

vertical-align: middle;

}

/* 鼠标经过button变为小手 */

button {

cursor: pointer;

}

/* 链接a去掉下划线，颜色为666 */

a {

color: #666;

text-decoration: none;

}

/* 点击a时颜色为红色 */

a:hover {

color: red;

}