块元素和行内元素之间的转换，overflow与visibility

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素和行内元素之间的转换，overflow与visibility</title>
<style>
a{
width:100px;
height:100px;
border:1px solid #000000;
background:red;
display:block;/*使行内元素a变成块级元素，让它独占了一行*/
/*行内元素特点同行排列，不能设定宽高，块级元素特点独占一行*/
display:inline-block;/*变成行内块级元素*/
}
div{
width:200px;
height:200px;
border:1px solid #000000;
display:inline;/*使块级元素变成行内元素*/
}
#p1{
width:300px;
height:300px;
border:1px solid #000000;
overflow:scroll;/*overflow是针对溢出内容的操作*/
/*overflow:hidden超出部分的内容隐藏*/
/*overflow-x:hidden横向隐藏，竖向显示滚动条*/
/*overflow:auto内容超出时显示滚动条，不超出就不显示滚动条*/
/*overflow:scroll总是显示滚动条*/
}
</style>
</head>
<body>
<h1 style="visibility:hidden">元素消失了</h1>



<a href="#">百度</a>
<span>给上面的行内元素a变成块级元素或者行内块级元素做参考</span>
<div>块级元素变成行内元素</div>
<p id="p1">
学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性
</p>
</body>
</html>

时间： 2024-08-25 16:04:53

块元素和行内元素之间的转换，overflow与visibility

块元素和行内元素之间的转换，overflow与visibility的相关文章

css盒模型和块级、行内元素深入理解

块级元素和行内元素的区别，常见的块级元素和行内元素有哪些

从块级元素和行内元素的分析到bfc的布局理解

块级元素和行内元素区别

HTML中块级元素和行内元素的总结和区分。

HTML 块级元素与行内元素

替换元素和不可替换元素，块级元素和行内元素

块级元素与行内元素

深度理解CSS中块级元素与行内元素的区别（个人易错点）