学习笔记之overflow属性

overflow属性

overflow属性是当内容溢出内容框生效的

默认值	visible
版本	CSS2
JS	object.style.overflow=“scroll”;

值	解释
visible	不会裁剪内容，但是内容超出内容框则会溢出显示
hidden	裁剪内容，但不提供滚动条
auto	裁剪内容，如果溢出则提供滚动条，不溢出的话则不提供滚动条
scroll	裁剪内容，提供滚动条
inherit	继承父类的overflow的属性

滚动条会占用容器的可用宽度或高度

overflow-x属性：

默认值	visible
版本	CSS3
JS	object.style.overflowX=“scroll”;

overflow-x的属性和y的一样

值	解释
visible	不会裁剪内容，但是内容超出内容框则会溢出显示
hidden	裁剪内容，但不提供滚动条
auto	裁剪内容，如果溢出则提供滚动条，不溢出的话则不提供滚动条
scroll	裁剪内容，提供滚动条
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

overflow-x 是对内容的左/右生效

overflow-y 是对内容的上/下生效

写的时候发现了两个问题：

1.如果同时设置overflow-x和overflow-y

overflow-x: visible;
overflow-y: scroll;

那么visible值就会变成auto

2.如果我想要上下裁剪左右让其溢出的话

overflow-x: visible;
overflow-y: hidden;

overflow-x的visblie会变成auto，解决方法是在外面在套一个div然后分开设置

css部分

.container{
    height: 200px;
    overflow-y: hidden;
}
.content{
    width: 200px;
    overflow-x: visible;
}
.purple{
    display: block;
     width: 240px;
     height: 240px;
     background-color: purple;
}

html部分

<div class="container">
	<div class="content">
		<span class="purple">
			紫色
		</span>
	</div>
</div>