19.overflow属性设置溢出内容

首先代码部分是一个简单的管理系统头部：

主题div Class为：header

标题div Class为：nav

标题中含有ul标签和六个li标签

CSS样式如下：

*{margin: 0px;padding: 0px;}.header{text-align: center;font-size: 24px;}.nav{border:1px solid #000;height:30px;line-height: 30px;padding-left: 20px;/* overflow: hidden; */}.nav ul{list-style: none;}.nav ul li{width: 20%;float: left;}ul{text-align: center;}

因为li标签设置的宽度为20%，所以五个li标签会有一个溢出：

这时可以用 overflow属性来操作溢出的元素

吧CSS代码中注释的overflow属性释放后结果如下：

overflow属性可选值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

值得注意的是scroll值和auto值的区别：

scroll值带有上下左右四个方向的滚动条：

auto值只带有上下方向的滚动条：

19.overflow属性设置溢出内容相关推荐

overflow属性（溢出）详解
目录一:什么是overflow 1.1 overflow的属性二:实例分析一:什么是overflow 在CSS中,overflow是"溢出"的意思,该属性规定当内容溢出元 ...
CSS 处理溢出 overflow属性
在CSS中,如果设置了一个盒子的宽度与高度,则盒子中的内容就可能超过盒子本身的宽度或高度.此时,可以使用 overflow 属性来控制内容溢出时的处理方式. overflow属性的可选值有 visib ...
CSS的overflow：规定当内容溢出元素框时发生的事情
overflow 属性规定当内容溢出元素框时发生的事情.
html dom透明度,HTML DOM Style overflow 属性
Style overflow 属性 Style 对象定义和用法 overflow 属性设置或返回如何处理呈现在元素框外面的内容. 语法设置 overflow 属性: Object.style.ov ...
前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价
display属性功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...
css overflow属性及使用方法（场景）
overflow这个属性还是挺实用的比如,一个div展示文字,想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll; 1.overflow的属性值 ...
css使用三个属性设置文本结尾省略号显示
三个css属性设置文本内容超出部分,省略号显示文章目录前言一.三个属性二.属性使用三.使用总结前言本篇文章主要记录了css样式设置文本超出部分省略号显示,适用于input标签和普通标签 ...
CSS设置溢出隐藏效果
虽然是很普通,但是往往有时候就是这么一个小细节上忙得够呛,记录一下在CSS中,可以利用overflow属性,使用overflow:hidden来设置溢出隐藏. overflow属性规定当内容溢出元素 ...
overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...

19.overflow属性设置溢出内容

19.overflow属性设置溢出内容相关推荐

最新文章

热门文章