重头学习html5+css3系列笔记（9）

元素的显示与隐藏

display属性

display: none ;

隐藏元素（注意不是删除），且其不再占有原来的位置

display:block

不仅可以转化为块级元素，同时还有显示元素的意思

visibility可见属性

默认属性为inherit，继承上一个父对象

元素可视：visibility:visible
元素隐藏：visibility:hidden
元素隐藏后，还会占有其原来的位置

overflow溢出

overflow属性值指定了如果内容溢出了一个元素的框（超过其指定的高度及宽度）时，会发生什么
默认属性是visible，不剪切内容也不添加滚动条
hidden:不显示超过元素大小的内容（但是依然存在）
scroll:溢出的部分显示滚动条(内容不溢出时，依然显示滚动条）
auto:溢出时显示滚动条(内容不溢出时，不显示滚动条）
如果有定位的元素，慎用overflow:hidden，否则可能会隐藏我们想要显示出来的内容

精灵图（sprites）

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接收和发送图片请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度
因此，为了有效较少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites, CSS雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图的使用

主要利用background-position属性，将该图片作为背景图片移动适当的位置使某一部分显示出来。

background:url(sprites.png) -182px 0;//参数分别代表x，y

字体图标

使用场景：主要用于显示网页中通用，常用的一些小图标
虽然也可以用精灵图，但考虑到精灵图的以下缺点：

1. 图片本身还是比较大的
2. 图片本身放大或缩小会失真
3. 一旦图片制作完毕想要更换就会非常复杂
   此时，有一种技术出现，即字体图标iconfont
   字体图标展示的是图标，本质属于字体

优点：

1. 轻量级：一个图标字体比一系列的图像要小。一旦字体加载了，图标就会立刻渲染出来，减少了服务器请求（这个不是很明白，那字体图标不需要向服务器一次次的请求吗）后来查阅了资料明白：

当我们需要一个字体图标时，我们浏览器需要向服务器发送请求，服务器收到请求，就会处理后返回请求页面。假如一个字体图标发送一次请求，那我们需要很多个小字体图标，那就会使得大大加重服务器的负担，使其处理能力降低。实际上我们使用字体图标是以文件形式来发送的，可以一次性把
好多字体图标集合在一起的文件访问出来，这样把任务交给了浏览器来处理，每次使用字体图标浏览器可以直接把文件中的字体图标调用出来。这样大大减轻了访问发送请求的次数，减轻服务器的负担。
类似于精灵图的原理

2. 灵活性：本质是文字，可以随意的改变颜色，产生阴影，透明效果，旋转等
3. 兼容性：几乎支持所有的浏览器
   注意，字体图标不能代替精灵技术，遇到复杂的图片时，还是需要精灵图的，遇到一些样式或结构简单的小图标，比如放大镜等，可以用字体图标

字体图标的使用

1. 字体图标的下载(如https://icomoon.io/， 阿里巴巴矢量库）

2. （以第一个网站为例）引入：

             将解压的文件中的fonts放在项目文件夹的根目录下（这些文件可以使得修改图标的样式，不同的文件是为了适配不同的浏览器）
             style中引入引用（复制代码即可）
             html标签中添加小图标
             在css中引入font-family 同时也可以修改其大小颜色等
   

3. 增加图标，只需将文件夹中的.json更新即可

CSS三角

利用边框制作，设置一个有边框，但高度和宽度都为0的盒子，这时每一个边框就会以三角形的样式各占据正方形的1/4，把其余边的颜色设置为透明色即可只出现透明色

 .delta {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-right-color: turquoise;/*注意这个必须写上-color，不能用复合属性而且只写颜色，不然其他为声明的属性会默认为不显示*/
            line-height: 0;
            font-size: 0; /* 照顾兼容性 */
        }

有了宽度和高度后会变成一个梯形

界面样式

什么是界面样式

所谓界面样式，就是用来更改一些用户操作样式，以便提高更好的用户体验

更改用户的鼠标样式 cursor

如 cursor：pointer

属性值	含义
default	小白，默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

表单轮廓线outline

给表单添加outline:0;或outline:none样式之后,就可以去掉默认的蓝色轮廓线了

防止拖拽文本域resize

 textarea{
            resize: none;
        }

注：textarea标签最好写在一行上，如果尾标签换行，那文本域或有较大的空白文本区域

  <textarea name="" id="" cols="30" rows="10"></textarea>

vertical-align属性应用

应用场景

经常用于设置图片或表单（行内块元素）和文字垂直对齐（如之前学堂在线中头像和文字没有在同一水平线上）
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

项目	Value
baseline	默认。元素放置在元素的基线上
top	把元素顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部（最常用）
bottom	把元素的顶端与行中最低的元素的顶端对齐

即分别与文字的基线，顶线，中线，底线对齐

img{
            vertical-align: middle;
        }

图片底部空白

因为图片默认的垂直对齐方式是与基线对齐，不是和底部或中部对齐，所以默认的为文字会留出一部分空间，产生了空白。因此，可以用vertical-align: middle;或vertical-align: top;等来修改其对齐方式，这样会消除图片的边框空白问题
还有一种就是将其声明成块级元素（因为块级元素就没有上述因默认对齐方式而产生的问题），但不推荐使用，会影响对其他元素的布局

溢出文字用省略号显示

单行文本溢出

第一步：强制文字在一行内显示

white-space: nowrap;

该属性的默认值是normal，意思是文字在一行显示不开时会自动换行
声明nowrap后会强制不换行
第二步：溢出的部分隐藏起来

 overflow: hidden;

第三步：溢出时用省略号显示

text-overflow: ellipsis;

多行文本时溢出

我的想法是这样的

            width: 100px;
            height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;

以为默认的文字会换行，然后在高度不够时会溢出，然后我想错了，文本在一行内直接显示为省略号了
后来我又将最后两条注释掉，发现文字直接在一行内溢出到盒子外边了
正确的写法应该是：

            width: 100px;
            height: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

但是我的还是在第一行就隐藏了，为什么。。。。
可能是兼容性的问题
更推荐让后台人员来做？

常见布局技巧

利用margin负值消除边框叠加

当每一个盒子紧密排列时，边框连接处会导致边框长度变长，此时可以加上负外间距使盒子再平移，将边框重叠，消除影响，外间距的值为边框宽度的负值
此时有这样一个疑问，如果每个盒子对移动的话，那相对位置不变，不还会使边框连成一片吗？原来是浮动在起作用，浮动会使的每一个盒子紧密相接，接着在执行外边距负值的代码，使盒子继续移动。

margin负值

但是，在上一条的边框中，当在为盒子添加hover时改变其边框颜色，会发现在中间的盒子由于边框线被其他盒子给压住了而无法显示出来变色
可以选择提高hover盒子的层级（如果没有定位，也可以添加相对定位，如果有了，则可以使用z-index） 但是要ul加上position:relative在用提升等级？

浮动高级技巧

前边我们了解到浮动最初是为了文字环绕效果的，因此我们在某些时候（比如左图右文字的新闻列表），就可以使用这个文字自动环绕的效果减少工作量
第一步先设置一个大盒子，然后再分开装配（内部两个盒子顺序不能颠到）

 <div class="box">
        <div class="pic">
            <img src="images/news.jpeg" alt="">
        </div>
        <p>路透社路透社路透社路透社路透社路透社路透社路透社</p>
    </div>

css部分：

   .box {
            width: 300px;
            height: 70px;
            background-color: skyblue;
            margin: 0 auto;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
        }

        .pic img {
            width: 100%;
            height: 100%;
        }

直接将图片所在的盒子浮动即可，浮动后他z轴加一层，但是不会盖住文字组，文字会自动跑到右边来。
这样做，就不需要进行大盒再分两块，两块都需要分别处理了，左浮动右浮动了，减去了很多工作量，不仅这种情况，还要灵活运用到其他地方，其实我认为主要是要掌握和深刻理解代码本身所代表的含义，这样才能运用到其他地方，才能别出心裁，给自己带来意想不到的效果。

行内块的巧妙运用

每个相邻元素间自带间距，可调节宽度高度，可以使用text-align：center,是元素居中对齐
案例：底部页数导航栏
如果让我做的话，我可能第一想到的是浮动（哭），行内块的性质此时已经有些遗忘了，还是需要复习一下前边的。。。

三角形的变形

  .delta1 {
            width: 0;
            height: 0;
            border-top: 50px solid skyblue;
            border-left: 50px solid red;
            border-bottom: 0 solid pink;
            border-right: 50px solid green;
        }

这里为什么将底边框设置为0后下半部分都没有了，下边框不是只有一个三角形吗
京东三角形就可以采用将下边框长度置为0，其他边框颜色为透明，定位移动给实现的

  i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;分别对应上右下左
        }