学习笔记（三）——CSS进阶

最新推荐文章于 2024-07-12 15:49:15 发布

别呀

最新推荐文章于 2024-07-12 15:49:15 发布

阅读量256

点赞数 8

分类专栏： web入门

本文链接：https://blog.csdn.net/qq_46485161/article/details/116865408

版权

web入门专栏收录该内容

10 篇文章 2 订阅

订阅专栏

在网页的布局和页面元素的表现方面，要掌握的最重要的概念是css的盒子模型(BoxModel)以及盒子在浏览器中的排列(定位)，这此概念用来控制元素在页面上的排列和显示方式,形成CSS的基本布局。

一、盒子模型

盒子模型由内容，内边距，边框和外边距组成，下图是盒子模型的结构图：

盒子模型是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互，页面上的每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式(上下排列、左右排列、嵌套排列)堆积而成。

1.1、边框border

1.1.1、边框属性

属性	含义
border-color	边框颜色
border-width	边框宽度
border-style	边框样式
border-left	左边框
border-right	右边框
border-top	上边框
border-bottom	下边框

复合样式border
格式：

border: 粗细 样式 颜色

如：

border: 1px solid red;

1.1.1、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框border实例</title>
    <style>
        div{
            width: 200px;
            height: 200px;
           /*border-width: 3px;*/
            /*border-style: solid;*/
            /*border-color: #0000FF;*/
            /*border: none;*//*无边框*/

            /* 全部设置边框 */
            /*border: 1px solid red;*/
            /* 设置上边框 */
             border-top: 2px solid red;
            /* 设置左边框 */
             border-left: 3px solid orange;
            /* 设置右边框 */
             border-right: 4px solid yellow;
            /* 设置下边框 */
             border-bottom: 5px solid green;
             
        }

		</style>
</head>
<body>
    <div>

    </div>
</body>
</html>

结果展示：

1.2、内边距padding

padding 属性也称为盒子的内边距。位于盒子的边框和内容之间，和表格的填充属性(cellpadding)相似。如果填充属性为0,则盒子的边框会紧挨着内容，这样通常不美观。简单的理解就是：内边距就是边框到内容的距离。

当对盒子设置了背景颜色或背景图像后,那么背景会覆盖 padding 和内容组成的区域，并且默认情况下背景图像是以 padding 的左上角为基准点在盒子中平铺的。

1.2.1、内边距属性

属性	含义
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

复合样式
格式：

padding: 属性值
2个值，第一个值: 上下内边距的宽度; 第二个: 左右内边距的宽度
3个值：第一个: 上内边距宽度; 第二个:左右内边距的宽度; 第三个:下内边距的宽度
4个值：依次表示为上 右 下 左内边距的宽度(顺时针排序)

如：

/* 上下左右全部设置为20px */
padding:20px;
/* 第一个数设置上下内边距，第二个数设置左右内边距 */
padding:10px 20px;
/* 第一个数设置上内边距，第二个数设置左右内边距,，第三个数设置下内边距 */
padding:10px 20px 30px;
/* 第一个数设置上内边距，第二个数设置右内边距,，第三个数设置下内边距，第四个数设置左内边距 */
padding:10px 20px 30px 40px;

注意：①内边距会撑开原本盒子的大小；②位置的改变是相对于原始位置而改变的。

1.2.2、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边框实例</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* 全部设置边框 */
            border: 5px solid black;
            /* 左内边距 */
             padding-left: 20px;
            /* 上内边距 */
             padding-top: 20px;
        }
        
		</style>
</head>
<body>
    <div>
        使用内边距后
    </div>
</body>
</html>

结果展示：

1.3、外边距margin

边界 margin 位于盒子边框的外侧，也称为外边距。其不会应用背景,因此该区域总是透明的。通过设置 margin，可以使盒子与盒子之间留有一定的间距，而使页面不至于过于拥挤。可以统一设置4个边界的宽度，也可单独设置各边界的宽。简单理解就是：外边距控制盒子和盒子之间的距离

1.3.1、外边距属性

