CSS - 02 盒模型，浮动，分割div，定位

最新推荐文章于 2024-05-10 10:46:48 发布
最新推荐文章于 2024-05-10 10:46:48 发布
阅读量630 收藏 2
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734992/article/details/124116623
版权

盒模型：box-model

  • CSS认为每个html元素都可以看作一个盒子,从而对盒子进行尺寸和方位的修改，但一般是指块元素
  • 从内到外，分为内容区域，内边距，边框，外边距
  • 默认尺寸是作用在内容区域上的
  • 块元素振勇的总空间：内容区域+内边距+边框+外边距

示例：index.css

@charset "utf-8";
 #myul{
	/* 内容区域 */
	width: 300px;
	height: 200px;
	background-color: pink;
	/* 盒模型相关样式 */
	/* 外边距 */
	/* 上下左右 */
	/* margin: 30px; */
/* 	margin-top: 30px;
	margin-right: 50px;
	margin-bottom: 20px;
	margin-left: 10px; */
	/* 左上右下。按照顺时针方向 */
	/* margin: 20px 30px 40px 40px; */
	/* 上，左右，下 */
	/* margin: 20px 30px 40px; */
	/* 上下，左右 */
	margin: 20px 30px;
	/* 内边距 */
	padding: 30px;
	/* 边框 */
	border: 30px solid #000;
	display: inline-block;
}

生成效果CSS.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 按tab键和enter键生成的不一样 -->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<div
		<ul id="myul"></ul>
		</div>
	</body>
</html>

在这里插入图片描述

