【前端】css3盒模型布局模式

齐天大圣12138

已于 2022-03-19 16:33:58 修改

阅读量100

点赞数

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

于 2021-05-23 23:10:17 首次发布

本文链接：https://blog.csdn.net/weixin_52078305/article/details/117202459

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细解析了如何使用CSS为网页文字设置字体、字号、颜色，并介绍了首行缩进、元素隐藏、相对绝对定位、弹性盒模型flex属性、justify-content与align-items应用。涵盖了前端开发的基础样式和布局技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的第四个页面</title>
		<style type="text/css">
			span{font-family:"宋体";
			     font-size:20px ;
			     font-weight: bold;
			     font-style: oblique;
			}
			.box1{text-decoration:line-through ;}
			.box2{text-decoration:overline ;}
			.box3{text-decoration:underline}
			p{text-indent: 2em;
			background-color:red ;
			
			}
			h2{line-height: 5em;
			letter-spacing: 4px;
			}
			p1{display: none;
			}
			#b1{
				width: 200px;
				height: 200px;
				position: relative;
			}
			#b2{
				top: 20px;
				position: absolute;
			}
			.a1{background: burlywood;
			display: flex;
			}
			.a1 div{width: 200px;
			height:200px;
			}
			.a2{
				background: red;
			}
			.a3{
				background: aquamarine;
			}.a4{
				background: saddlebrown;
			}
			
		</style>
			
		
	</head>
	<body>
		<p>使用cs<span>s样式为网页</span>中的文字设置字体、字号、颜色等样式属性。</p>
	    <div class="box1">hhh</div>
	    <div class="box2">hhh</div>
	    <div class="box3">hhh</div>
	    <h2>首行缩进</h2>
	    <p>2em的意思就是文字的2倍大小。</p>
	    <h2>none不占据位置</h2>
	    <p1>none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。</p1>
	<h2>Relative与Absolute组合使用</h2>
	<div id="b1">
		<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg" />
		<div id="b2">
			参照定位的元素必须是相对定位元素的前辈元素：
		</div>
	</div>
	<hr />
	<h2>弹性盒模型之flex属性</h2>
	<ol>
		<li>设置display: flex属性可以把块级元素在一排显示。</li>
		<li>flex需要添加在父元素上，改变子元素的排列顺序。</li>
		<li>默认为从左往右依次排列,且和父元素左边没有间隙</li>	
	</ol>
	<div class="a1">
		<div class="a2"></div>
		<div class="a3"></div>
		<div class="a4"></div>
	</div>
	<hr />
	<h2>使用justify-content属性设置横轴排列方式</h2>
	<ul>
		<li>flex-start：交叉轴的起点对齐</li>
		<li>flex-end：右对齐</li>
		<li>space-between：两端对齐，项目之间的间隔都相等。</li>
		<li>center： 居中</li>
				<li>pace-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>

	</ul>
			<hr />
	<h2>使用align-items属性设置纵轴排列方式</h2>
	<ul>
		<li>flex-start：默认值，左对齐</li>
		<li>flex-end：交叉轴的终点对齐</li>
		<li>center： 交叉轴的中点对齐</li>
		<li>baseline：项目的第一行文字的基线对齐。</li>
		<li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li>
	</ul>	
	
	</body>
</html>

齐天大圣12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【前端】css3盒模型布局模式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>我的第四个页面</title> <style type="text/css"> span{font-family:"宋体"; font-size:20px ; font-weight: bold; font-style: oblique;
复制链接

扫一扫