# 元素

# 元素的显示与隐藏

# display

display属性用于设置一个元素应如何显示注：隐藏之后不会保留元素

display:none;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思

<body>
    <div class="div1">
        div1
    </div>
    <div class="div2">
        div2
    </div>

</body>
<style>
    .div1 {
        background-color: pink;
        height: 200px;
        width: 200px;
        display: none;
    }

    .div2 {
        background-color: skyblue;
        height: 200px;
        width: 200px;
    }
</style>

# visibility

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

visibility:visible
元素可视
visibility:hidden
元素隐藏
visibility隐藏元素后，继续占有原来的位置。

<body>
    <div class="div1">
        div1
    </div>
    <div class="div2">
        div2
    </div>

</body>
<style>
    .div1 {
        visibility: hidden;
        height: 200px;
        width: 200px;
        background-color: pink;
    }

    .div2 {
        background-color: skyblue;
        height: 200px;
        width: 200px;
    }
</style>

# overflow

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

<body>
    <div class="div1">
        零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程零基础必看的h5(html5)+css3+移动端前端视频教程
    </div>

</body>
<style>
    .div1 {
        height: 200px;
        width: 200px;
        background-color: pink;
        overflow: hidden;
    }
</style>

# 溢出文字省略号代替

# 单行溢出显示省略号

text-overflow: ellipsis

<body>
    <div class="box">
        移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程
    </div>
</body>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

# 多行溢出显示省略号

<body>
    <div class="box">
        移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程移动端前端视频教程
    </div>
</body>
<style>
    .box {
        width: 100px;
        height: 50px;
        background-color: skyblue;
        overflow: hidden;
        text-overflow: ellipsis;
        /*弹性伸缩盒子*/
        display: -webkit-box;
        /*限制在一个块元素显示文本行数*/
        -webkit-line-clamp: 2;
        /*设置或检索伸缩对象的子元素排列方式*/
        -webkit-box-orient: vertical;
    }
</style>

# 精灵图

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现-background-position。
一般情况下精灵图都是负值。（千万注意网页中的坐标：轴右边走是正值，左边走是负值，y轴同理。）

<body>
    <div class="div1"></div>

    <div class="div2"></div>

</body>
<style>
    .div1 {
        height: 60px;
        width: 60px;
        margin: 100px auto;
        background: url("static/img/sprites.png");
        background-position: -182px 0;
    }

    .div2{
        height: 27px;
        width: 25px;
        margin: 200px auto;
        background: url("static/img/sprites.png");
        background-position: -155px -100px;
    }

</style>

# css 画三角

<body>
<div class="div1"></div>


</body>
<style>
    .div1 {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: pink;
    }


</style>

# 鼠标样式

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

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

<body>
    <ul>
        <li style="cursor:default;">我是默认的小白鼠标样式</li>
        <li style="cursor:pointer;">我是鼠标小手样式</li>
        <li style="cursor:move;">我是鼠标移动样式</li>
        <li style="cursor:text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed">我是鼠标禁止样式</li>
    </ul>
</body>

# 轮廓线

outline
给表单添加outline:O;或者outline:none;样式之后，就可以去掉默认的蓝色边框。

<body>
    <input />
</body>
<style>
    input {
        outline: none;
    }
</style>

# 防止拖拽文本域

resize
实际开发中，我们文本域右下角是不可以拖拽的。

<body>
    <textarea></textarea>
</body>
<style>
    textarea {
       resize: none;
    }
</style>

# 垂直对其

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对挤方式，但是它只针对于行内元素或者行内块元素有效。

值	描述
baseline	默认。元素放置在父元的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

<body>
    <img src="static/img/logo.png" /><span class="text">文字对齐</span>
</body>
<style>
    img {
        vertical-align: middle;
    }
</style>

← 定位 H5 →