<!DOCTYPE html>
<html lang="en">
<head>
<title>前端必会的3中CSS布局技术</title>
<!--type="text/css"样式为css
width: 1000px;div的宽度,一般的宽度是1280px
height: 1500px;高度会自动往下伸
浏览器默认<body>有间距8px,设置为0px
margin: 30px auto 0px; 上外边距30px,左右边距自动 下外边距为0pxs
-->
<style type="text/css">
body, ul {margin: 0px;padding: 0px;}/*去除body的外边距*/
ul {list-style: none;}/*去除ul的点*/
/*最大的盒子的样式*/
.container {width: 1000px;/*height: 1500px;*//*border: 2px solid red;*/margin: 30px auto 0px;}
/*一行两列的最大盒子样式*/
.column2 {/*border: 2px solid black;*/}
/*float: left; 左浮动,如果单独加左浮动,下面的黄色就会自动贴上来,被红色盖住,如果想测试,将column2-2的高度改成400px
但是column2-1和column2-2都被设置float浮动了,column2就会塌陷了。如何解决呢? 清楚浮动*/
.column2-1 {width: 700px;height: 300px;background-color: red;float: left;}
.column2-2 {width: 280px;height: 300px;background-color: yellow;float: right;}
/*清除浮动
clear: left; 只能清除div左浮动(即 float: left)问题,不能清除右浮动问题,你可以将column2-1的高度改成200px,就会发现问题
clear: both;解决左右浮动问题*/
.clear {/*clear: left;*/clear: both;}
/*一行散列,最大的盒子*/
.column3 {/*border: 2px solid red;*/margin-top: 20px;}
/*3个盒子布局在一行的第一种方式:分别加上左浮动 float: left;
第二种方式:第一第二左浮动,第三右浮动
*/
.column3-1 {width: 200px;height: 300px;background-color: aqua;float: left;}
.column3-2 {width: 400px;height: 300px;background-color: salmon;float: left;margin-left: 20px;}
.column3-3 {width: 360px;height: 300px;background-color: aquamarine;float: right;}
/*清除浮动的第二种方式
.clearfix:after就相当于在div后面创建了一个伪元素
content: "111"表示伪元素中的内容
display: block;设置成块级元素才能*/
.clearfix:after {/*content: "111";*/content: "";display: block;background-color: brown;clear: both;}
/*多行多列
最大的盒子
*/
.column-n {/*border: 2px solid purple;*/margin-top: 20px;}
.column-n ul {/*background-color: sandybrown;*/}
.column-n li {width: 190px;height: 200px;/*border: 1px solid red;*/float: left;margin: 5px;background-color: aqua;}
/*网格布局父元素grid-container display 属性需要设置 grid 或 inline-grid
*/
.grid-container {display: grid;grid-template-columns: auto auto auto;background-color: #2196F3;padding: 10px;}
.grid-item {background-color: rgba(255, 255, 255, 0.8);border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;font-size: 30px;text-align: center;}
</style>
</head>
<body>
<!--class="containner"容器,其中的样式会使用.containner中的-->
<!--class="container"最大的盒子-->
<div class="container">
<!--一行两列,一个大的盒子装两个小的盒子-->
<div class="column2">
<div class="column2-1">
</div>
<div class="column2-2">
</div>
<!--清除column2浮动问题,清除浮动一般写在最后面-->
<div class="clear"></div>
</div>
<!--一行三列
第二种清除column浮动问题clearfix 清除浮动
.clearfix:after就相当于在div后面创建了一个伪元素
-->
<div class="column3 clearfix">
<div class="column3-1">
</div>
<div class="column3-2">
</div>
<div class="column3-3">
</div>
</div>
<!--多行多列-->
<div class="column-n">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
</body>
</html>
联系客服