CSS基础(一) 选择器盒子模型定位浮动

最新推荐文章于 2024-10-02 15:35:50 发布

猫与故巷0214

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量87

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_44827845/article/details/113486864

版权

CSS基础(一) 选择器盒子模型定位浮动

1.CSS简介

CSS 是指层叠样式表 (Cascading Style Sheets)，通过定义样式，我们可以定义如何显示 HTML 元素，多个样式定义可层叠为一个使用 CSS 同时控制多重网页的样式和布局。
其特征是一处写，处处用。有内联，内部，外部三种写法。
语法：选择器 { 属性 : 属性值 }

2.CSS选择器

选择器	写法
通配符*	*{ }
元素选择器	标签名{ }
id选择器(唯一性)	#id{ }
class选择器(多重性)	·class{ }

属性可以通过<! important> 提高属性级别。

<style>
		*{font-size: 20px;font-family: 宋体;text-align: center;}
		#id_p1{font-size: 30px;font-weight: 200;}
		#id_p2{color: #FF0000;text-align: left;}
		.class_p3{color:#00FFFF;transition: all 2s;}
		.class_p4{color:#FFFF00;text-decoration: underline;}
</style>
<body>	
		<p id="id_p1">巴山夜雨涨秋池</p>
		<p id="id_p2">君问归期未有期</p>
		<p class="class_p3">何当共剪西窗烛</p>
		<p class="class_p4">却话巴山夜雨时</p>
</body>

在这里插入图片描述

3.盒子模型

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
在这里插入图片描述盒子的宽度 = <width> + <padding-left>+ <padding-right>+<border-left >+ <border-right> + <margin-left> + <margin-right>
盒子的高度 = <height> + <padding-top> + <padding-bottom> + <border-top> + <border-bottom> + <margin-top> + <margin-bottom>

(1)padding属性

padding：内容与边框之间的距离。常用于列表排队时自定义前方序号的地方，用于修饰；又常用于排头内容与左边的距离设置。

<style>
	#box_01{
		width: 100px;height: 100px;
		border: 2px solid red;
		text-align: center;
		}
	#box_02{
		width: 100px;height: 100px;
		border: 2px solid green;
		padding-left: 65px;
		padding-right: 35px;
		}	
</style>
<div id="box_01">
	盒子模型1
</div>
<div id="box_02">
	盒子模型2
</div>

在这里插入图片描述

(2)border属性

border:边框设置

<style>
	#bd{width: 100px;
		height: 100px;
		border-top: 100px solid red;
		border-right: 100px solid white;
		border-bottom: 100px solid #0000EE;
		border-left: 100px solid transparent;
		border-radius: 50%;
	}
	#bd1{
		width: 0%;
		border-top: 100px solid red; 
		border-right: 100px solid #008000; 
		border-bottom: 100px solid #0000EE;  
		border-left: 100px solid yellow;
		border-radius: 50%;
	}
</style>
	<div id="bd"></div>
	<div id="bd1"></div>

在这里插入图片描述

(3)margin属性

margin:外边距的距离设置

<style>
	#box{
		width: 350px;
		height: 200px;
		margin: 0 auto;
		border: 1px solid #000000; 
	}
	.son_box{
		width: 150px;
		height: 150px;
		border: 1px solid red;
		display: inline-block;
		margin-top:20px ;
		margin-right: 10px;
		margin-bottom: 20px;
		margin-left: 10px;
	}
</style>
<div id="box">
	   <div class="son_box"></div>
	   <div class="son_box"></div>
</div>

在这里插入图片描述

(4)总结

移动内容用<padding> 移动盒子用<margin>
<margin> <padding> <border>可以单独设置一个方向，也可设置四个方向
<margin: 10px 20px 30px 40px> 上右下左
<margin: 10px 20px 30px> 上左右下
<margin: 10px 20px> 上下左右
<margin: 10px> 上下左右

4.定位

position 属性	定位
`<static>`	默认值，没有定位，遵循正常的文档流对象
`<fixed>`	相对于浏览器窗口是固定位置
`<relative>`	相对定位元素的定位是相对其正常位置
`<absolute>`	绝对定位的元素的位置相对于最近的已定位父元素
`<sticky>`	未超出目标区域像`<position:relative>` 当页面滚动超出目标区域,就像 `<position:fixed>`

定位实现三列布局

<style>
	*{padding: 0;margin: 0;}
	div{height: 50px;}
	.container{width: 1500px;position: relative;}
	.left,.right{width: 200px;background-color: #5F9EA0;}
	.middle{background-color: #0000EE;padding:0 200px;}
	.left{position: absolute;left: 0;top: 0;}
	.right{position: absolute;right: 0;top: 0;}
</style>
<body>
	<div class="container">
		<div class="left">左边栏</div>
		<div class="middle">中间栏</div>
		<div class="right">右边栏</div>
	</div>
</body>

在这里插入图片描述

5.浮动

<float>会使元素向左或向右移动,常用于图片和布局。
浮动实现三列布局

<style>
	*{text-align: center;}
	.box{width: 1200px;height: 50px;background: #eee;margin: 0 auto;}
	.left{width: 200px;height: 100%;background: #0000EE;float: left;}
	.right{width: 200px;height: 100%;background: #73C9E5;float: right;}			
	#middle{width: 800px;height: 100%;background: #FF6700;margin: 0 auto;}
</style>
<body>
	<div class="box">		
		<div class="left">今天</div>
	    <div class="right">属性</div>
		<div id="middle">学习浮动</p></div>
	</div>	
</body>