文章目录
一.纯CSS做圣诞树
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.topbranch {
width: 0px;
height: 0px;
/*
* TODO: 上枝叶效果
*/
float: left;
margin-left:100px;
border:100px solid rgba(0,0,0,0);
border-bottom:100px solid green ;
}
.middleBranch {
width: 0px;
height: 0px;
/*
* TODO: 中枝叶效果
*/
border:200px solid rgba(0,0,0,0);
border-bottom:200px solid green ;
}
.base {
/*
* TODO: 树干效果
*/
margin-left:165px;
width: 70px;
height: 200px;
background: grey;
}
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>
2.效果
二.解决垂直方向上下盒子的外边距折叠
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top,.bottom{
width:100px;
height:100px;
margin:10px;
background:green;
}
.bottom{
position:absolute;
}
</style>
</head>
<body>
<section class="top"></section>
<section class="bottom"></section>
</body>
</html>
2.说明
想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：
- display: inline-block
- float属性值不是"none"的元素
- 绝对定位
三.使用绝对定位实现古诗词评注框
1.代码
<!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;
position: absolute;
margin-left:-9rem;
}
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>
2.效果
3.说明
绝对定位非常适合创建弹出层、提示和对话框等覆盖于其他内容之上的组件。
比如有一篇文章，可以给文章添加一些行内的评注，最好以气泡图的样式显示在文章外部的空白区域中。
绝对定位的元素默认会待在自己还在流中时的地方，
现在给"aside"盒子设置绝对定位属性"position: absolute"，
此时"aside"盒子从流中出来并且覆盖住了下方的元素，
现在可以将它向左移动一些，把它定位到文章内容的左边。"article"盒子的左外边距为10rem，
想让"aside"评注放在左边空白处的中间，需要进行计算，
这里省略计算步骤。现在只需要将评注组件向左移动9rem即可
四.使用固定定位使盒子不随进度条下拉
1,代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
nav{
position:fixed;
top:0;
width:50px;
background:pink;
}
section{
margin:1rem;
}
</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>
2.效果
3.说明
固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。
因此固定定位可以用来创建始终停留在窗口相同位置的元素。
比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。
五.固定定位实现广告弹出小窗口
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.advert {
width: 300px;
height: 200px;
background-color: black;
position:fixed;
right:0;
bottom:0;
}
.x{
position:absolute;
right:0;
}
.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>
2.效果
3.说明
固定定位可以用于控制中心、广告、重要提示内容等。
本示例使用固定定位实现一个广告牌功能，关闭按钮和该按钮的功能已给出，
当点击按钮时，广告牌会消失。
六.使用flex属性控制对盒子分配宽度
1.代码
<!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;
}
ul>li{
flex:1 0 0%;
}
li:first-child{
flex-grow:2
}
</style>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>spaceships</li>
<li>planets</li>
<li>stars</li>
</ul>
</nav>
</body>
</html>
2.效果
略
3.说明
Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：
- flex-basis：基础值
- flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间
- flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反
这三个属性应用给弹性项，而不是容器。
首先给所有的"li"添加"flex: 1 0 0%"属性，
该属性的三个值分别为flex-grow、flex-shrink和flex-basis，
表示：当有剩余空间时均匀分配剩余空间、当超出容器宽度时不进行缩放、弹性项的基础值都为容器的0%。
此时可以看到四个每个"li"标签的宽度都为125px，分别占据了容器的1/4。
现在再单独给第一个"li"标签设置"flex-grow: 2"属性，
此时又会发现所有"li"标签的宽度比值为2:1:1:1。
七.使用flex-wrap: wrap进行换行
1.代码
<!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 {
display: flex;
flex-wrap:wrap;
padding: 0.5rem;
list-style: none;
}
nav ul li {
margin: 0.2rem;
flex:1 0 auto;
max-width:10rem;
}
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>
2.效果
3.说明
当前的"li"标签都是行内盒子，虽然看似实现了标签效果，但是每一行的宽度却没有保持一致，
当进行缩放时，布局会特别的混乱。现在使用Flex布局将当前的布局方式进行优化，
首先删除"li"标签的"display: inline-block"属性，给"ul"添加"display: flex"使该元素称为弹性容器。
再给容器添加"flex-wrap: wrap"属性表示换行，否则所有标签会在第一行排列。
此时标签已经分行排列了，但，每一行的宽度看起来依然是不同的，
这时候需要通过给弹性项添加属性，通过之前讲过的"flex"属性入手。
继续给所有的"li"标签添加"flex: 1 0 auto"属性，
auto代表在计算剩余空间时需要减去每个标签自身的宽度
而不是之前讲的0%那样忽略了自身的宽度。此时标签功能基本上是完成了，
但是注意，最后一行可能因为页面的缩放导致只有一个标签却占满了一整行。
那么继续给所有的"li"标签设置"max-width: 10rem"即可，
此时最后一行标签虽然少但是看起来依旧很和谐。
八.使用网格布局布置多个盒子的行列排布
1.代码
<!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;
display:grid;
grid-template-rows:100px;
grid-template-columns:repeat(2,1fr);
grid-gap:10px;
}
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>
2.效果
略
3.说明
Grid，即网格布局。它将页面划分为一个个网格，可以任意组合不同的形态，做出理想的布局效果。
Grid布局与Flexbox布局的区别在于，Flexbox是根据轴线对弹性项进行排列，
而Grid布局是将容器划分为行和列，产生单元格，然后再对单元格进行操作。
采用网格布局的区域称为容器。容器内部采用网格定位的每个子元素称为容器项，也是单元格。
划分网格的线称为网格线，比如，3x3的网格有4条水平网格线和4条垂直网格线。
现在给section盒子设置"display: grid"属性，将该盒子变成一个容器。
现在需要通过给该容器划分行和列来生成单元格，
给容器设置"grid-template-rows: 100px"和"grid-template-columns: repeat(2, 1fr)"两条属性
以生成一个Nx2的网格，且每个容器项的宽度比为1:1、第一行的高度为100px
（注意：实际上行高度可以不用设置，会根据每个容器项自动撑开，
但如果设置了，就要考虑清除需要多少行，当前的行值100px仅为第一行，
如果需要前三行都为100px，需要设置为"grid-template-rows: 100px 100px 100px"）。
repeat方法可以简化属性值的书写，为了方便表示比例关系，
网格布局提供了fr关键字，该关键字和flex-grow颇为相似。
实际上如果想固定大小，完全可以将单位全部设置为固定的px值。
现在继续给容器添加"grid-gap: 10px"属性，
该属性为"grid-row-gap"和"grid-column-gap"两个属性的简写，分别代表行间距和列间距。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