属性	含义
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

复合样式（和内边距写法一样）
格式：

margin: 属性值
2个值，第一个值: 上下外边距的宽度; 第二个: 左右外边距的宽度
3个值：第一个: 上外边距宽度; 第二个:左右外边距的宽度; 第三个:下外边距的宽度
4个值：依次表示为上 右 下 左外边距的宽度(顺时针排序)

如：

margin:50px;  /*默认上下左右外边距为50px*/

1.3.2、实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.one{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/* margin-left: 100px;
				margin-top: 100px; */
				margin:30px;
			}
            .two{
				width: 100px;
				height: 100px;
				background-color: yellow;
				margin-left: 30px;
				margin-top: 60px;

			}
		</style>
	</head>
	<body>
		<div class="one"></div>
        <div class="two"></div>
	</body>
</html>

结果展示：

1.4、知识补充

1.4.1、display属性

实际上，标准流中的元素可通过display属性来改变元素是以行内元素显示还是以块级元素显示，或不显示。

display 属性的常用取值如下:

display: block | inline | none | list-item

属性值解释:
block: 以快级元素显示
inline: 以行内元素显示
none: 隐藏元素。被隐藏的元素不会占据文档中的位置
list-item: 列表想元素

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作导航栏</title>
		<style type="text/css">
			.nav{
				height: 80px;
				border: 1px solid red;
			}
			.nav a{
				height: 80px;
				background-color: wheat;
				/* 拥有块级、行内元素的特点 */
				display: inline-block;  
				padding: 0 20px;;
				line-height: 80px;
				color: black;
				text-decoration: none;
			}
			.nav a:hover{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="https://www.shiguangkey.com/">博客</a>
			<a href="https://www.shiguangkey.com/">资源</a>
			<a href="https://www.shiguangkey.com/">论坛</a>
			<a href="https://www.shiguangkey.com/">问答</a>
		</div>
	</body>
</html>

结果展示：

1.4.2、盒子居中

我们在上网时会发现，随着窗口大小的改变，有些网站的内容会一直处于居中状态，让我们来通过例子看看这是如何实现的。

注意: ① 盒子必须要指定宽度；② 左右外边距都设置auto （自动）；③ 盒子居中只对左右有用，对上下是无效的。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子居中</title>
		<style>

				div{
					width: 200px;
					height: 200px;
					background-color: #0000FF;
					/* margin-left: auto;
					margin-right: auto; */
					margin: 0 auto;
				}
			</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

结果展示：

1.4.3、高度塌陷问题

当子盒子的顶部外边距设置为 50px 时，父盒子也会跟着子盒子一起往下移动，效果如下图：

对于此问题以下有三种解决方法：
① 可以给父盒子定义一个上边框
② 可以给父盒子指定一个上内边距
③ 可以给父盒子添加 overflow：hidden;

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高度塌陷</title>
		<style>
           .dad{
				width: 120px;
				height: 120px;
				background-color: #0000FF;
				/* border-top: 1px solid red; */ /*解决方法一*/
				/* padding-top: 1px; */   /*解决方法二*/
				overflow:hidden;    /*解决方法三*/
			}
			.son{
				width: 80px;
				height: 40px;
				background-color: #008000;
				margin-top: 60px;
			}
			</style>
	</head>
	<body>
		<div class="dad">
			<div class="son"></div>
		</div>
	</body>
</html>

结果展示：

1.4.4、上下合并问题

上下 margin 合并是指当两个块级元素上下排列时,它们之间的边界(margin)将发生合并，也就是说，两个盒子边框之间的距离等于这两个盒子margin 值的较大者。浏览器中两个块元素将会由于 margin 合并按右下图方式显示：

1.4.5、总结：注意事项

A：margin 调整内部div外边距；

B：padding 调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用 margin 布局（padding 有可能撑大外盒子，但如果是 margin 过大，则盒子内容会被挤出，但不会改变盒子本身大小）；

C：border 内部div和外部div定位时需要找到边界，外部div如没有设置 border，则内部div的 margin 设置时会一直往上找，直到找到边界位置。

D：内部相邻 div 间的 margin，取值为两个div各自设置 margin 的最大值，而不是相加值。

E：margn 值可以为负，而 padding 不可以

二、Reset CSS(了解)

2.1、什么是Reset CSS？

在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式等等，不同浏览器的默认样式之间也会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

2.2、使用Reset CSS

公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESET CSS。

这里提供了一个模板(以下就是该示例)：CSS Tools: Reset CSS

下面提供一个示例：
（最好建一个css文件保存）

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

三、浮动

3.1、什么是浮动

浮动，其实就是让元素脱离正常的文档流。CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

3.2、浮动的作用

浮动可以让元素脱离正常的文档流并且移动到指定的位置，类似于转换了inline-block。

我们都知道 div 是块级标签，当有多个 div 时我们都不设置他们的内外边距，这时会出现这些盒子全部排成一列并且它们间的距离为 0px。如果我们想让它们排成一类呢？有两种方法可以设置：1、设置 display: inline-block；2、使用浮动。这两者有何区别？别急看下下面的示例就知道了。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用浮动</title>
		<style>
            div{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/*display: inline-block;*/
				float: left;
			}
			.box{
				background-color: #008000;
			}
			</style>
	</head>
	<body>
		<div></div>
		<div class="box"></div>
		<div></div>
	</body>
</html>

结果：

可以看出使用 display 属性的话盒子间会出现一小部分间距，而使用浮动会使盒子紧贴在一起。

3.3、浮动特点

浮动除了可以让元素脱离正常的文档流并且移动到指定的位置外，还有一个特点就是：使用了浮动之后，盒子将不会再占据文档中的位置

示例：(未使用浮动前)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>未使用浮动</title>
		<style>
           .one{
				width: 80px;
				height: 80px;
				background-color: #0000FF;
			}
			.two{
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
			</style>
	</head>
	<body>
	<div class="one"></div>
	<div class="two"></div>

	</body>
</html>

结果：

对第一个盒子添加 float: left 后

.one{
	width: 80px;
	height: 80px;
	background-color: #0000FF;
    float: left;
}

3.4、浮动带来的问题

一个父盒子包着两个子盒子，给两个子盒子设置浮动后，父盒子会包不住子盒子，父盒子因为子盒子浮动引起内部高度为 0 父盒子会看不到。（注意：这是父盒子不设置高度的情况下才会发生，一般来讲不建议给父盒子设置高度，而是让父盒子根据子盒子来自动撑开）

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用浮动</title>
		<style>
            .dad{
				background-color: #0000FF;
			}
			.son1{
				width: 80px;
				height: 80px;
				background-color: #008000;
				float: left;
			}
			.son2{
				width: 80px;
				height: 80px;
				background-color: #9038E1;
				float: left;
			}
			</style>
	</head>
	<body>
		<div class="dad">
			<div class="son1">儿子1</div>
			<div class="son2">儿子2</div>
		</div>
	</body>
</html>

结果：

3.5、清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

语法：

选择器{
	clear:属性值
}

属性值取值:left 清除左侧浮动 right：清除右侧浮动 both：同时清除浮动

什么时候用清除浮动？
① 父盒子没有高度
② 子盒子浮动了
③ 影响布局

有两种方法可以解决父元素因为子元素浮动引起内部高度为 0 的问题：

父元素设置overflow：hidden;
添加一个空div，设置清除浮动样式：如果页面浮动布局多，就要增加很多空div，不推荐使用

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子盒子浮动</title>
		<style>
            .dad{
				background-color: #0000FF;
				overflow: hidden;  /*方案一*/
			}
			.son1{
				width: 80px;
				height: 80px;
				background-color: #008000;
				float: left;
			}
			.son2{
				width: 80px;
				height: 80px;
				background-color: #9038E1;
				float: left;
			}
			</style>
	</head>
	<body>
		<div class="dad">
			<div class="son1">儿子1</div>
			<div class="son2">儿子2</div>
			<!--<div style="clear: both"></div> /*方案二*/-->
		</div>
	</body>
</html>

结果：

四、定位

CSS中有三种的定位机制，即普通流(或叫文档流)、浮动和定位。除非设置了浮动属性或定位属性,否则所有盒子都是在普通流中定位的。（普通流其实在我HTML那篇博客就已经学了，就是块级标签和行内标签的默认排列方式）

4.1、什么是定位

定位：定位就是将元素定在网页中的任意位置

定位组成：定位模式+边偏移

4.2、边偏移

常用属性：

属性	含义
top	定位的盒子加上顶部偏移量
left	定位的盒子加上左部偏移量
right	定位的盒子加上右部偏移量
bottom	定位的盒子加上底部偏移量

如：

top:20px;

4.3、定位模式

书写格式：

选择器{
	position:属性值;
}
属性值取值:
relative: 相对定位 在文档流的区域继续占有，后面的盒子不会占用位置，是以原来的位置移动位置;
absolute: 绝对定位 以元素带有定位的父级移动位置，会脱离文档流;
fixed: 固定定位 脱离文档流,默认以窗口为参考。	
static: 默认值 静态定位，默认值不会发生任何变化

4.3.1、相对定位relative

在文档流的区域继续占有，后面的盒子不会占用位置，是以原来的位置移动位置

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
           div{
			   width: 100px;
			   height: 100px;
			   background-color: #00BFFF;
		   }
			.two{
				background-color: green;
				position: relative;
				top: 50px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div class="two">我偏移了</div>
		<div></div>

	</body>
</html>

结果：

4.3.2、绝对定位absolute

以元素带有定位的父级位置移动(若父级都无定位，默认以浏览器为定位)。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
            .dad{
				width: 220px;
				height: 220px;
				margin: 60px;
			    background-color: #00BFFF;
				/*position: absolute;  !*只要父盒子加了定位就会子盒子的定位就会以父盒子为标准移动*!*/
		    }
			.son1{
				width: 100px;
			    height: 100px;
				background-color: green;
				position: absolute;   /*父盒子无定位则以浏览器为标准移动*/
				top: 20px;
				left: 20px;
			}
			.son2{
				width: 120px;
			    height: 120px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="dad">
			<div class="son1">儿子1</div>
			<div class="son2">儿子2</div>
		</div>
	</body>
</html>

结果：

4.3.3、固定定位fixed

脱离文档流，默认以窗口为参考。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<style>
            .dad{
				width: 220px;
				height: 220px;
				margin: 100px;
			    background-color: #00BFFF;
				position: absolute;  
		    }
			.son1{
				width: 100px;
			    height: 100px;
				background-color: green;
				position: fixed;   /*默认以窗口为参考,与父盒子有无定位无关*/
				top: 10px;
				left: 10px;
			}
			.son2{
				width: 120px;
			    height: 120px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="dad">
			<div class="son1">儿子1</div>
			<div class="son2">儿子2</div>
		</div>
	</body>
</html>

结果：

4.4、定位补充 z-index

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

属性值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index实例</title>
		<style>
            img
			{
				position:absolute;
				left:0px;
				top:0px;
				z-index:-1;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="https://www.cc148.com/files/article/image/44/44955/44955s.jpg">
			<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
		</div>
	</body>
</html>

结果：

想学习 CSS 基本使用的可以看我这两篇博客：
学习笔记（二）——CSS基础

别呀

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习笔记（三）——CSS进阶

在网页的布局和页面元素的表现方面，要掌握的最重要的概念是css的盒子模型(BoxModel)以及盒子在浏览器中的排列(定位)，这此概念用来控制元素在页面上的排列和显示方式,形成CSS的基本布局。文章目录一、盒子模型1.1、边框border1.1.1、边框属性1.1.1、实例1.2、内边距padding1.2.1、内边距属性1.2.2、实例1.3、外边距margin1.3.1、外边距属性1.3.2、实例1.4、知识补充1.4.1、display属性1.4.2、盒子居中1.4.3、高度塌陷问题1.4.4、.
复制链接

扫一扫