前端学习——Css进阶

最新推荐文章于 2024-09-10 22:58:41 发布

至尊皇堡

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量544

点赞数

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

本文链接：https://blog.csdn.net/bala_lala/article/details/122352307

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端学习——Css进阶

使用渡一的前端入门课程进行学习，下面将学习笔记记录于此。希望自己的前端学习之路一帆风顺。
开发平台：HBulider X。
学习视频：渡一前端入门课。
参照内容：菜鸟教程。

一、css习惯

1.1 先功能后选择

在实际编程时，经常使用先功能后选择的方式，使得编程变得更模块化，更高效。
尝试下列代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.green{
				background-color: green;
			}
			.red{
				background-color: #FF0000;
			}
			.yellow{
				background-color: yellow;
			}
			.size1{
				width: 50px;
				height: 50px;
			}
			.size2{
				width: 60px;
				height: 60px;
			}
			
		</style>
	</head>
	<body>
		<div class="green size2"></div>
		<div class="red size1"></div>
		<div class="yellow size1"></div>
	</body>
</html>

1.2 使用标签选择器对标签进行初始化

初始的标签经常带有默认的css格式，因此经常使用标签选择器对标签进行初始化。
如经常将超链接标签设为没有下划线；
将列表标签设为没有原点和padding与margin为0，这样更符合程序员的操作和人们的交互习惯。
并且，可以使用通配符标签来对所有标签选择器设padding与margin为0。

二、css盒子模型

2.1 盒子简介

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述

2.2 盒子宽度

在编程时需要注意几个部分带来的宽度变化问题。

元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

注意：计算能看见的高度时，不带margin。
尝试做出以下效果：
在这里插入图片描述
代码为：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
			}
			.content1{
				width: 10px;
				height: 10px;
				background-color: #FFFFFF;
			}
			.content2{
				width: 10px;
				height: 10px;
				padding: 10px;
				background-color: #008000;
			}
			.content3{
				width: 30px;
				height: 30px;
				padding: 10px;
				background-color: white;
			}
			.content4{
				width: 50px;
				height: 50px;
				padding: 10px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="content4">
			<div class="content3">
				<div class="content2">
					<div class="content1">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

三、层模型

3.1 定位

使用position来实现元素的定位。position 属性指定了元素的定位类型。position 属性的五个值：static、relative、fixed、absolute、sticky。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

3.1.1 static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

3.1.2 fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。

3.1.3 relative 定位

相对定位元素的定位是相对其正常位置。与absolute不同的是，relative会保留原来位置进行定位。

3.1.4 absolute 定位

脱离于原来位置进行定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>.

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

在这里插入图片描述

3.1.5 sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

3.1.6 定位常用方法

通常使用 relative 定位参照物，使用 absolute 参考参照物进行绝对定位。
下面代码展示如何使用absolute使容器定位在页面中央：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				position: absolute;
				left: 50%;
				top: 50%;
				background-color: #FF0000;
				width: 100px;
				height: 100px;
				margin-top: -50px;
				margin-left: -50px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

尝试做出以下效果：
使得五环在页面正中央居中。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				
			}
			.plat{
				position: absolute;
				width: 380px;
				height: 186px;
				left: 50%;
				top: 50%;
				margin-top: -93px;
				margin-left: -190px;
			}
			.circle1,
			.circle2,
			.circle3,
			.circle4,
			.circle5{
				position: absolute;
				width: 100px;
				height: 100px;
				border: 10px solid black;
				border-radius: 50%;
			}
			.circle1{
				border-color: #FF0000;
				left: 0;
				top: 0;
			}
			.circle2{
				border-color: #008000;
				left: 130px;
				top: 0px;
				z-index: 3;
			}
			.circle3{
				border-color: #FFFF00;
				left: 260px;
				top: 0px;
			}
			.circle4{
				border-color: blue;
				left: 65px;
				top: 60px;
			}
			.circle5{
				border-color: aqua;
				left: 195px;
				top: 60px;
			}
		</style>
	</head>
	<body>
		<div class="plat">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
			<div class="circle5"></div>
		</div>
	</body>

3.2 margin塌陷

3.2.1 margin塌陷定义

在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。
注：两个盒子的垂直外边距完全接触才会触发。

3.2.2 margin塌陷解决办法

使用bfc可以解决塌陷问题。bfc将在后续学习。
下面讨论如何触发一个盒子的bfc：
1.position:absolute;
2.display:inline-block;
3.float:left/right;
4.overflow:hidden 指溢出部分隐藏。

四、浮动

4.1 float

4.1.1 float介绍

与盒模型、层模型类似，浮动也是css的常见模型，经常用在图像或其他元素的布局时。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。

4.1.2 float用法

使用<float:left>、<float:right>来实现元素的浮动。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
尝试下列代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
img 
{
	float:right;
	border:1px dotted black;
	margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
	在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

4.1.3 float注意事项

浮动元素产生了浮动流。
所有产生了浮动流的元素，块级元素看不到他们。
浮动并不意味着分层。
而产生了bfc的元素和文本类属性（inline） 的元素以及文本都能看到浮动元素。

4.2 清浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
因为用父级元素直接包裹浮动元素并不好操作，所以一般在浮动元素的后面加上一个clear用来清除浮动。
在这里插入图片描述

五、伪类

5.1 伪类介绍

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

5.2 常用伪类

5.2.1 anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示.
尝试以下代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

5.2.2 first-child 伪类

可以使用 :first-child 伪类来选择父元素的第一个子元素。
下面介绍三种使用方法：

匹配第一个 元素

p:first-child
{
    color:blue;
}

匹配所有 元素中的第一个 元素

p > i:first-child
{
    color:blue;
}

匹配所有作为第一个子元素的元素中的所有元素

p:first-child i
{
    color:blue;
}

六、伪元素

6.1 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

6.2 常用伪元素

6.2.1 before、after

“:before” 伪元素可以在元素的内容前面插入新内容。":after" 伪元素可以在元素的内容之后插入新内容。
尝试下列代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1:before {content:url(smiley.gif);
h1:after {content:url(smiley.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>

七、示例

做出如下效果：鼠标触碰超链接会反色。
在这里插入图片描述
代码为：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				color: #424242;
				font-family: arial;
			}
			a{
				text-decoration: none;
			}
			.nav{
				list-style: none;
			}
			.nav::after{
				content: "";
				display: block;
				clear: both;
			}
			.nav .list-item{
				float: left;
				height: 30px;
				margin: 10px;
				line-height: 30px;

			}
			.nav .list-item a{
				color: #f40;
				font-weight: bold;
				padding: 0 5px;
				height: 30px;
				display: inline-block;
				border-radius: 15px;
				
			}
			.nav .list-item a:hover{
				background-color: #f40;
				color: #fff;
				
			}
		</style>
	</head>
	
	<body>
		<ul class="nav">
			<li class="list-item">
				<a href="#">天猫</a></li>
			<li class="list-item">
				<a href="#">聚划算</a></li>
			<li class="list-item">
				<a href="#">天猫超市</a></li>
		</ul>
	</body>
</html>