CSS基础知识(高级技术)

时间:2020-9-16 作者:admin

CSS基础知识

元素的显示与隐藏

display 显示

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

语法

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

特点
隐藏之后,不再保留位置
CSS基础知识(高级技术)

visibility 可见性

设置或检索是否显示对象

语法

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

特点
隐藏之后,继续保留原有位置
CSS基础知识(高级技术)

overflow 溢出

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

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

CSS用户界面样式

鼠标样式cursor

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

<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>

轮廓线 outline

是绘制于元素周围的一条线,位于边框边缘的外围

语法

outline : outline-color ||outline-style || outline-width

防止拖拽文本域resize

文本域右下角不可拖拽语法

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

有宽度的块级元素水平居中对齐,是margin: 0 auto;
让元素中的文字居中对齐,是 text-align: center;

语法

vertical-align : baseline|top|middle|bottom

vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,通常用来控制图片/表单与文字的对齐

图片、表单和文字对齐

默认的图片会和文字基线对齐

去除图片底侧空白缝隙

原因
图片或者表单等行内块元素底线会和父级盒子的基线对齐
解决方法
给img vertical-align:middle | top| bottom等等,让图片不和基线对齐
给img 添加 display:block; 转换为块级元素就不会存在问题了

溢出的文字省略号显示

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

white-space

white-space设置或检索对象内文本显示方式,用于强制一行显示内容

white-space:normal ;默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行

text-overflow 文字溢出

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

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

CSS精灵技术(sprite)

为什么需要精灵技术

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

精灵技术讲解

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。background-image、background-repeat、background-position属性进行背景定位

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。