20200228-0229前端学习笔记

最新推荐文章于 2024-07-09 17:45:40 发布

--believe

最新推荐文章于 2024-07-09 17:45:40 发布

阅读量101

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_44850917/article/details/104567063

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.综合案例：（新闻）

1）总结：

{ margin: 0; padding: 0; }用于去除默认的内边距和外边距
一般小图片可以用背景图片的方法添加：background:url(images/bg.gif);
用于消除列表默认的点点：list-style: none;
用于消除链接的下划线：text-decoration: none;

2）代码：

<h2>1.综合案例：（新闻）</h2>
<h3>
	<li>代码:</li>
	<li>效果图：</li>
	<li>总结：<br/><ol>
		<li>* {
		margin: 0;
		padding: 0;
	}用于去除默认的内边距和外边距</li>
		<li>一般小图片可以用背景图片的方法添加：background:url(images/bg.gif);</li>
		<li>用于消除列表默认的点点：list-style: none;</li>
		<li>用于消除链接的下划线：text-decoration: none;</li>
	</ol></li>
</h3>

3）效果：

在这里插入图片描述

2.浮动（float）的应用（重要）

浮动和标准流的父盒子搭配

浮动是脱标的，会影响下面的标准流元素，我们需要给浮动元素添加一个标准流的父亲，这样才能最大化减少了对其他标准流的影响
一个完整的网页，是标准流+浮动+我们后面要将的定位一起完成的

3.浮动（float 的扩展）

1)浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠也不会与父盒子的padding重叠
举例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father{
			width: 500px;
			height: 500px;
			background-color: pink;
			/*子盒子不会覆盖父盒子的border*/
			border:5px solid red;
			/*子盒子不会覆盖父盒子的padding*/
			padding-right: 10px;
		}


		.son{
			float:right;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

2)浮动元素与兄弟盒子的关系

在一个父级盒子中，如果本盒子是浮动的，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐
普通流的，那么当前盒子会显示在前一个兄弟盒子的下面（换行）
例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father{
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.son1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.son2{
			width: 300px;
			height: 300px;
			background-color: purple;
			/*前面是标准流不影响，只影响后面的标准流*/
			float:left;
		}
	</style>
</head>
<body>
<div class="father">
	<div class="son1"></div>
	<div class="son2"></div>
</div>
	
</body>
</html>

4.清除浮动

4.1为什么要清除浮动

因为父级盒子很多情况下不方便给高度。但是子盒子浮动就不占用位置，就会使下面的标准流盒子上移

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	.father{
		width: 200px;

	}

	    .son1{
			float: left;
			width: 200px;
			height: 200px;
			background-color: red;

		}
	    .son2{
	    	width: 200px;
			float: left;
			height: 200px;
			background-color: purple;
			
		}
		.two{	
			/*上面都是浮动，本盒子跟前面父盒子在标准流上，而前面父盒子高度没有所以本盒子上移*/
			height: 500px;
			width: 500px;
			background-color: pink;
		}
	</style>
</head>
<body>
<div class="one">
	<div class="son1"></div>
	<div class="son2"></div>
</div>
<div class="two"></div>
	
</body>
</html>

4.2清除浮动的方法

语法：
选择器{clear：属性值（left right both）；}

1）额外标签法（隔墙法）

语法：
w3c推荐的做法：在浮动元素末尾添加一个空的标签（例如）< div style="clear: both;"> < / div >
优点：
通俗易懂，书写方便
缺点：
添加许多无意义的标签结构比较差

2)父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll都可以实现
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的内容

3）使用after伪元素清除浮动

	.clearfix:after{
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear:both;

	}
	.clearfix{
		*zoom:1;
	}

5.Photoshop切图

常见的图片格式

jpg图像格式：jpeg(.jpg)对色彩的信息保留较好，高清，颜色较多，我们产品类图片经常用jpg格式的
gif图像格式：它最多只能驻村256色，所以通常用来显示简单图形及字体，但是可以保存背景和动画效果
png图像格式:是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点能够保持丰富背景
psd图形格式：psd格式是photoshop的专用格式，里面可以存放图层，通道，遮罩等多种设计草稿

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20200228-0229前端学习笔记

1.综合案例：（新闻）1）总结： { margin: 0; padding: 0; }用于去除默认的内边距和外边距一般小图片可以用背景图片的方法添加：background:url(images/bg.gif); 用于消除列表默认的点点：list-style: none; 用于消除链接的下划线：text-decoration: none; 2）代码：<h...
复制链接

扫一扫