介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title> Document
& lt; style 类型=拔谋?css"比;
div {背景颜色:黄色;宽度:,350 px;高度:,100 px;溢出:,隐藏;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>元素中的内容超出了给定的宽度和高度属性,溢出属性& lt; br>可以确定显示的方式,以及是否显示滚动条。;/p>
& lt; div>这个属性定义溢出元素内容区的内容会如何处理。你们;br>如果值为,隐藏,则隐藏超出范围的部分。你们;br>如果值为,滚动,则显示滚动条。你们;br>如果值为,可见,则超出部分会呈现在元素框之外。你们;br>如果值为汽车,则为自动;文本超出元素框,则显示滚动条,没有超出,则不显示滚动条。你们;br>如果值为继承,则继承父元素的溢出属性的值。;/div>
& lt;/body>
& lt;/html> div {
background - color,,,:,黄色;
,,,宽度:,350 px;
,,,保证金:,100 px 汽车;
,,,白色空间:,nowrap;}/*强调文本在一行内显示*/,,,溢出:,隐藏,/*溢出内容为隐藏*/,,,文本溢出:,省略号;/*溢出文本显示省略号*/,,,} & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title> Document
& lt; style 类型=拔谋?css"比;
*,{保证金:0;填充:0}
.header {background - color: # 333;颜色:,# fff; text-align:,中心;高度:,80 px;行高:,80 px;}
.father_box {宽度:500 px;高度:,200 px;保证金:,0,汽车;background:,黄色;}
.child_left {宽度:100 px;高度:,100 px; background:,蓝色;浮动:,左;}
.child_right {宽度:200 px;高度:,150 px; background:,蓝色;浮动:,;}
.footer {background - color: # 333;颜色:,# fff; text-align:,中心;高度:,80 px;行高:,80 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=癶eader"祝辞头在这儿& lt;/div>
& lt; div 类=癴ather_box"祝辞
& lt; div 类=癱hild_left"祝辞child_left
& lt; div 类=癱hild_right"祝辞child_right小编给大家分享一下css中溢出:隐藏的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>溢出隐藏
就是隐藏超出规定高度的文本或者图像信息。
下图分别是值为隐藏和值为汽车时截取
还有一个是单行显示文本信息,超出部分用省略号显示(强调一下:必须是一行文本显示才有效哦!)
<强>清除浮动
布局的时候经常会用这种左右布局:一个父盒子,父盒子中包含左和右两个孩子盒子。但是孩子的内容个数大小都不确定,也就不能给父盒子固定的高度,父盒子高度就需要根据孩子盒子高度来改变。下面我们来了解一下!
下面是父盒子给了200 px的高度,两个孩子盒子左右浮动,显示是没有问题的。
