CSS盒模型[下]

最新推荐文章于 2024-06-22 17:15:40 发布

fxy流年无悔

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量250

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/a716121/article/details/52119737

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

效果：

index.html:

<!DOTTYPE html>
<html lang ="zh-cn">
<head>
 
   <meta charset="utf-8">
   <title>CSS盒模型[下]</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>


<div>我是HTML5,我是HTML5</div>

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr> 
</table>


<div>我是块级元素</div>

<span>我是行内元素</span>


<img src="img.png">
<div>我是块级元素，将要转成行内元素</div>

<span>我是行内元素,将要转成块级元素</span>



<div>我是块级元素，将要转成行内块元素</div>
<span>我是行内元素,将要转成行内块元素</span>

<div>我是块级元素，将要转成行内块元素</div><span>我是行内元素,将要转成行内块元素</span>


<div id="a">我是a</div>
<div id="b">我是b</div>
<div id="c">我是c</div>
<div id="d">我是d</div>





<div id="a">我是a</div>
<div id="b">我是b</div>






</body>
</html>

style.css:

@charset "utf-8";

div{
background:silver;
width:200px;
height:200px;
visibility:visible;
visibility:hidden;
visibility:collapse;


}
table tr:first-child{
visibility:hidden;
visibility:collapse;///只限于隐藏表格
}

div{
background:silver;
width:200px;
height:200px;
}

span{
background:silver;
width:200px;
height:200px;
}


img{
width:100px;
height:50px;
}
div{
background:silver;
width:200px;
height:200px;
display:inline;
}

span{
background:silver;
width:200px;
height:200px;
display:block;

}


div,span{
background:silver;
width:200px;
height:200px;
display:inline-block;
}
span{
display:none;
}

#a{
background:maroon;
float:left;
}

#b{
background:green;
float:left;

}

#c{
background:blue;
float:left;
}

#d{
background:orange;
float:left;
}



#a{
background:maroon;
float:left;
}

#b{
background:green;
float:none;
clear:left;
}





#a{
background:maroon;
float:right;
}

#b{
background:green;
float:none;
clear:right;
}


///最常用，不受浮动干扰
#a{
background:maroon;
float:right;
}

#b{
background:green;
float:none;
clear:both;
}

ppt: