css基础知识汇总6

最新推荐文章于 2024-06-07 19:12:10 发布
最新推荐文章于 2024-06-07 19:12:10 发布
阅读量212 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnalogElectronic/article/details/108525033
版权

高度塌陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.box1{
				/*为box1设置一个边框*/
				border: 10px red solid;
				
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				
				/*
				 * 在文档流中，父元素的高度默认是被子元素撑开的，
				 * 	也就是子元素多高，父元素就多高。
				 * 但是当为子元素设置浮动以后，子元素会完全脱离文档流，
				 * 	此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
				 * 	由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
				 * 
				 * 所以在开发中一定要避免出现高度塌陷的问题,
				 * 	我们可以将父元素的高度写死，以避免塌陷的问题出现，
				 * 	但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
				 */
				
				/*为子元素设置向左浮动*/
				float: left;
			}
			
			.box3{
				 height: 100px;
				 background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box1">
			<div class="box2"></div>
		</div>
		
		<div class="box3"></div>
		
	</body>
</html>

在这里插入图片描述

解决高度塌陷1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.box1{
				border: 10px red solid;
				/*
				 * 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
				 * 	简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
				 * 当开启元素的BFC以后，元素将会具有如下的特性：
				 * 	1.父元素的垂直外边距不会和子元素重叠	
				 * 	2.开启BFC的元素不会被浮动元素所覆盖
				 * 	3.开启BFC的元素可以包含浮动的子元素
				 * 
				 * 如何开启元素的BFC
				 * 	1.设置元素浮动
				 * 		- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
				 * 			而且使用这种方式也会导致下边的元素上移，不能解决问题
				 * 	2.设置元素绝对定位
				 * 	3.设置元素为inline-block
				 * 		- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
				 * 	4.将元素的overflow设置为一个非visible的值
				 * 	
				 * 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。	
				 */
				
				/*overflow: hidden;*/
				
				/*
				 *但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
				 * 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
				 * 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
				 * 开启方式很多，我们直接使用一种副作用最小的：
				 * 	直接将元素的zoom设置为1即可
				 * 
				 */
				
				/*
				 * zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
				 * zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
				 * zoom这个样式，只在IE中支持，其他浏览器都不支持
				 */
				zoom:1;
				overflow: hidden;
				
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
				
			}
			
			.box3{
				 height: 100px;
				 background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box1">
			<div class="box2"></div>
		</div>
		
		<div class="box3"></div>
		
	</body>
</html>

在这里插入图片描述

导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航条</title>
		<style type="text/css">
			
			/*
			 * 清除默认样式
			 */
			*{
				margin:0;
				padding:0;
			}
			
			/*
			 * 设置ul
			 */
			.nav{
				/*去除项目符号*/
				list-style: none;
				/*为ul设置一个背景颜色*/
				background-color: #6495ED;
				/*设置一个宽度*/
				/*
				 * 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
				 */
				width: 1000px;
				/*设置元素居中*/
				margin: 50px auto;
				/*解决高度塌陷*/
				overflow: hidden;
			}
			
			/**
			 * 设置li
			 */
			.nav li{
				/*设置li向左浮动*/
				float: left;
				width: 12.5%;
			}
			
			.nav a{
				/*将a转换为块元素*/
				display: block;
				/*为a指定一个宽度*/
				width: 100%;
				/*设置文字居中*/
				text-align: center;
				/*设置一个上下内边距*/
				padding: 5px 0;
				/*去除下划线*/
				text-decoration: none;
				/*设置字体颜色*/
				color: white;
				/*设置加粗*/
				font-weight: bold;
			}
			
			/*
			 * 设置a的鼠标移入的效果
			 */
			.nav a:hover{
				background-color: #c00;
			}
			
			
		</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>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>
		
	</body>
</html>

在这里插入图片描述

清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/*
				 * 设置box1向左浮动
				 */
				float: left;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				/*
				 * 由于受到box1浮动的影响，box2整体向上移动了100px
				 * 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
				 * clear可以用来清除其他浮动元素对当前元素的影响
				 * 可选值：
				 * 		none，默认值，不清除浮动
				 * 		left，清除左侧浮动元素对当前元素的影响
				 * 		right，清除右侧浮动元素对当前元素的影响
				 * 		both，清除两侧浮动元素对当前元素的影响
				 * 				清除对他影响最大的那个元素的浮动
				 */
				
				/*
				 * 清除box1浮动对box2产生的影响
				 * 清除浮动以后，元素会回到其他元素浮动之前的位置
				 */
				/*clear: left;*/
				float: right;
			}
			.box3{
				width: 300px;
				height: 300px;
				background-color: skyblue;
				
				clear: both;
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="box1"></div>
		
		<div class="box2"></div>
		
		<div class="box3"></div>
		
	</body>
</html>

在这里插入图片描述

解决高度塌陷2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				border: 1px solid red;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				
				float: left;
			}
			
			/*
			 * 解决高度塌陷方案二：
			 * 	可以直接在高度塌陷的父元素的最后，添加一个空白的div，
			 * 	由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
			 * 	然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
			 * 	基本没有副作用
			 * 
			 * 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
			 */
			.clear{
				clear: both;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="clear"></div>
		</div>
	</body>
</html>

在这里插入图片描述

解决高度塌陷3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				border: 1px solid red;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				
				float: left;
			}
			
			/*通过after伪类，选中box1的后边*/
			/*
			 * 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
			 * 	这样做和添加一个div的原理一样，可以达到一个相同的效果，
			 * 	而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
			 */
			.clearfix:after{
				/*添加一个内容*/
				content: "";
				/*转换为一个块元素*/
				display: block;
				/*清除两侧的浮动*/
				clear: both;
			}
			
			/*
			 * 在IE6中不支持after伪类,
			 * 	所以在IE6中还需要使用hasLayout来处理
			 */
			.clearfix{
				zoom:1;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

在这里插入图片描述

开班信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*清除默认样式*/
			*{
				margin: 0;
				padding: 0;
			}
			
			/*统一页面中的字体*/
			body{
				font: 12px/1 宋体;
			}
			
			/*设置outer的大小*/
			.outer{
				width: 300px;
				/*height: 473px;*/
				/*background-color: #bfa;*/
				/*设置outer居中效果*/
				margin: 50px auto;
			}
			
			/*
			 * 设置title的边框
			 */
			.title{
				/*设置上边框*/
				border-top:2px #019e8b solid ;
				/*设置盒子的高度*/
				height: 36px;
				/*设置背景样式*/
				background-color: #f5f5f5;
				/*设置title的行高*/
				line-height: 36px;
				/*设置title的内边距*/
				padding: 0px 22px 0px 16px;
			}
			
			/*
			 	设置title中的超链接
			 * */
			.title a{
				float: right;
				/*设置字体颜色*/
				color: red;
			}
			
			/*设置h3*/
			.title h3{
				font: 16px/36px "微软雅黑";
			}
			
			/*设置内容*/
			.content{
				border: 1px solid #deddd9;
				/*设置内边距*/
				padding: 0px 28px 0px 20px;
			}
			
			/*设置内容中的超链接*/
			.content a{
				color: black;
				/*去除超链接的下划线*/
				text-decoration: none;
				/*设置字体大小*/
				font-size: 12px;
			}
			
			/*为超链接添加一个hover伪类*/
			.content a:hover{
				color: red;
				/*为超链接添加下划线*/
				text-decoration: underline;
			}
			
			/*设置内容中的标题*/
			.content h3{
				margin-top: 14px;
				margin-bottom: 16px;
			}
			
			/*
			 * 设置右侧的a的样式
			 */
			.content .right{
				/*设置向右浮动*/
				float: right;
			}
			
			/*设置ul的样式*/
			.content ul{
				/*去除项目符号*/
				list-style: none;
				/*为ul设置一个下边框*/
				border-bottom: 1px dashed #deddd9;
			}
			
			/*取消最后一个ul的边框*/
			.content .no-border{
				border: none;
			}
			
			/*设置内容中的红色字体*/
			.content .red{
				color: red;
				font-weight: bold;
			}
			
			/*设置内容中的li*/
			.content li{
				margin-bottom: 15px;
			}
			
			
		</style>
	</head>
	<body>
		
		<!--创建一个外层div，容纳整个内容-->
		<div class="outer">
			
			<!-- 开班信息的头部 -->
			<div class="title">
				<a href="#">16年面授开班计划</a>
				<h3>近期开班</h3>
			</div>
			
			<!-- 开班信息的主要内容 -->
			<div class="content">
				<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
				<ul>
					<li>
						<a class="right" href="#"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					</li>
					<li>
						<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
						<a href="#">开班时间：<span class="red">2016-04-07</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-03-15</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-02-25</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2015-12-26</span></a>
					</li>
				</ul>
				
				<h3><a href="#">Android+人工智能-全程就业班</a></h3>
				<ul>
					<li>
						<a class="right" href="#"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-10</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-03-17</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-02-20</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2015-12-23</span></a>
					</li>
				</ul>
				<h3><a href="#">前端+HTML5-全程就业班</a></h3>
				<ul class="no-border">
					<li>
						<a class="right" href="#"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-05-10</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-03-16</span></a>
					</li>
				</ul>
			</div>
			
		</div>
		
	</body>
</html>

在这里插入图片描述

AnalogElectronic
关注
专栏目录
float浮动
qq_44820039的博客
11-13 819
这里写自定义目录标题我对浮动的认识和理解1.定位2.定位的分类3.定位-普通流定位4.浮动定位3.清除浮动：浮动元素对父元素带来的影响一二三四 我对浮动的认识和理解 1.定位 所谓定位，实际上就是定义元素框相对其正常位置，应该出现在哪儿。 简单说： 定位就是改变元素的页面上的默认的位置 2.定位的分类 1.普通流定位（元素默认的定位方式） 2.浮动定位 3.相对定位 4.绝对定位 ...
css 基础知识总结以及demo
04-09
标签引用CSS文件 在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。 样式表路径+名称.css"> 引用后CSS文件仍然是独立的，不会受到包括HTML和JavaScript...
关于浮动遇到的高度塌陷和外边距塌陷
weixin_52079958的博客
08-04 366
众所周知，浮动会脱离文档流，因此会出现一些问题，今天我来给大家提供一些解决方案 一、浮动造成的高度塌陷 <head> <style> .box1 { border: 1px solid black; } .box2 { float: left; height: 200px; width: 400px;
HTML浮动与定位
qq_43256819的博客
08-29 1326
浮动 浮动的最本质功能：用来实现并排 要浮动，并排的盒子都要设置浮动 要浮动，并排的盒子都要设置浮动 子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等 右浮动 float:right;即可设置右浮动 tips 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！ “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动 超市售卖的塑料袋0.
浮动，定位
oyjl19961216的博客
10-15 174
浮动 浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字...
css清除浮动(css 解决浮动元素引起的高度问题)
gzyzwx的博客
08-27 1112
首先了解两个概念： 文档流：文档流是文档中可显示对象在排列时所占用的位置。 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。   本人经常...
CSS基础知识汇总
ximu__l的博客
06-07 1223
本文是关于CSS技术的基础内容，详细展列了CSS技术相关的基础。
CSS基础知识总结
Lotus_fragrance的博客
04-29 4051
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
CSS基础知识总结-新手入门篇
08-03
**CSS基础知识总结** **1. CSS概述** CSS（Cascading Style Sheets）是层叠样式表，主要用于美化HTML页面。它允许我们独立于内容来定义网页的布局和样式，使得网页设计更加灵活和可控。CSS可以控制网页元素的颜色、...
css,基础知识小总结
最新发布
07-06
### CSS基础知识小结 #### 一、CSS选择器 **1.1 标签选择器** - **定义**: 使用HTML标签名称作为选择器。 - **语法**: `标签名 {属性: 属性值;}`。 - **示例**: ```css div { color: red; } ``` **1.2 类...
CSS的浮动及清除浮动的5种方法
renjie123321的博客
09-25 324
浮动是布局的时用到的一种技术，能够方便我们进行布局。 1、浮动的设置： css属性float： left/right/none 左浮动/右浮动/不浮动（默认） 2、浮动的原理： 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3、浮动的影响： 对附近的元素布局造成改变，使得布局混乱 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象： 原来的父容器高度是...
基于微信小程序做了个交友小程序
AnalogElectronic的博客
06-01 3359
实现的功能是用户上传自己的资料，给大家看。其实就是一个交友、婚恋、相亲的免费广告平台。 先看效果 主要代码： 01列表页 <!--index.wxml--> <!-- <form bindsubmit="formSubmit"> <input name="name" placeholder="请输入名字"></input> <button form-type="submit">submit</button> </
jQuery学习笔记05
AnalogElectronic的博客
09-27 1903
常见效果 01__表格隔行变色.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行变色</title> <style> div, span, p { width: 140px; height: 140px; margin: 5px; backg
微信小程序十二时辰时钟
AnalogElectronic的博客
06-27 1563
微信小程序十二时辰时钟
js+html实现打字游戏v1
AnalogElectronic的博客
09-04 1169
实现逻辑：设置定时器每秒刷新一次，定时器刷新多少次执行一次生成单词操作来决定单词的生成速度，例如初始单词生成速度为1，那么定时器刷新5次才生成一次单词，每个单词用span来装，每组10个单词放到div里。监听键盘按下事件，用一个变量str记录键盘连续按下的字母组成的字符串，当字符串str包含span中的字符串，则span变红，同时右下角得分数加1，当div中的一排span都变红时，从body里删掉该div。//这里可以使用固定单词。//清除全部打出的一行。
js+html实现打字游戏v2
AnalogElectronic的博客
09-04 1161
/单词生成速度，可以根据当前得分来设置，得分越高速度越快，比如当得分大于200时速度设为2，大于300百是速度设为3。，在此基础之上增加了从文件读取到的单词，随机选取10个单词。//从文件读取到的单词，随机选取10个单词。附录：englishg words.txt。//这里可以使用固定单词。//清除全部打出的一行。
微信小程序滚动字幕
AnalogElectronic的博客
06-27 975
微信小程序滚动字幕
html css基础知识汇总
06-27
**CSS基础知识：** 1. **选择器**：CSS通过选择器来选择要应用样式的HTML元素，如`*`（所有元素）、`#id`（id选择器）、`.class`（类选择器）等。 2. **样式声明**：每种选择器后跟着的是CSS声明，如`color: red;`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值