CSS布局
原创
©著作权归作者所有：来自51CTO博客作者liulizhi1996的原创作品，请联系作者获取转载授权，否则将追究法律责任
CSS1 盒模型 - content-box
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="content-box"></div>
</body>
</html>
CSS2 盒模型 - border-box
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="border-box"></div>
</body>
</html>
CSS3 盒模型- 外边距折叠
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section class="top"></section>
<section class="bottom"></section>
</body>
</html>
CSS4 浮动
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
CSS5 浮动 - 清除
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.media {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<section>
<div class="media"></div>
<p>hello</p>
<p class="clear-left">universe</p>
</section>
</body>
</html>
CSS6 定位 - static
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
section {
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<section></section>
</body>
</html>
CSS7 定位 - inherit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.outer {
width: 100px;
height: 100px;
background-color: black;
}
.inner {
width: 80px;
height: 80px;
background-color: red;
}
</style>
</head>
<body>
<section class="outer">
<section class="inner">
</section>
</section>
</body>
</html>
CSS8 定位 - absolute
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.outer {
width: 100px;
height: 100px;
}
.middle {
width: 100px;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
</body>
</html>
CSS9 定位 - absolute - 评注
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
article {
margin-left: 10rem;
}
aside {
width: 5rem;
padding: 1rem;
color: white;
background-color: pink;
border-radius: 0.5rem;
}
aside:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 0.5rem solid pink;
border-bottom-color: transparent;
border-right-color: transparent;
right: -1rem;
top: 0.5rem;
}
.note {
color: green;
text-decoration-line: underline;
}
</style>
</head>
<body>
<section>
<article>
<p>煮豆燃豆萁，</p>
<p>豆在釜中泣。</p>
<p>本是同根生，</p>
<aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>
<p class='note'>相煎何太急？</p>
</article>
</section>
</body>
</html>
CSS10 定位 - z-index
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>The countdown to Christmas starts here.</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100">
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>
CSS11 定位 - relative
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left {
width: 100px;
height: 100px;
}
.center {
width: 100px;
height: 100px;
}
.right {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
CSS12 定位 - fixed
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<nav><br /></nav>
<section>1<br />2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
</body>
</html>
CSS13 定位 - fixed - 广告
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.advert {
width: 300px;
height: 200px;
background-color: black;
}
.advert:first-line {
color: white;
}
</style>
</head>
<body>
<section class="advert">
广告文案
<button class="x">x</button>
</section>
<script>
document.querySelector('button').onclick = function() {
this.parentNode.style.display = 'none'
}
</script>
</body>
</html>
CSS14 display - flex
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav ul {
height: 2rem;
list-style: none;
}
nav ul li {
border: 1px solid black;
}
nav ul li:first-child {
font-size: 1.2rem;
}
</style>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>spaceships</li>
<li>planets</li>
<li>stars</li>
</ul>
</nav>
</body>
</html>
CSS15 display - flex - 可伸缩项属性
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
nav {
width: 500px;
}
nav ul {
display: flex;
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>spaceships</li>
<li>planets</li>
<li>stars</li>
</ul>
</nav>
</body>
</html>
CSS16 display - flex - 标签
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
box-sizing: border-box;
}
nav ul {
padding: 0.5rem;
list-style: none;
}
nav ul li {
display: inline-block;
margin: 0.2rem;
}
nav ul li a {
position: relative;
display: block;
padding: 0.2rem 0.6rem;
color: white;
line-height: 1rem;
background-color: black;
border-radius: 0.2rem;
text-decoration: none;
text-align: center;
}
nav ul li a:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 0.7rem solid transparent;
border-right-width: 0.7rem;
border-right-color: black;
left: -1.2rem;
top: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">Fillithar</a></li>
<li><a href="">Berzite</a></li>
<li><a href="">Galidraan</a></li>
<li><a href="">Gravlex Med</a></li>
<li><a href="">Cato Neimoidia</a></li>
<li><a href="">Coruscant</a></li>
<li><a href="">Dantooine</a></li>
<li><a href="">Dhandu</a></li>
<li><a href="">Iktotchon</a></li>
<li><a href="">Hosnian Prime</a></li>
<li><a href="">Harkrova I</a></li>
<li><a href="">Livno III</a></li>
<li><a href="">Karfeddion</a></li>
<li><a href="">Eriadu</a></li>
<li><a href="">Jestefad</a></li>
<li><a href="">Iridonia</a></li>
<li><a href="">Malachor</a></li>
<li><a href="">Gan Moradir</a></li>
<li><a href="">Kethmandi</a></li>
<li><a href="">Mirrin Prime</a></li>
<li><a href="">Ezaraa</a></li>
<li><a href="">Muunilinst</a></li>
<li><a href="">Itapi Prime</a></li>
<li><a href="">Nam Chorios</a></li>
</ul>
</nav>
</body>
</html>
CSS17 display - flex - order
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
flex-direction: column;
text-align: center;
}
</style>
</head>
<body>
<section>
<h2>countdown</h2>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100%">
<article>The countdown to Christmas starts here.</article>
<p><a href="#">more</a></p>
</section>
</body>
</html>
CSS18 display - grid
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
width: 500px;
text-align: center;
}
article {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
</section>
</body>
</html>
CSS19 display - grid - 区域
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
text-align: center;
}
article {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
</section>
</body>
</html>
CSS20 单列布局
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 500px;
}
</style>
</head>
<body>
<header></header>
<section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
<footer></footer>
</body>
</html>
CSS21 双列布局 - 浮动
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
}
.left {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"></article>
</section>
</body>
</html>
CSS22 双列布局 - 绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
CSS23 双列布局 - flex
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
}
.left {
border: 1px solid black;
}
.right {
border: 1px solid greenyellow;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"></article>
</section>
</body>
</html>
CSS24 双列布局 - grid
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
}
.left {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"></article>
</section>
</body>
</html>
CSS25 三列布局 - 浮动
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
}
.left {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
<article class="center"></article>
</section>
</body>
</html>
CSS26 三列布局 - 绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
}
.center {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
CSS27 三列布局 - flex
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
}
.center {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
CSS28 三列布局 - grid
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
}
.center {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
CSS29 三列布局 - 圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid black;
}
.left {
background-color: greenyellow;
}
.center {
background-color: darkorange;
}
.right {
background-color: darkgreen;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><br /><br /><br /></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
CSS30 三列布局 - 双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid black;
}
.left {
background-color: greenyellow;
}
.main {
background-color: darkorange;
}
.right {
background-color: darkgreen;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><main class="main"><br /><br /><br /></main></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
