元素的显示与隐藏

类似网站广告，可以关闭和显示

本质：让一个元素在页面中隐藏或者显示出来

*display显示隐藏

display 属性用于设置一个元素应如何显示

  • none ：隐藏对象
  • block ：除了转换为块级元素，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置

visibility可见性

visibility 属性用于指定一个元素应可见还是隐藏

  • visible ：元素可视
  • hidden ：元素隐藏

visibility 隐藏元素后，继续占有原来的位置

overflow溢出显示与隐藏

overflow 属性指定了如果内容溢出一个元素的框时，会发生什么

  • visible ：默认元素可视
  • hidden ：不显示超过对象尺寸的内容
  • scroll ：溢出的部分显示滚动条
  • auto ：此为body对象和textarea的默认值，在需要时剪切内容并添加滚动条

如果有定位的盒子，慎用hidden，因为它会隐藏多余部分

CSS高级技巧

精灵图（sprites）

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度

将网页中的一些小背景图像整合到一张大图中，服务器只需要一次请求

  • 移动背景图片位置，此时可以使用background-position
  • 移动的距离也就是这个目标图片的x和y坐标，注意是网页中的坐标
字体图标（iconfont）

主要用于显示网页中通用、常用的一些小图标

字体图标展示的是图标，本质属于字体

  • 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以随意改变颜色、产生阴影、透明效果、旋转
字体图标的下载
字体文件引用
/* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
CSS三角
  1. 创建无宽高的盒子
  2. 设置盒子全边框，使正方形盒子边框透明：border: 50px solid transparent;
  3. 选择某一方向边框可视化
  4. CSS原生三角制作：border-left-color: pink;
CSS用户界面样式
鼠标样式cursor
li {
    cursor :pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值 描述
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
轮廓线outline去除

轮廓线特指填写表单时文本框的蓝色边框

input {
    outline : none;
}
防止拖拽文本域resize

默认文本域可以进行拖动大小尺寸

textarea {
    resize : none;
}
vertical-align属性应用

vertical-align 经常用于设置图片或者表单（行内块元素）和文字垂直对齐

vertical-align : baseline | top | middle | bottom

  • baseline：基线，普通小写英文字母下线
  • top | bottom：文字顶线和底线
  • middle：文字中线

解决图片底部默认空白缝隙问题

bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

  1. 给图片添加 vertical-align : top | middle | bottom
  2. 把图片转换为块级元素 display : block;
溢出的文字省略号显示
单行
  1. 单行文本溢出显示省略号–必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space : nowrap ; (默认normal自动换行)
/*2. 超出的部分隐藏*/
overflow : hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow : ellipsis;
多行

多行文本溢出显示省略号，有较大的兼容性，适合webkit浏览器或移动端

overflow : hidden;
text-overflow : ellipsis;
/*弹性盒子模型显示*/
display : -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp : 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient : vertical;
常见布局技巧
margin负值的运用

margin-left : -1;

各个元素存在边框，；利用margin负值使后置元素覆盖前一个元素，最终使边框相同

  1. 让每个盒子margin往左移动-1px正好压住相邻盒子边框
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

float

行内块的巧妙运用

行内块元素，元素间有间隔，适用于某些方面

CSS三角强化

梯形图片制作

梯形 = 矩形 + 三角形

/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
	border-right: 50px solid skyblue; */
	/* 左边和下边的边框宽度设置为0 */
	/* border-bottom: 0 solid blue;
	border-left: 0 solid green; */
	/* 1.只保留右边的边框有颜色 */
	border-color: transparent red transparent transparent;
	/* 2. 样式都是solid */
	border-style: solid;
	/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
	border-width: 100px 50px 0 0;