CSS进阶标签属性及案例

最新推荐文章于 2023-12-11 10:31:10 发布

Willing卡卡

最新推荐文章于 2023-12-11 10:31:10 发布

阅读量189

点赞数

分类专栏：前端知识文章标签： css html flex

本文链接：https://blog.csdn.net/weixin_42601136/article/details/105446343

版权

前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS高级

1. 盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式；

在这里插入图片描述

element:元素内容

width:元素内容的宽度

height:元素内容的高度

border:元素的边框

padding:边框到内容的距离

margin:边框到其他元素的距离

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS盒子的基本使用</title>
	<style>
			body{
				float: right;
			}
			img{
				width: 200px;
				height: 100px;
				border: 5px solid red;
			}
			#img1{
				padding: 10px;
				margin: 50px;
			}
			#img2{
				padding: 15px;
				margin: 100px;
			}
			#img3{
				padding-top: 20px;
				margin-left: 150px;
				margin-right: 200px;
			}
		</style>
	</head>
	<body>
		<img id="img1" src="img/123.png" />
		<img id="img2" src="img/psb.jpg" />
		<img id="img3" src="img/psb1.jpg" />
	</body>
</html>

注意：

内边距和外边距的值可以是负数；
在页面上，设置margin-right无效，因为元素默认是左对齐，不管怎么设置元素都是左对齐，所以将元素设置为右对齐就可以看到效果，float:right；
浏览器：元素进行渲染的时候，是从左往右进行渲染；

2. CSS定位

CSS 定位 (Positioning) 属性允许对元素进行定位；

position:固定(fix)、相对(relative)、绝对(absolute)、静态(static)；
left：对元素进行左偏移；
top:对元素进行上偏移；
right:对元素进行右偏移；
bottom:对元素进行下偏移；

2.1 固定定位

只在一个位置进行显示；

<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
	<style>
			img{
				position: fixed;
				width: 350px;
				height: 200px;
				right: 0px;
				bottom: 0px;
			}
			p{
				font-size: 20px;
			}
			
		</style>
	</head>
	<body>
		<a href="https://huoying.qq.com/"><img src="img/123.png" /></a>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
	</body>
</html>

2.2 相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动；

<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style>
			#s1{
				background-color: red;
			}
			#s2{
				background-color: orange;
				position: relative;
				top: 20px;
				left: 20px;
			}
			#s3{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<span id="s1">这是span1</span>
		<span id="s2">这是span2</span>	
		<span id="s3">这是span3</span>	
	</body>
</html>

在这里插入图片描述

原有元素占用的空间不会消失，偏移根据原有位置进行偏移；

2.3 绝对定位

设置绝对定位的元素框从文档流中删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭；

<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style>
			#s1{
				background-color: red;
			}
			#s2{
				background-color: orange;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			#s3{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<span id="s1">这是一个span1</span>
		<span id="s2">这是一个span2</span>
		<span id="s3">这是一个span3</span>
	</body>
</html>

在这里插入图片描述

绝对定位并不会在原有位置占用空间，元素的偏移是根据父容器进行偏移；

3. 块级元素和行内元素

display: inline(行内元素)、block(块级元素)、inline-block(行内块级元素)；

块级元素：

块级元素前后会带有换行符,占用一整行；

常见的块级元素:div；

行内元素：

行内元素前后没有换行符,只包裹内容；

常见的行内元素:span；

margin-top、margin-bottom、padding-top、padding-bottom设置无效；

<html>
	<head>
		<meta charset="UTF-8">
		<title>块级元素和行内元素</title>
		<style>
			div{
				background-color: blue;
				/*使得div仅包裹内容*/
				display: inline;
				padding-top: 10px;
				margin-top: 100px;
			}
			span{
				background-color: red;
				margin-top: 100px;
				/*是的span占满整一行*/
				display: block;
			}
		</style>
	</head>
	<body>
		<div>这是一个div</div>
		<span>这是一个span</span>
	</body>
</html>

4.CSS伸缩布局

伸缩布局flex：在响应式开发中可以发挥极大的作用；

如：内容根据浏览器的大小而进行改变；

flex-container:伸缩容器；

main-axis:主轴,元素的排列方向，默认是row(水平方向)；

cross-axis:侧轴，默认是column(垂直方向)；

flex-item:伸缩元素，会按照主轴的方向进行排列；

在这里插入图片描述

4.1 flex入门案例一

左边是菜单栏（40%），右边是内容栏（60%），高度填充整个屏幕；

<html>
	<head>
		<meta charset="UTF-8">
		<title>伸缩布局入门案例一</title>
	    <style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0px;
			}
			/*让id为container的容器为伸缩布局*/
			#container{
				display: flex;
				height: 100%;
			}
			#left{
				background-color:red;
				width: 40%;
				height: 100%;
			}
			#right{
				background-color:blue;
				width: 60%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">left</div>
			<div id="right">right</div>
		</div>
	</body>
</html>

4.2 flex入门案例二

上边是菜单栏（40%），下边是内容栏（60%），宽度填充整个屏幕；

<html>
	<head>
		<meta charset="UTF-8">
		<title>伸缩布局入门案例二</title>
		<style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0px;
			}
			#container{
				display: flex;
				/*改变主轴方向*/
				flex-direction: column;
				height: 100%;
			}
			#top{
				background-color: red;
				height: 40%;
			}
			#bottom{
				background-color: blue;
				height: 60%;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="top">top</div>
			<div id="bottom">bottom</div>
		</div>
	</body>
</html>

Willing卡卡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS进阶标签属性及案例

CSS高级1. 盒子模型CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式；element:元素内容width:元素内容的宽度height:元素内容的高度border:元素的边框padding:边框到内容的距离margin:边框到其他元素的距离<html> <head> <meta char...
复制链接

扫一扫