CSS学习笔记二（详细）

最新推荐文章于 2024-07-19 14:58:51 发布
最新推荐文章于 2024-07-19 14:58:51 发布
阅读量521 收藏 13
点赞数 1
分类专栏： 前端 文章标签： css 浮动 margin 清除浮动 IE6兼容问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Speed_Pig/article/details/88130442
版权

文章目录

浮动的清除

首先看一个案例：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: orange;
			text-align: center;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javcscript</li>
			<li>jQuery</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>python</li>
		</ul>
	</div>
</body>

在这里插入图片描述
我们本以为这些li会排成两排，但是第二组的第一个li去贴第一组的最后一个li了。

其实根本的原因就是div没有高度。
在这里插入图片描述
在这里插入图片描述

清除浮动方法1：给浮动元素的祖先元素加高度

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			height: 40px;
		}
		.box2{
			margin-top: 10px;
		}
		div li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javcscript</li>
			<li>jQuery</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>python</li>
		</ul>
	</div>
</body>

在这里插入图片描述
有高度的盒子，才能关住浮动。

清除浮动方法2：clear:both

网页制作中，高度height很少出现。因为它能被内容撑起来；用高度清除浮动的方法，工作中很少用。

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		.box2{
			clear: both;
		}

		div li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javcscript</li>
			<li>jQuery</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>python</li>
		</ul>
	</div>
</body>

clear:both;清除浮动，清除别人对我的影响。

这种方法有个非常大的致命问题，margin失效了。其实这也是由于盒子没有height。