背景图设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.outer{
				width: 800px;
				height: 300px;
				border: 1px solid #000;
				margin: 0 auto;
				/* 内容溢出时处理 */
				/* 移除的内容会被裁剪，裁掉的内容，不占用空间 */
				/* overflow: hidden; */
				/* 加滚动轴 */
				overflow: scroll;
				display: inline-block;
			}
			.outer>img{
				/* 父容器的100% */
				width: 50%;
				
				
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<img src="img/1.jpg" >
		</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mydiv{
				width: 800px;
				height: 300px;
				/* 背景图 */
				background-color: #FFC0CB;
				background-image: url(img/1.jpg);
				/* 当背景图太小时，不重复 */
				background-repeat: no-repeat;
				/* 背景图大小  auto cover*/
				background-size: auto;
				/* 背景图的显示位置 水平和垂直方向均显示为中间位置*/
				background-position: center center;
				/* 位置：left center right top bottom */
				/* 默认显示背景图的左上 */
				/* background-position: left top; */
				/* 可以用百分比进行显示，50% 50%表示显示上下左右的中间 */
				/* background-position: 50% 50%; */
				/* 也可以用像素进行显示，此显示为左上 */
				/* background-position: 0px 0px; */
				/* 将背景图合写到一行，注意书写顺序 */
				/* background:  pink url(img/1.jpg) no-repeat center center/auto 100%; */
			}
		</style>
	</head>
	<body>
		<div class="mydiv">
			
		</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mydiv1{
				width: 800px;
				height 300px;
				display: inline;
				margin-bottom: 30px;
				
			}
			span{
				width: 800px;
				height: 300px;
				background-color: pink;
				/* 块元素 */
				display: block;
				/* 内联元素 */
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class ="mydiv1">div元素</div>
		<!-- 内联元素不可以设置大小 -->
		<span>span元素</span>
	</body>
</html>

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav {
				/* 列表符号类型 */
				list-style-type: none;
				margin: 0;
				padding: 0;
				/* a用来控制透明度 */
				background-color: rgba(100, 100, 100, 5);
			}

			.nav>li {
				display: inline-block;
				padding: 5px;
			}

			.nav>li>a {
				text-decoration: none;
			}

			/* 鼠标滑过有颜色 */
			.nav>li>:hover {
				background-color: #FFC0CB;
			}

			.nav>li>:hover>a {
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品介绍</a></li>
			<li><a href="#">设备介绍</a></li>
			<li><a href="#">人事招聘</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>

浮动：破坏默认的文档流布局

  • 默认的文档流布局，块元素垂直排列，从下向上，行内元素，从左到右排列
  • 浮动元素遵循浮动布局规则：
  • 需要定义尺寸
  • 按照定义的顺序，left左浮动，right右浮动，依次向右
  • 浮动元素会释放原来占用的空间
  • 清除浮动
  • 必须是一个块元素（<div>最合适）
  • clear：both（清除左浮动，右浮动，使用的最多），left，right
  • 必须是清除元素的兄弟元素

示例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1,.d2,.d3 {
				width: 300px;
				height: 200px;
				/* 左浮动 */
				float: left;
				text-align: center;
				font-size: 40px;
			}
			.d1 {
				background-color: aquamarine;
			}
			.d2 {
				background-color: #FFC0CB;
			}
			.d3 {
				background-color: brown;
			}
			.d4 {
				width: 1200px;
				height: 100px;
				background-color: #FF0000;
			}
			.c {
				/* 清除浮动 */
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		
		
		<!-- 清除浮动 -->
		<div class="c"></div>
		
		
		
		<div class="d4"></div>
	</body>
</html>

在这里插入图片描述
示例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav {
				/* 列表符号类型 */
				list-style-type: none;
				margin: 0;
				padding: 0;
				background-color: rgba(100, 100, 100, 0.5);
				width: 500px;
			}
			.nav>li {
				float: left;
				padding: 5px 10px;
			}
			.nav>li>a {
				text-decoration: none;
				color: #666;
			}
			.nav::after {
				content: "";
				display: block;
				clear: both;
				width: 0;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品介绍</a></li>
			<li><a href="#">设备介绍</a></li>
			<li><a href="#">人事招聘</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述

分割div

方法1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mydiv {
				width: 90%;
				height: 400px;
				border: 1px solid #ccc;
				margin: 0 auto;
				overflow: hidden;
			}

			.wrapper {
				margin-right: -10px;
				/* background-color: rgba(0,0,0,0.5); */
				height: 100%;
			}

			.wrapper>.item {
				width: 25%;
				height: 100%;
				float: left;
			}

			.wrapper::after {
				content: "";
				display: block;
				clear: both;
				width: 0;
			}

			.wrapper>.item>div {
				margin-right: 10px;
				background-color: pink;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">
			<div class="wrapper">
				<div class="item">
					<div></div>
				</div>
				<div class="item">
					<div></div>
				</div>
				<div class="item">
					<div></div>
				</div>
				<div class="item">
					<div></div>
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
方法二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 90%;
				height: 400px;
				/* border: 1px solid #ccc; */
				margin: 0 auto;
				background-color: #000000;
			}

			.class1 {
				float: left;
				height: 100%;
				width: calc((100% - 40px) / 4);
				background-color: blueviolet;
				margin-right: 10px;
			}

/* 			.class1:last-child {
				margin-right: 0;
			} */
		</style>
	</head>
	<body>
		<div class="main">
			<div class="class1"></div>
			<div class="class1"></div>
			<div class="class1"></div>
			<div class="class1"></div>
		</div>
	</body>
</html>

在这里插入图片描述

定位：破坏默认的文档流，可以让一个元素定位到页面的任意位置。

  • 遵循定位规则
  • 自定义位置
  • 自定义定位方式
  • 绝对定位：可以定位到页面的任意位置
  • 参照物：从当前元素的父元素开始向上查找，第一个非static定位的元素即为参照物，如果找不到，则以boby为参照物
  • 相对定位:可以定位到页面的任何位置
  • 参照物:以未偏移之前，自己的位置为参照物
  • 固定定位
  • 参照物：以视区为参照（若页面滚动，则也不变）

示例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 400px;
				height: 400px;
				background-color: pink;

				/* 定位 static|absolute|relative|fixed*/
				position: absolute;
				/* top: 100px;
				left: 100px; */
				margin-top: 200px;
				margin-left: 200px;
				
				/* right: 100px;
				bottom: 100px; */
			}

			.class1 {
				width: 100px;
				height: 100px;
				background-color: green;
				/* 小广告 */
				position: fixed;
				
				top: 20px;
				left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="class1"></div>
		</div>
		
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
		<p>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br>很多文字<br></p>
	</body>
</html>

在这里插入图片描述
示例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				height: 100%;
			}
			body {
				margin: 0;
				padding: 0;
			}

			.lft {
				width: 200px;
				height: 20%;
				background-color: chocolate;
			}
			.main {
				position: absolute;
				top: 0;
				left: 200px;
				height: 20%;
				width: calc(100% - 200px);
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="lft"></div>
		<div class="main"></div>
	</body>
</html>

在这里插入图片描述
示例三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				height: 300px;
			}

			body {
				margin: 0;
				padding: 0;
			}

			.top {
				height: 100px;
				background-color: pink;
			}

			.bot {
				position: absolute;
				top: 200px;
				/* bottom: 0;
				left: 0; */
				width: 100%;
				height: 100px;
				background-color: #D2691E;
			}

			.ctr {
				position: absolute;
				top: 100px;
				left: 0;
				height: calc(100% - 200px);
				width: 100%;
			}

			.ctr>div {
				float: left;
				height: 100%;
			}
			
			.ctr>div:first-child {
				width: 200px;
				background-color: #7FFFD4;
			}
			
			.ctr>div:nth-child(2) {
				width: calc(100% - 400px);
				background-color: blue;
			}
			
			.ctr>div:last-child {
				width: 200px;
				background-color: green;
			}

			.ctr::after {
				content: "";
				display: block;
				clear: both;
				width: 0;
			}
		</style>
	</head>
	<body>
		<div class="top"></div>
<!-- 		<div class="ctr">
			<div></div>
			<div></div>
			<div></div>
		</div> -->
		<div class="bot"></div>
	</body>
</html>

在这里插入图片描述

常用样式

  • transparent:透明色，表示完全透明
铅笔芯片
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-将多个div切割，通过定位实现一个图案
MyBlog
11-06 1349
CSS-将多个div切割，通过定位实现一个图案 通过CSS3中clip-path属性来实现个大象 同过clip-path对div进行裁剪时可以利用PS对原图片进行取色并获取一定的比例。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
html/css——盒模型
weixin_52486516的博客
11-17 342
盒模型 把网页中的所有html标签都当作一个盒子，通过盒子的内容（width宽、height高）、内边距（padding）、边框（border）、外边距（margin），来给每个盒子设置特定的样式属性。 六边形相框、三角形
动态分割两个div，鼠标拖动改变左右两个div宽度的效果。
五花漏的博客
06-08 2010
HMTL： <div class="father" id="app"> <div class="leftChild" id="leftChild">--leftChild--</div> <div id="line"></div> <div class="rightChild" id="rightChild">--rightChild--</div> </
CSS文字描边，文字间隔，div自定义形状切割
最新发布
m0_61604012的博客
05-10 228
CSS文字描边，文字间隔，div自定义形状切割
css裁剪
weixin_49295874的博客
01-13 1851
【代码】css裁剪。
不规则裁剪图片css,在css中将div剪裁成不规则形状的方法
weixin_29980355的博客
08-04 1374
这里有一个可能性，它的成功将取决于一些JS：body {background: gray;}.test {background: white;position: absolute;top: 2em;left: 10em;width: 20em;&:before {content: "";position: absolute;top: 1em;left: -4em;border-width:...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
**Div+CSS布局详解** Div（Division）+CSS（Cascading Style Sheets）布局是网页设计中的核心概念，它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf"，是一份全面的学习Div+CSS布局...
html-DIV-demo.rar_DIV CSS美观_DIV DEMO html_demo html div_div de
09-23
1. 盒模型：理解CSS盒模型（包括内容、内边距、边框和外边距）对于创建精确的布局至关重要。 2. 布局模式：可能涉及流体布局、响应式布局（使用媒体查询@media），以适应不同设备和屏幕尺寸。 3. 颜色和背景：使用...
东北人div-css 1-1
03-07
4. **布局技术**：学习浮动(float)、定位(position)以及Flexbox（弹性盒模型）和Grid（网格布局）等现代布局方法，掌握网页复杂结构的构建技巧。 5. **响应式设计**：理解媒体查询@media，如何根据设备的不同特性...
DIV+CSS精美布局模板
10-14
此外，通过查看和分析模板的CSS代码，还可以学习到如何有效地应用浮动、定位、盒模型、弹性布局（Flexbox）或网格布局（Grid）等技术，提升自己的CSS技能。 总的来说，"DIV+CSS精美布局模板"不仅提供了现成的设计...
div+css实战项目：有道云页面
08-14
同时，CSS布局技术，如浮动（float）、定位（position）和Flexbox（弹性盒模型）或Grid（网格布局）也将得到实践。这些布局技术能帮助你实现灵活的网页设计，适应不同屏幕尺寸的设备。 HTML5作为现代网页的标准，...
CSS3边框 阴影 盒模型和图片裁剪简介
弹指一挥间
05-06 1063
一、边框阴影： box-shadow 里面有4个参数 第一个是水平偏移量 右边为正左边为负，第二个是竖直偏移量，上面为负下面为正 所以两个正就为右下角的两条边！ 第三个参数就是模糊度 当你把模糊度设置了的时候，那么他就会有一定像素的模糊度。第四个参数是偏移量 偏移量为负数的时候那么他就会向图形里面偏移 当为正数的时候就向图形外面偏移，边框阴影不会影响到盒子的布局！内阴影在...
div显示过长，截断并展示...的css操作
art_people的博客
11-18 1038
1、首先div要有宽度 2、设置div的样式为 .div{ width:宽度; overflow:hidden; //超长部分不显示 text-overflow:ellipsis;//超长显示... white-space: nowrap;//不折行显示 }
网页入门D4——盒模型布局（DIV+CSS3页面布局）
m0_53156691的博客
01-20 4518
盒模型布局——DIV+CSS3页面布局 勤学勤练方能实现。 为了呈现不同的视觉效果，网页布局往往千变万化。网页布局的基础就是盒模型。如果说网页是一座城堡，那么盒模型就是堆砌城堡的一块块积木。 在网页布局的过程中，要遵循从大到小，从结构到细节的顺序。先搭好框架再往里面填充内容和细节。框架搭的好，城堡才稳固。
通过css把一个div盒子均分成上三个下三个
l10103的博客
04-07 2689
通过css把一个div盒子均分成上三个下三个
利用div+CSS实现与clip相同作用的图片剪切
YOU13777299447的博客
01-18 331
　　在看CSS网站布局实录的时候，发现了一个挺有意思的东西，特记录在此。 　　我们在网站中引入一张图片的时候，有时候需要将这张图片剪切一下，这个时候需要用到CSS中的clip属性，语法为：clip（上 右 下 左） 　　这样我们就能剪切一张图片并显示了，但是有时候需求却不仅仅是剪切图片，而且还要为图片添加边框，这里就要动动脑子了。 　　书中介绍的方法是这样的：在要剪切的图片外面添加...
css3的clip-path方法剪裁实现（三角形，多边形，圆，椭圆）
热门推荐
卡卡罗特的博客
06-06 3万+
本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。&lt;div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;...
css裁切（clip）
枫叶时代的博客
05-28 1782
一、纯css裁切 <html> <head> <style type="text/css"> #ball1{ width:100px; height:100px; background-color:red; border-radius:50%; position:absolute; clip:rect(0px,50px,50px,0px); } #ball2...
css将div分割成两列
lovenkcs的专栏
05-21 7454
在css代码中有一组属性如下：-webkit-column-count: 2; // Chrome, Safari, Opera -moz-column-count: 2; // Firefox column-count: 2; -webkit-column-gap: 4%; // Chrome, Safari, Opera -moz-column-gap: 4%; // Firefox colum
CSS-DIV 十天搞定
09-16
CSS-DIV 十天搞定，CSS，即层叠样式表，是一种用来设置网页排版、设计和网页字体颜色、大小等样式的技术。在网页设计与开发中，CSS扮演着重要的角色。本教程将带领读者通过十天的学习，掌握CSS的基本知识和技巧，让...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值