css高级技巧

CSS高级技巧

display显示

display 设置或检索对象是否及如何显示。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。

width: 40px;
	heigt: 100px;
}
.one{
	background: red;
}
.two{
	background: green;
	display: none;
}

visibility 可见性

设置或检索是否显示对象。
visibility：visible ;
对象可视 visibility：hidden; 对象隐藏
特点： 隐藏之后，继续保留原有位置。

	width: 40px;
	heigt: 100px;
}
.one{
	background: red;
}
.two{
	background: green;
	visibility：hidden;
}

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条

width: 100px;
	height: 100px;
	background:lightblue;
	overflow: hidden;
}

实际开发场景：

清除浮动

隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
显示与隐藏总结
display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 隐藏对象，保留位置 使用较少
overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范

css用户界面样式

所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。
更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
表单轮廓等。
防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

<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
最直接的写法是 ： outline: 0; 或者 outline: none;
<input type=“text” style=“outline: 0;”/>

防止拖拽文本域resize

<textarea style=“resize: none;”>

用户界面样式总结

鼠标样式 更改鼠标样式cursor 样式很多，重点记住 pointer
轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框
防止拖拽 主要针对文本域 resize
防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

vertical-align 垂直对齐

有宽度的块级元素水平居中对齐，是margin: 0 auto;
让元素中的文字居中对齐，是 text-align: center;
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
基线对齐 vertical-align：baseline；
垂直居中 vertical-align：middle；
顶部对齐 vertical-align：top；

去除图片底侧空白缝隙

给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了

总结

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