元素的显示与隐藏

display 显示

display 设置或检索对象是否及如何显示

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

特点:隐藏之后不再保留位置;

visibility 可见性

visibility 设置或检索是否显示对象

visibility: visible; 对象可视
visibility: hidden; 对象隐藏

特点:隐藏之后,继续保留位置;

overflow 溢出

检索或设置对象的内容超出其指定高度及宽度时如何管理内容

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

CSS 用户界面样式

鼠标样式 cursor

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

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

去除表单元素选中之后的默认蓝色边框

outline: none;
outline: 0;
防止文本域拖拽 resize

文本域默认右下角是可以拖拽的 ; 可以使用下列预发禁止拖拽 ;

textarea {
resize: none;
}

vertical-align 垂直对齐

图片 , 表单和文字对齐
  • 有宽度的块级元素居中对齐,是margin: 0 auto;
  • 让文字居中对齐,是 text-align: center;

但是我们从来没有讲过有垂直居中的属性。

vertical-align 垂直对齐,它只针对于行内元素或者行内块元素

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

  • 注意:

    vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素

    特别是行内块元素, 通常用来控制图片/表单与文字的对齐

去除图片底部空白缝隙
  • 原因

    图片或者表单等行内元素,他的底线会和父级盒子的基线对齐;

  • 解决方法

    给 img 添加 vertical-align: middle | top | bottom 让图片不要 baseline 基线对齐;

溢出文字省略号显示

white-space

white-space 设置或检索对象文本显示方式,通常我们适用于强制一行显示;

white-space: normal; 默认处理方式
white-space: nowrap; 强制在一行内显示所有文本,知道文本结束或遭遇 br 才换行
text-overflow

设置文本或检索是否使用一个省略标记(...)表示文本对象的溢出

text-overflow: clip; 不显示省略标记,(···),而是简单的裁切
text-overflow: ellipsis; 当对象内文本溢出时显示省略标记(···)

注意:一定要首先强制一行显示,再次使用 text-overflow 属性搭配使用;

总结
/* 1. 先强制在一行内显示 */
white-space: nowrap;
/* 2. 超出部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出部分 */
text-overflow: ellipsis;

CSS精灵技术(sprite)

为什么需要精灵技术

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

精灵技术使用总结
  1. 精确测量每个小背景图片的大小和位置
  2. 给盒子指定小背景图片时,背景定位基本都是负值;图片默认是左上角对齐;

滑动门技术

核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的:

<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>

css样式

* {
padding:0;
margin:0; }
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}

拓展

CSS 三角形
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-bottom: 10px solid green;
border-left: 10px solid yellow;
border-right: 10px solid pink;
font-size: 0;
line-height: 0;
}
  1. 我们用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形的更多相关文章

  1. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  2. 设置text-overflow文本溢出隐藏时的对齐问题

    设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧. <p> <span ...

  3. CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  4. css实现单行(多行)文本溢出显示 ...

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...

  5. text-overflow文本溢出隐藏“...”显示

    一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...

  6. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  7. css 文本换行 文本溢出隐藏用省略号表示剩下内容

    正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...

  8. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

  9. 使用css控制文字显示几行并且剩余部分隐藏(移动端和PC端同样适用)

    前言 有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显 ...

随机推荐

  1. 网络设备 密码、用户级别 AAA授权 的管理

    一.进入 特权模式 密码 设置访问网络设备特权模式口令 cisco>enable cisco#config terminal cisco(config)#enable password 密码 e ...

  2. 如何在命令行添加换行符到git commit -m "xxx"

    需求来源: 需要将自动识别的组件信息.更新信息.任务跟踪单号.下载链接等信息自动提交并推送至gerrit, 然后作为触发条件启动另一个协作业务流程. 方法1:单引号开放方法 git commit -m ...

  3. RaspberryPi 3b+ 安装OpenWrt教程

    layout: post title: "RaspberryPi 3b+ 安装OpenWrt教程" date: 2019-09-28 22:00:00 +0800 categori ...

  4. js能力测评——移除数组中的元素

    移除数组中的元素 题目描述 : 移除数组 arr 中的所有值与 item 相等的元素.不要直接修改数组 arr,结果返回新的数组 示例1 输入 [1, 2, 3, 4, 2], 2 输出 [1, 3, ...

  5. codewars--js--vowels counting+js正则相关知识

    问题描述: Return the number (count) of vowels in the given string. We will consider a, e, i, o, and u as ...

  6. JMeter接口测试-循环读取库的用户信息

    前言 如何实现循环读取数据库的用户信息,并传递到下一个登录请求呢,下面我们一起来学习吧!在之前我们已经学会了利用JMeter连接数据库了,具体操作可以看我之前的随笔JMeter接口测试-JDBC测试 ...

  7. C# bubble sort,selection sort,insertion sort

    static void Main(string[] args) { InsertionSortDemo(); Console.ReadLine(); } static void InsertionSo ...

  8. 使用scrapy框架爬取图片网全站图片(二十多万张),并打包成exe可执行文件

    目标网站:https://www.mn52.com/ 本文代码已上传至git和百度网盘,链接分享在文末 网站概览 目标,使用scrapy框架抓取全部图片并分类保存到本地. 1.创建scrapy项目 s ...

  9. [SDOI2012] 任务安排 题解

    有感而发,遂书. 其实和sze聊了很久,但他还是退役了.恐怕他是本届里学oi时间最长的一个人吧,从小学五年级开始.我也是因为他,才开始学oi的.他因为学校的压力,不得不放弃.或许是没什么天赋.学了4年 ...

  10. JVM和线程池

    本文链接:https://blog.csdn.net/liuwenliang_002/article/details/90074283 ————————————————版权声明:本文为CSDN博主「3 ...