CSS浮动--慕课网

已于 2022-05-11 11:46:45 修改
阅读量213 收藏 1
点赞数
分类专栏： 前端 文章标签： css html css3
于 2022-05-01 22:23:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangshengwei230612/article/details/124512871
版权

在这里插入图片描述
在这里插入图片描述

1.div简介

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

div的溢出处理

在这里插入图片描述

owerflow属性

在这里插入图片描述

边框属性

在这里插入图片描述

在这里插入图片描述

2.盒子模型

盒子模型主要是用来改变外间距和内间距的 ，像 div table body 所有块状显示的即以矩形区域显示的都适合于盒子模型。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

盒子模型属性

在这里插入图片描述

在这里插入图片描述

box-sizing

在这里插入图片描述

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="div1">
		慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
	</div>
	
	<div id="div2">
		慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
	</div>
</body>
</html>

div{
	width: 200px;
	height: 200px;
	overflow: hidden;
	margin-left: 20px;
}
#div1{
	background-color: yellow;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
#div2{
	background-color: blue;

}

*{
	/*margin:0px 0px 0px 0px;*/
	/*margin:0px 0px;*/
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right:0px;
}

在这里插入图片描述

3. 浮动(float)

脱离原来的文档流浮动，变成一个浮动层

例如：div2会脱离文档流变成一个独立浮动层，也不会受父div的限制。

<body>
	<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</div>
</body>

行元素与块元素

在这里插入图片描述
在这里插入图片描述

定位机制

在这里插入图片描述

float属性设置

在这里插入图片描述

float 初衷、包裹、崩溃

崩溃(破快)

崩溃的前提需要设置浮动属性

float作为父级元素的时候，父级元素的高度发生了崩溃

将子元素指定了高度后，并设置了浮动，而父元素没有指定高度，父元素的高度将不存在，这特点将成为奔溃

<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>

在这里插入图片描述

在这里插入图片描述

包裹

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="div1">
	   <img src="image/wudaojiaoshi.jpg"/>
	   <p>
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
	   </p>
	</div>
	 
</body>
</html>


#div1{
	background-color: rgb(137, 68, 206);
	float:left;
}
img{
	vertical-align: bottom;
	float: left;
}
p{
	margin-top: -7px;
	text-align: justify;
	line-height: 30px;
	background-color: #b12b2b;
}

在这里插入图片描述

设计初衷

float 的设计初衷是为了图文混排(环绕方式的)，文字和矩形区域图片能环绕布局的，后应用到了更对的场景如商品列表并排显示

浮动清楚

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</div>
</body>
</html>

#div1{
	background-color: red;
	padding-bottom: 2px;
}
#div2{
	background-color: yellow;
	float: left;
	width: 200px;
	height: 200px;
}
#div3{
	background-color: blue;
	float: left;
	width: 220px;
	height: 220px;
}
#div4{
	background-color: black;
	
	width: 240px;
	height: 240px;
	/* 清楚浮动 */
	clear: both;
}

在这里插入图片描述

方式二 (主流使用方式)

适用于复杂的网页设计

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="clearDiv"></div>
		<div id="div4"></div>
 	</div>
</body>
</html>



#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
	float: left;
	width: 200px;
	height: 200px;
}
#div3{
	background-color: blue;
	float: left;
	width: 220px;
	height: 220px;
}
#div4{
	background-color: black;
	width: 240px;
	height: 240px;
	/*clear: both;*/
}
/* 清楚浮动 */
#clearDiv::after{
	content: "";
	visibility: hidden;
	height: 0px;
	display: block;
	clear: both;
}

