日期：2020-10-04
作者：19届WY
标签：CSS内联元素的盒子，display属性，visibility，overflow属性
一、内联元素的盒子
1、内边距
内联元素可以设置水平内边距内联元素可以设置垂直方向内边距，但不会影响页面的布局
2、内联元素可以设置边框，但垂直的边框不会影响到页面的布局
3、外边距
内联元素支持水平方向的外边距内联元素不支持垂直外边距
<style type="text/css">
.s1{
width:100px
;
height:100px
;
padding-left:100px
;
padding-right: 100px
;
padding-top:50px
;
padding-bottom:50px
;*/
border:1px red solid
;
margin-left: 100px
;
margin-right: 100px
;
margin-top: 100px
;
margin-bottom: 100px
;
}
</style>
<body>
<span class=
"s1">我是一个span</span>
</body>
4、两个内联元素的相邻水平外边距
水平方向的相邻外边距不会重叠，而是求和
.s1{
margin-right: 100px
;
}
.s2{
margin-left:100px
;
}
二、display样式
将一个内联元素变成块元素
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示block：可以将一个元素设置为块元素显示nline-block:将一个元素转换为行内块元素 - 可以使一个元素既有行内元素的特点又有块元素的特点 - 既可以设置宽高，又不会独占一行none:不显示元素，并且元素不会在页面中继续占有位置
<style type="text/css">
a{
background-color: #bfa
;
display:none
;
width:500px
;
height:500px
;
}
</style>
<body>
<a href=
"#">我是一个大大的超链接</a>
</body>
三、visibility属性
visibility：
可以用来设置元素的隐藏和显示的状态可选值： - visible 元素会隐藏不显示 - hidden 默认值，元素默认在页面显示使用visibility:hidden;隐藏的元素不会在页面中显示，但它的位置依然保持
<style type="text/css">
.box{
width:100px
;
height:100px
;
background-color: #008000
;
visibility:hidden
;
}
</style>
<body>
<div class=
"box"></div>
</body>
四、overflow属性
子元素默认是存在于父元素的内容区中，理论上讲元素的最大可以等于父元素内容区的大小，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示超出父元素的内容，我们称为溢出的内容父元素默认是将溢出内容，在父元素外边显示通过overflow可以设置父元素如何处理溢出内容可选值： - visible:默认值，不会被溢出内容做处理， - hidden，溢出的内容，会被修剪，不会显示 - scroll,会为父元素添加滚动条，通过滚动条来查看完整内容， 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条 - auto，会根据需求自动添加滚动条， 需要水平就添加水平 需要垂直就添加垂直 都不需要就不添加
<style type="text/css">
.box1{
width:200px
;
height:200px
;
background-color: #bfa
;
overflow:scroll
;
}
</style>
以scroll为例添加的滚动条
