零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）04.1 -4.5.pptVIP

2 display 设置元素如何显示。 display属性取值 含义 display: none 该元素不显示 display: block 该元素转换为块级元素 display: inline 该元素转换为行级元素 display: inline-block; 该元素转换成行内块级元素 head style type=text/css div {background: green;width: 200px;height: 80px;display: none;} span { display: block;width: 100px;height: 50px;background: red; } /style body div 贵州美食酸汤鱼/div span 千户苗寨/span /body 运行效果 示例:部分代码 3. clear clear属性设置不允许哪一侧出现浮动元素 clear属性取值 含义 clear: left; 元素左侧不能有浮动元素 clear: right; 元素右侧不能有浮动元素 clear: both; 元素左右两侧都不能有浮动元素 示例：父元素的高度塌陷 style type=text/css .box { width:150px; border:1px solid black; } .nr1,.nr2 { border:1px solid red; background:yellow; float:left; width:50px; height:50px; } /style body div class=box div class=nr1/div div class=nr2/div /div /body 运行效果 部分代码 解决父元素高度塌陷 style type=text/css .box { width:150px; border:1px solid black; } /*添加空元素，并设置 clear 属性来清理浮动 */ .box:after{ content: ; display: block; clear: both; } .nr1,.nr2 { border:1px solid red; background:yellow; float:left; width:50px; height:50px; } /style body div class=box div class=nr1/div div class=nr2/div /div /body 运行效果 部分代码 4 overflow 属性 如果元素内容所需的空间大于框本身的空间，会导致内容溢出。可以使用 overflow 属性来控制。 overlfow 可取值 含义 visible 默认值，超出内容不会被修剪，也不添加滚动条，会呈现在元素框之外。 hidden 超出内容会被修剪 scroll 内容会被修剪，一直显示滚动条 auto 如果内容被修剪，自动添加滚动条以便查看其余的内容 4 overflow 属性 style type=text/css div{ width: 200px;height:100px;border: 2px solid red; line-height: 21px; overflow: auto; } /style body div 黄果树瀑布闻名海内外，作为贵州省较为出名的景区之一，风景不错，很多人慕名而来的，体力好的可以走下去， 用不同的角度看黄果树瀑布，体力不好的可以坐扶梯直达底下，单程30元，往返50元，瀑布景色挺好的，从瀑布右边观景台看瀑布还看见彩虹。 /div /body 运行效果 部分代码 5 visibility visibility属性设置元素是否可见 visibility可取值 含义 visible 默认值，元素可见 hidden 元素不可见，但是依然占据空间 style type=text/css div { width:50px; height:50px; border:1px solid black; } .ys{ visibility:hidden; } /style body div文本一/div div class=ys文本二/div div文本三/div /bo