css基础知识(布局)

布局 专栏收录该内容
0 篇文章 0 订阅

1、元素分类
a、块级元素:标签独占行,可以设置宽度
div p h1-h6 table form
b、行级(内联)元素:标签在一行内,宽高由内容决定
a span i em lable strong
c、行块级元素:同时具备行级 块级元素特征,标签在一行内,可以设置宽高
img input
2、显示(display)

display: none/block/inline/inline-block;
/* 块元素 内联元素 行内元素 */

居中导航


li{
	/* 去掉样式前面的小圆点 */
	list-style: none;
	}

3、相对定位和绝对定位
(1)、相对定位

.demo{
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid darkgray;
	top: 10px;
	left: 10px;
}
/* 参照原先位置来挪动,不会脱离文档流,元素为block型 */

(2)、绝对定位

.demo{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 1px solid darkgray;
	top: 10px;
	left: 10px;
	/* 参照body元素来移动 */
	/* 脱离文档流,原先的空间会被下一个元素占据,元素为inlin-block元素 */
	}

轮播图实现


```javascript
opacity:0.7;/*透明度*/
(3)、固定定位(fixed)例如:音乐播放器的播放条
```javascript
position:fixed;/*脱离文档流,参照窗口来移动,元素为inlin-block元素*/

4、遮罩

.content{
		position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			/* 以上四个位置可写为width: 100%;height: 100%; */
			background-color: #000;
			opacity: 0.3;
			z-index: 999;
			}
<div class="mask">123</div>
<div class="content">content area</div>			

5、浮动特征(float)

float:left/right/top/bottom;

注:①浮动的宽度 高度不会进入到父元素的宽度。②但浮动内容依然有宽度。③转换为inline-block元素。
6、浮动布局
清除浮动的两种方法

	/* css代码*/
	ul>li{
		float: left;
		list-style: none;
			}
	/* 清除浮动方法2*/
	ul:after{
		 content: ""; /*添加的内容*/
		display: block;
		clear: both;
		visibility: hidden;/*隐藏添加的内容*/
	}
		<!-- HTML代码 -->
<div class="container">
	<ul>
		<li>首页</li>
		<li>视频库</li>
		<!-- 清除浮动方法1 -->
		<!-- <div style="clear:both"></div> -->
	</ul>
	<div>
		<img src="1.jpg" >
	</div>
</div>

实现两列布局

/*css代码*/
html,body,.container,.main,.side{
				margin: 0;
				padding: 0;
				height: 100%;
			}
			.clearfix:after{
							content: "";/* 添加的内容 */
							display: block;
							clear: both;
							visibility: hidden; /* 隐藏添加的内容*/
						}
			.container{
				width: 1200px;
				margin: 0 auto;
				border: 1px solid #ccc;
			}
			.main{
				float: left;
				width: 800px;
				background: red;
			}
			.side{
				float: right;
				width: 400px;
				background: gold;
			}
			/*html代码*/
			<div class="container clearfix">
			<div class="main">main</div>
			<div class="side">side</div>
		</div>

7、弹性容器
弹性容器的属性
(1)、排列方式

/*css代码*/
.container{
	display: flex;
	border: 1px solid red;
	width: 400px;
	flex-direction: column-reverse;
	/* 
	row-reverse:水平反方向排列
	row:默认排列
	column:垂直方向排列
	column-reverse:垂直反方向排列
	 */
	}
	.container>div{
		background: pink;
		margin: 10px;
		width: 100px;
	}

(2)、换行方式

/*css代码*/
.container{
		display: flex;
		border: 1px solid red;
		width: 400px;
		flex-wrap: nowrap;
		/* 
		nowrap:不换行
		wrap:换行
		wrap-reverse:换行反转
		 */
	}
	.container>div{
		background: pink;
		margin: 10px;
		width: 100px;
	}

(3)、水平对齐方式

/*css代码*/
.container{
		display: flex;
			border: 1px solid red;
			width: 800px;
			height: auto;
			justify-content: flex-end;
			/* 水平对齐方式:
				center:居中
				flex-start:居左
				flex-end:居右
				space-between:水平方向平均分布(空白区域平均分布)
			 */
		}
.container>div{
	background: pink;
	margin: 10px;
	width: 100px;
}
/*html代码*/
<div class="container">
	<div class="d1">1</div>
	<div class="d2">2</div>
	<div class="d3">3</div>
	<div class="d4">4</div>
</div>

(4)、垂直对齐方式
align-items: flex-end; 参照水平对齐方式。
弹性元素的属性
(1)order:根据元素大小排列,order值小的排在前面

/*css代码*/
.container{
		display: flex;
			border: 1px solid red;
		}
.container>div{
	background: pink;
	margin: 10px;
	width: 10px;
}
.d1{
	order: 2;
}
.d2{
	order: 1;
}
.d3{
	order: -1;
}

弹性元素的属性的HTML代码

<div class="container">
	<div class="d1">1</div>
	<div class="d2">2</div>
	<div class="d3">3</div>
</div>

(2)flex-grow: 2;伸缩设置各个元素所占比例
(3)、flex-shrink: 4;收缩,值越大收缩的越多
(4)、flex-basis: 100px;收缩,基于100来收缩

/*(2)(3)(4)css代码*/
.container{
display: flex;
	border: 1px solid red;
	width: 400px;
}
.container>div{
	background: pink;
	margin: 10px;
	width: 200px;
}
.d1{
	/* flex-grow: 2; */
	flex-shrink: 1;
	flex-basis: 100px;
	/* 基于100来收缩 */
}
.d2{
	/* flex-grow: 4; */
	flex-shrink: 1;
}
.d3{
	/*伸缩比例: flex-grow: 3; */
	flex-shrink: 1;
	/*收缩比例,值越大收缩的越多*/
}
  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论1
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏作者

杨码

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值