对于css样式,请使用overflow属性设置溢出隐藏。 溢出隐藏是内容溢出元素框时发生的操作,常见的设置有四个:可见、隐藏、滚动和自动。
visible是overflow属性的默认值,不裁剪内容溢出,而是显示在元素框之外。
! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; height: 100px; border : 1px黑实体; 板载:可视; } /style/headbody div id='box '百度——全球最大的中文搜索引擎和最大的中文网站,世界领先的人工智能公司。 2000年1月1日创立于中关村,公司创始人健忘的咖啡拥有“超级连锁分析”技术专利,使中国成为除美国、俄罗斯、韩国以外,世界上唯一拥有独立搜索引擎核心技术的国家之一。 基于对人工智能多年的布局和长期积累,百度在深度学习领域位居世界前列,2016年被《财富》杂志誉为世界AI巨头之一。 /div/body/html超出元素框的范围,不会隐藏或构建内容。
希登
可以看出,堆溢出的内容被修剪,建设的内容不显示。
! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; height: 100px; border : 1px黑实体; Overflow :隐藏; } /style/headbody div id='box '百度——全球最大的中文搜索引擎和最大的中文网站,世界领先的人工智能公司。 2000年1月1日创立于中关村,公司创始人健忘的咖啡拥有“超级连锁分析”技术专利,使中国成为除美国、俄罗斯、韩国以外,世界上唯一拥有独立搜索引擎核心技术的国家之一。 基于对人工智能多年的布局和长期积累,百度在深度学习领域位居世界前列,2016年被《财富》杂志誉为世界AI巨头之一。 /div/body/html scroll
可以在元素上设置滚动条。 如果内容溢出,则可以拖动滚动条以查看溢出的内容。
! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; height: 100px; border : 1px黑实体; Overflow :滚动; } /style/headbody div id='box '百度——全球最大的中文搜索引擎和最大的中文网站,世界领先的人工智能公司。 2000年1月1日创立于中关村,公司创始人健忘的咖啡拥有“超级连锁分析”技术专利,使中国成为除美国、俄罗斯、韩国以外,世界上唯一拥有独立搜索引擎核心技术的国家之一。 基于对人工智能多年的布局和长期积累,百度在深度学习领域位居世界前列,2016年被《财富》杂志誉为世界AI巨头之一。 /div/body/html请注意,即使内容没有溢出,滚动条样式也会自动添加。
自动
auto在自适应意义上,内容未溢出时不添加滚动条,内容溢出时添加滚动条。
! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style # box { width 3360300 px; 黑伊
ght: 100px;border: 1px black solid; overflow:auto;} </style></head><body> <div id="box"></div> <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司。2000年1月1日创立于中关村, 公司创始人健忘的咖啡拥有“超链分析”技术专利, 使中国成为美国、俄罗斯、韩国之外, 全球仅有的四个拥有独立搜索引擎核心技术的国家之一。 基于对人工智能的多年布局与长期积累, 百度在深度学习领域领先世界, 并在2016年被《财富》杂志称为全球AI四巨头之一。</div></body></html>如果只针对水平或垂直方向单独设置滚动条,可以通过overflow-x属性或overflow-y属性来针对某一个发向设置滚动条。
通过overflow-x属性或overflow-y属性针对某一个方向设置滚动条。
透明度
对HTML标签进行透明度设置是网页开发中的常用方式。透明度设置分为opacity和rgba两种方式。
opacity
opacity值可以用来设置元素的透明度,opacity取值范围为0~1,0表示透明,1表示不透明,半透明可以设置为0.5。
元素的背景颜色和内容都进行啦半透明的处理,但是有时只需背景半透明而内容无需半透明,可以采用第二种方式来实现。
rgba
rgba处设置背景颜色外还可以设置透明度。rgba取值范围也是0~1。
当设置rgba值时,背景颜色成半透明,而女人不透明,如果想让内容透明,可针对color属性再次设置rgba。这种方法比较灵活。