清除浮动方法3：隔墙法

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		div li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.cl{
			clear: both;
		}
		.h5{
			height: 5px;
		}
		.h8{
			height: 8px;
		}
		.h10{
			height: 10px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javcscript</li>
			<li>jQuery</li>
		</ul>
	</div>
	<div class="cl h8"></div>
	<div class="box2">
		<ul>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>python</li>
		</ul>
	</div>
</body>

<div class="cl h8"></div>	隔墙法

在这里插入图片描述
此时，这两个div还是没有height。不过已经通过这种方式实现了某种意义上的margin。

内墙法

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.box1{
			background-color: pink;
		}
		.cl{
			clear: both;
		}
		.h16{
			height: 16px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javcscript</li>
			<li>jQuery</li>
		</ul>
		<div class="cl h16"></div>
	</div>

	<div class="box2">
		<ul>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>python</li>
		</ul>
	</div>
</body>

在这里插入图片描述
此时第一个盒子有height了。
在这里插入图片描述

清除浮动方法4：overflow:hidden

overflow:hidden表示隐藏溢出的部分。

观察：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div>
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
	</div>
</body>

在这里插入图片描述
添加overflow

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div>
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
	</div>
</body>

在这里插入图片描述
本意就是清除溢出盒子外的文字、图片。但是它也可以解决由于浮动带来的影响。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么父亲就能够被儿子撑出高了。

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		div{
			width: 400px;
			border: 5px solid black;
			margin: 50px;
			overflow: hidden;
		}
		.p1{
			float: left;
			width: 100px;
			height: 150px;
			background-color: red;
		}
		.p2{
			float: left;
			width: 90px;
			height: 200px;
			background-color: yellow;
		}
		.p3{
			float: left;
			width: 100px;
			height: 300px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div>
		<p class="p1"></p>
		<p class="p2"></p>
		<p class="p3"></p>
	</div>
</body>

在这里插入图片描述

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div ul li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.box1{
			overflow: hidden;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javcscript</li>
			<li>jQuery</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>python</li>
		</ul>
	</div>
</body>

在这里插入图片描述

清除浮动总结

1. 加高法；

浮动的元素只能被有高度的盒子关住，但是，工作上，我们绝对不会给所有的盒子进行加高，除了麻烦，还不能 适应页面的变化。

例如：
在这里插入图片描述
当页面变化了；如蓝色的盒子高度减少了。
在这里插入图片描述

2. clear:both

最简单的清除浮动的方法，就是给盒子增加clear:both;表示自己内部元素，不受其他盒子影响。

语法：

1	<div>
2		<p></p>
3		<p></p>
4		<p></p>
5	</div>
6	
7	<div>   → clear:both;
8		<p></p>
9		<p></p>
10		<p></p>
11	</div>

浮动确实清除了，不会互相影响了，但是有一个问题就是margin失效了，两个div之间，没有任何间隙了。

3. 隔墙法

在两部分浮动的元素之间，建一堵墙。隔开两部分浮动，让后面浮动的元素，不去追前面浮动的元素。可以实现用墙的身体充当间隙。

语法：

1	<div>
2		<p></p>
3		<p></p>
4		<p></p>
5	</div>
6	
7	<div class="cl h10"></div>
8	
9	<div>
10		<p></p>
11		<p></p>
12		<p></p>
13	</div>

但是我们发现第一个div还是没有高度，如果我们想让第一个div，自动根据自己的儿子，撑出高度，我们需要一些“小伎俩”。

内墙法

1	<div>
2		<p></p>
3		<p></p>
4		<p></p>
5		<div class="cl h10"></div>
6	</div>
7	
8	<div>
9		<p></p>
10		<p></p>
11		<p></p>
12	</div>

内墙法的优点就是不仅让第二个div中的p不去追第一个div中的p了；而且第一个div的高度也被p所撑开了。

4. overflow:hidden;

这个属性的本意，是将溢出盒子部分的文字，图片隐藏。

我们知道一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上overflow:hidden；那么这个父亲就能自动的被自己浮动的儿子撑出高度。并让margin生效。

一个清除浮动的小案例

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.news{
			width: 400px;
			height: 200px;
			border: 1px solid gray;
			margin: 100px;
		}
		.news ul{
			list-style: none;
		}
		.news ul li{
			overflow: hidden;
			border-bottom: 1px dashed gray;

		}
		.news ul li .title{
			float: left;
		}
		.news ul li .date{
			float: right;
		}
	</style>
</head>
<body>
	<div class="news">
		<ul>
			<li>
				<span class="title">哈哈哈哈哈哈</span>
				<span class="date">2019年3月5日</span>
			</li>
			<li>
				<span class="title">嘻嘻嘻嘻嘻嘻</span>
				<span class="date">2019年3月5日</span>
			</li>
			<li>
				<span class="title">呜呜呜呜呜呜</span>
				<span class="date">2019年3月5日</span>
			</li>
		</ul>
	</div>
</body>

在这里插入图片描述

浏览器兼容问题（了解）

微型盒子问题

IE6不支持微型盒子（大概是12px左右），任何在12px左右的盒子，在IE6中看都大。

解决方法，就是将盒子的字号设置小（小于盒子的高）,比如0px；

height:5px;
font-size:0;

可以将属性font-size加下划线，即_font-size;这是IE6留的一个后门，加上下划线后，这个属性就是IE6的专属属性，其他的不解析。

比如：

_background-color:green;

在这里插入图片描述
所以解决微型盒子，最佳写法：

height:10px;
_font-size:0;
不支持overflow:hidden清除浮动问题

IE6不支持overflow:hidden来清除浮动。

解决方法

_zoom:1;

完整写法

overflow:hidden;
_zoom:1;

实际上，_zoom:1；能够触发IE6浏览器的hasLayout机制。

其实，现在市场上IE6，已经差不多全部淘汰，它的兼容性问题，已经不会再去过多的深究。

margin

margin塌陷现象

标准文档流中竖直方向上的margin不叠加，以较大的为准。

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

盒子居中margin:0 auto;

margin的可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子就居中了。

观察一个盒子

margin-left:auto;

在这里插入图片描述

margin-right:auto;

在这里插入图片描述
当

margin-right: auto;
margin-left: auto;

就实现了居中。
在这里插入图片描述
所以我们可以简写为：

margin:0 auto;

即表示上下为0，左右auto，相当于margin-left:auto和margin-right:auto这两行。

文本水平居中比较简单即为：

text-align: center;    --->让这个盒子内部的文本居中(图片、表单元素也都可以看做文本)

margin:0 auto使用注意：
  1、使用margin:0 auto;的盒子必须有width，明确的width。
  2、只有标准文档流盒子，才能使用其居中。
  3、此语句是居中盒子，不是文本。

善于使用父亲的padding，而不是儿子的margin

观察

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 300px;
			height: 250px;
			background-color: orange;

		}
		p{
			width: 100px;
			height: 100px;
			background-color: green;
		}
		
	</style>
</head>
<body>
	<div>
		<p></p>
	</div>
</body>

在这里插入图片描述
此时我们想让绿色的盒子向下50px;当我们使用儿子(即绿色盒子)的上外边距的时候发现：

margin-top: 50px;

在这里插入图片描述
当我们给父亲添加上border时。

在这里插入图片描述

其实如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这个“行”，所以父亲也整体掉下来了。

还有一种就是给父盒子添加overflow:hidden;

margin这个属性本质描述的是兄弟之间的距离；最好不要使用这个margin表达父子之间的距离。
所以一定要善于使用父亲的padding，而不是儿子的margin。

关于margin的IE6兼容问题

想来想去还是写写作为了解吧。

IE6双倍margin bug

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍margin。

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

在这里插入图片描述
解决方案：
1、使浮动的方向和margin的方向相反。所以，工作中养成浮动方向和margin的方向相反就行。

float:left；
margin-right:40px;

2、使用一个小技巧
单独给队首的元素写一个一半的margin，因为针对的是IE6，所以属性加下划线只有IE6认得。
即：

<li class="first"></li>

ul li.first{
	_margin-left:20px;
}

这个就有点惯着IE6了，哈哈哈。

IE6的3px bug

在这里插入图片描述
解决办法：
不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准。
月光下的平方
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习笔记
YuKing_HONG的博客
10-17 1370
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
CSS学习笔记二
qq_59301215的博客
11-17 286
css学习笔记，来自pink老师视频教学。
CSS学习笔记（详细）
jojo_oulaoula的博客
05-13 307
Cascading Style Sheet 级联样式表表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定若将HTML比做人的骨架，那么CSS就是皮肤，在骨架的架构上进行修饰美化。CSS文件后缀名就是.css。
CSS篇学习笔记2
baidu_39338037的博客
11-24 185
任务名：选择器 (选择器的种类与优先级) 一、相邻兄弟选择器 “xxx”+“xxx”：介于两个选择器之间，当第二个元素紧跟在第一个元素之后， 并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。 二、属性选择器 通过属性来选择，如div[class=“xxx”]就是div中class名为xxx的，a[href]就是a标签中包含href的 三、子选择器 ...
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
CSS入门详细笔记【2023.07】
qq_54639969的博客
07-19 149
CSS层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（
CSS笔记汇总-最全最仔细（会时刻更新）
小女不才
09-21 1394
样式表优点缺点使用情况控制范围行内样式书写方便，权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点一个完整的网页 ，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子 ，多个块级盒子水平显示就用浮动布局。定位。
CSS盒子模型
qq_40233402的博客
07-11 562
CSS盒子模型 课程目标 1.常用样式 2.盒子模型 3.CSS3常见效果 盒子模型介绍 引用百度百科 层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式） 常用样式 基础样式 样式名 描述 text-align 行元素水平方向居中 text-decoration 控制下划线 none没有 underline有 line-hight 行高 font-size
前端css基础学习笔记
a_big_panda的博客
01-22 930
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1669
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
CSS学习笔记（一）
a_xia_o的博客
01-27 121
HTML 的局限性HTML 是网友的骨架，只关注内容的语义。例如表示大标题，表示段落。早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。CSS 字体属性用于定义字体系列大小、粗细和文字样式(如斜体)Emmet语法的前身是Zen coding,它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。快速生成HTML结构语法快速生成css样式语法元素显示模式总结元素模式元素排列设置样式默认宽度包含块级元素。
css speed,CSS animation based on speed and not time?
weixin_35379520的博客
08-04 97
I have the following CSS animation:.wrapper {position: absolute;top: 100%;left: 50%;width: 400px;margin-left: -200px;font: 300 30px/1 'Open Sans Condensed', sans-serif;text-align: center;text-transfor...
CSS学习笔记[Web开发]
最新发布
Jenlibein的博客
07-19 762
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS学习笔记：WEB开发中的样式精华
这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表，是一种用于网页样式控制的语言，1996年由W3C制定并通过，旨在增强HTML的美工设计能力，支持多种设备的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值