日期：2020-10-04
作者：19届WY
标签：CSS内联元素的盒子，display属性，visibility，overflow属性
一、内联元素的盒子
1、内边距
- 内联元素可以设置水平内边距
- 内联元素可以设置垂直方向内边距，但不会影响页面的布局
2、内联元素可以设置边框，但垂直的边框不会影响到页面的布局
3、外边距
- 内联元素支持水平方向的外边距
- 内联元素不支持垂直外边距
<style type="text/css">
.s1{
/*内容区，内边距，边框，外边框*/
/*内容区*/
/*内联元素不能设置width和height*/
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为例添加的滚动条
扫一扫
2076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