/* 浏览器适应 */
#clearDiv{
	zoom:1;
}
紫金小飞侠
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS温习回顾—CSS浮动
ImmortalSYM的博客
05-26 130
CSS温习回顾 CSS浮动 浮动简介 浮动主要作用是让页面中的元素可以水平排列，通过浮动可以进行水平方向布局； —通过浮动可以使一个元素向其父元素的左侧或者右侧移动，使用 float 属性设置子元素的浮动； —可选值 ​ —none： 默认值，元素不浮动； ​ —left： 元素向左浮动； ​ —right： 元素向右浮动； —注意元素设置浮动后，水平布局的等式就不需要强制成立； —元素设置浮动以后，会完全从文档流中脱离，不在占用文档流的位置，所以其下边的元素（
CSS-浮动
JINGJID的博客
04-09 1747
1.display display的用法： block:块元素 inline-size: 行内元素 inline-block：是块元素，但可以内联，在一行 none：消失
边框及浮动布局
zjt200013的博客
07-20 235
浮动元素直到遇到父级元素或者同级浮动元素的边沿时停下，多个浮动元素相遇会按照内联的排列方式进行排列。给浮动元素添加，添加后可以控制当前元素不以内联排列的方式去找其他浮动元素。1.加高法给父元素添加高度，值大于等于浮动子元素的高度，把浮动元素关在有高度的盒子之内。使用浮动布局，必须在最后一个浮动元素结束的地方清除浮动，否则会影响后续页面，也会导致父元素不能根据内容显示高度。多个浮动元素相遇会按照内联的排列方式进行排列，会覆盖页面中正常的文档流中的内容。2.元素使用浮动元素之后会脱离文档流，参与浮动文档流；..
php浮动边框设置属性,CSS float 浮动属性
weixin_31916125的博客
04-10 271
本篇主要介绍float属性：定义元素朝哪个方向浮动。目录：1. 页面布局方式：介绍文档流、浮动层以及float属性。2. float:left ：介绍float为 left 时的布局方式。3. float:right ：介绍float为 right 时的布局方式。4. 相邻元素含有float属性：介绍相邻元素含有float属性时的布局方式。1. 页面布局方式页面布局方式，主要包含：文档流、浮动层、...
jQuery九类选择器详解
weixin_30297281的博客
01-05 93
（1）基本选择器 <body> <div id="div1ID">div1</div> <div id="div2ID">div2</div> <span class="myClass">span</span> <p>p</p> &lt...
Day06-CSS布局-浮动
07-10
【CSS布局-浮动详解】 在Web开发中，CSS布局是构建网页结构的关键技术之一，而“浮动”（Float）是CSS布局中一个重要的概念，它主要用于创建多列布局和实现图文混排效果。本篇文章将深入探讨CSS浮动的原理、用途...
SSM项目-慕课书评网
12-21
这个“SSM项目-慕课书评网”显然是一款基于SSM的在线图书评论平台，旨在提供用户评价书籍的功能。在这个项目中，前端开发组件的选择对于用户体验和功能实现至关重要。 首先，让我们关注一下前端使用的组件库。项目...
css基础4-浮动布局
12-05
CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式，通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局，让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种...
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
$ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...
CSS inline-block属性概述及其使用示例
09-25
CSS中的`inline-block`属性是`display`属性的一个值，它允许元素同时具有行内元素（inline elements）和块级元素（block elements）的特点。理解`inline-block`的关键在于其结合了两者的优势：行内元素的水平布局...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 606
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1173
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1161
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
旋转木马案例
喵喵的博客
07-08 760
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
css画半圆&&画圆弧
M1512415的博客
07-12 141
【代码】css画半圆&&画圆弧。
html&css基础
antyuki的博客
07-09 741
/
CSS上下悬浮特效
m0_56164131的博客
07-09 453
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
如何使一个盒子水平垂直居中（常用的）
karlaofsky的博客
07-08 631
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。//子元素宽度的一半。//子元素高度的一半。来直接减去盒子自身的50%大小。将盒子的上下左右定位全部设置为0，同时设置外边距自适应。
css --w --h
07-27
CSS中的`--w`和`--h`不是真正的CSS属性，而是自定义属性（custom properties）或者叫做CSS变量（CSS variables）。它们是用来存储和重用值的。 在CSS中，我们可以使用`--`前缀来定义自定义属性。例如，你可以这样...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值