css（day 3）-CSDN博客

本文链接：https://blog.csdn.net/shosatoshi/article/details/123147933

元素的显示与隐藏

1.display属性
常用值none，block

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

注意点：
display 隐藏元素后，不再占有原来的位置。

2.visibility 可见性
常用值visible，hidden
visibility 属性用于指定一个元素应可见还是隐藏。

visibility:visible ; 
元素可视
visibility:hidden; 
元素隐藏

注意点：
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用visibility:hidden，如果隐藏元素不想要原来位置，就用 display:none (重点)

3.overflow 溢出
常用值visible，hidden，scroll，auto

visibility: visible; 
不剪切内容不加滚动条
visibility: hidden; 
不显示超过尺寸的内容，超过的部分隐藏
visibility: scroll; 
不管内容是否超出尺寸，显示滚动条
visibility:auto; 
超过尺寸显示滚动条，不超过不显示

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，慎用overflow:hidden，因为它会隐藏多余的部分。

css高级技巧

1.精灵图(sprites)
目的:为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
核心原理:将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
使用精灵图核心总结:
①精灵图主要针对于小的背景图片使用。
②主要借助于背景位置来实现---background-position 。
③一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值，左边走是负值， y轴同理。)
2.字体图标
使用场景: 主要用于显示网页中通用、常用的一些小图标。
精灵图的缺点：
①图片文件还是比较大的。
②图片本身放大和缩小会失真。
③一旦图片制作完毕想要更换非常复杂。
字体图标可以解决上述问题。字体图标展示的是图标，本质属于字体。可以更改颜色和大小。
字体图标的优点：
①轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
②灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
③兼容性:几乎支持所有的浏览器，请放心使用
使用：
①把下载的font文件放在html所在文件夹
②导入到css

@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal; }
//在 CSS 样式中全局声明字体
//注意字体文件路径的问题。

③html 标签内添加小图标，在demo.html里面复制图标，粘贴在<span> 里

<body>
    <span></span>
    <span></span>
</body>

span {
    font-family: 'icomoon';
    font-size: 100px;
    color:pink;
}

字体图标的追加
选中import icons，把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
3.CSS 三角

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent; 
    border-left-color: pink;
}

4.CSS 用户界面样式
界面样式：更改一些用户操作样式，以便提高更好的用户体验。
・更改用户的鼠标样式

li {
    cursor: default; 
    cursor: pointer;
    cursor: move; 
    cursor: text;
    cursor: not-allowed; 
}

・表单轮廓

input {
    outline: none; 
}

・防止表单域拖拽

textarea{ 
    resize: none;
    outline: none;
    //去除边框 
}

5.vertical-align 属性应用
使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

vertical-align : baseline | top | middle | bottom
//baseline父元素的基线

解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
①给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
②把图片转换为块级元素 display: block;
6.溢出的文字省略号显示
①单行文本溢出显示省略号

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

②多行文本溢出显示省略号

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

有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)
7.常见布局技巧
①margin负值的运用
a.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
b.鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果盒子没有定位，则加相对定位(保留位置)，如果盒子有定位，则加z-index)
②文字围绕浮动元素
③行内块的巧妙运用
页码在页面中间显示:
a.把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
b.利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
④CSS三角强化

width: 0;
height: 0;
border-color: transparent red transparent transparent; 
border-style: solid;
border-width: 22px 8px 0 0;
//制作直角三角形

8. CSS 初始化
目的：消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容。
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
例：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1