您的位置：首页 > Web前端 > CSS

html和CSS基础学习（七）

2017-09-14 20:20 274 查看

内联元素的盒子模型

（1）    内联元素会紧挨在一起，块元素会独占一行。

（2）    内联元素不能设置height和width,设置了也没有用，内联元素可以设置边框，和水平方向的外边距和内边距，而且不会重叠。水平方向可以影响布局<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-style:italic;
color:red ;
}
div{
width: 200px;
height: 200px;
background-color: goldenrod;

}
*{
margin:0 ;
padding: 0;
}
.sn{
/*width: 50px;
height:50px ;对布局没有影响*/
margin-left: 20px;
margin-right:20px;
/*推动元素之间的间距*/
padding-left: 20px;
padding-right: 50px;

}
.sm{
padding-left: 100px;
/*与上面的样式叠加*/

}

</style>

</head>
<body>
<div>

</div>
<br />
<span class="sn">内联元素的盒子模型</span>
<span class="sm">内联元素的盒子模型</span>
<span>内联元素的盒子模型</span>

</body>
</html>
55：display和visibility
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
/*将a元素设置为行内块元素，可以设置height，和width*/
width: 150px;
height: 150px;
background-color:red ;
/*如图所示将内联元素变成块元素*/
/*display:none ;*/
/*会将这个元素隐藏，原来的位置不会被占据*/
}
.sm{
/*visibility: visible;表示这个元素可见*/
visibility:hidden ;/*元素被隐藏但是会占据原来的位置*/

}
</style>

</head>
<body>
<a href="#">我是一个超链接</a>
<span class="sm">开始表演</span>
<span >开始表演</span>

</body>
</html>

Display可以将元素变成块元素，block属性，inline变为块元素，inline-block行内元素 none:隐藏元素；

Visibility:  visible:可见，hidden:隐藏会占据空间

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航