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: 103px;
.one{
background: red;
}
.two{
background: green;
visibility: hidden;
}

三、overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条
width:103px;
height: 180px;
background: lightblue;
overflow: hidden;
}
实际开发场景:
清除浮动
隐藏超出内容，隐藏掉,不允许内容超过父盒子。

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

四、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;转换为块级元素就不会存在问题了
vertical-align垂直对齐，它只针对于行内元素或者行内块元素
vertical-align : baseline |top ]middle |bottom
设置或检索对象内容的垂直对其方式。

注急:
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素，通常用来控制图片/表单与文字的对齐。
基线对齐vertical-align: baseline;
垂真居中vertical-align: middle;
顶部对齐vertical-align: top;

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