前端CSS基础知识

程序员文章站 2024-03-17 11:06:58

...

## 层叠样式表语言（Cascading style sheet）

内联定义方式：在标签里面使用

内联语法格式：<标签 style（style：风格，样式的意思）="样式名：样式值；

样式名：样式值；

样式名：样式值；">

</标签>

<div id="div1" style="样式名：样式值；
样式名：样式值；
样式名：样式值；">
</div>

定义内部样式块对象

在css地盘里，注释就跟Java相同

样式语法格式：选择器{

样式名：样式值；

}

css常见的选择器包括

（最常用的三种选择器，每个选择器对应不同元素）

标签选择器

id选择器

class选择器

标签选择器

会适用于所有div标签

标签选择器格式

标签选择器{

}

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>定义内部样式块对象</title>
		<style type="text/css">
				/* 
				这是css的注释
				*/
			   div(div是标签选择器){
			   	background-color: aqua;
			   	width:100px;
			   	height:100px;
				border-style:solid;
				border-width: 1px;
				}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>

id选择器

只作用于id这个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
				#usename{
					width:100px;
					height:5px;
					border-style:double;
					border-width:1px;
				}
		</style>
	</head>
	<body style="">
		<div>
			
		</div>
		<input type="text" id="usename"/>
        <!--通过id对文本框进行修饰-->
	</body>
</html>

class选择器

任何标签都有class属性，class相同的可以看作同一类标签，修饰某一类元素

类选择器格式

.class{

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">			
				.study{
					font-size: 15px;
					color: green;		
				}			
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<span class="study">文本span</span>
		<p class="study">文本段落</p>
		
	</body>
</html>

链入外部样式表文件

需要的时候从另一个文件引入

<!--另外一个文件；文件位置：1.css-->
#div1{
	background-color: red;
	width: 100px;
	height:100px;
	border: aqua;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链入外部样式表文件</title>
		<link rel="stylesheet" type="text/css" href="1.css"/>
	</head>
	<body>
		<div id="div1">	
		</div>
	</body>
</html>

注意：标签选择器优先级最低、其次是类的选择器、*是id选择器

导入样式（不建议使用直接在html中使用）

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，可以在外部样式、style标签中使用。

@import "hd.css"
@import url("hd.css")

<!--导入样式要放在样式规则里面定义-->
<style>
	@import url("hdcms.css");
	body {
		background: red;
	}
</style1>

盒子模型

添加元素的时候定义：上右下左


padding（内间距）-top	padding-right	padding-bottom	padding-left
border（边框区域）-top	border-right	border-bottom	border-left
margin（外边距的区域）-top	margin-right	margin-bottom	margin-left

注意

加了box-sizing:border-box；这个属性后，这个容器的大小就只有width和height不会受到padding或者border或者滚动条影响，你给多大它就多大
*{ margin:0; padding:0;} 这样可以很好的避免标签的默认内外补丁所产生的差异。
background-clip:content-box（填充内容区域）

替换元素

<ifame/><img/><video/>

定位

文档标准流

简单来说标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。

脱离文档流

脱离文档流就是元素像飞起来一样，或者理解为元素在文本流中会占用空间，脱离文本流以后，会在z轴的另外一层显示，原先的空间被其他元素占据

浏览器默认的排版方式就是文档流(或者叫标准流)排版方式。脱离文档流就是不按照文档流的排版方式

定位可以分为：静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

静态定位

标签内不加任何定位属性

相对定位（relative）

对当前位置修改，相对定位元素不可层叠，left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计

position:relative;

绝对定位（absolute）

position:absolute;

使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位
如果元素的父级没有设置定位属性，则参靠着文档
如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参数此父元素进行定位
对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值，z-index 属性指定一个元素的堆叠顺序。
绝对定义不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性
如果没有宽高定位，移动的是边界
如果父级设置有滚动overflow:scroll的时候，且设置有相对定位，那么绝对定位会根据滚动条发生移动，而不会像初始一样定在那里
后出现的定位权重较高

粘性定位

设置position:sticky同时给一个(top,bottom,right,left)之一即可

父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
粘性定位还有另一个小特性：如果是同级关系，互相叠加；非同级的时候，另一个元素会把其他粘性定位顶走
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

position:sticky

固定定位

固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化（它参考的是浏览器窗口）

position:fixed;

弹性盒子布局

概念

虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理

弹性盒子（块级元素）

定义：display: flex
flex-flex-direction（flex-direction 属性决定了主轴和交叉轴的方向）:
row | row-reverse | column | column-reverse
flex-flow 属性是 flex-direction 和 flex-wrap （一行排不下时换行）属性的复合属性

（flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式）

定义：flex-flow: flex-direction flex-wrap

order 属性设置或检索弹性盒模型对象的子元素出现的順序（数值越大越靠后）

row（主轴默认是水平的）

前端CSS基础知识

row-reverse

前端CSS基础知识

column

前端CSS基础知识

column-reverse

前端CSS基础知识

主轴元素对齐方式

justify-content(设置内容对齐方式):flex-start;开始位置
justify-content:flex-end;靠后位置
justify-content:flex-center;居中位置
justify-content:space-between;（平均分布）
justify-content:space-around;（两边元素的间距是成倍间距）
justify-content:space-evenly（均匀）;（完全平均分布）

交叉轴元素对齐方式(属性来设置)

align-items(侧轴对齐方式):flex-start;
align-items:flex-end;
align-items:center;
align-items:stretch;(拉撑对齐)

多行元素在交叉轴排列方式

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:space-evenly;

单个元素交叉轴进行控制

article:nth-child(n){
	align-self:center;
}

弹性元素规则

flex-grow:1;
（控制剩余空间是否放大，默认0，剩余也不放大，适合不确定文字数量自适应宽度）

<!--计算：flex-grow默认值为0，用于子元素的宽度之和小于父元素的宽度时分配剩余空间，假如父元素宽度为1000，三个子元素，div1宽度200，div2宽度300，div3宽度300；三个子元素都不设置flex-grow,那么浏览器默认不自动分配剩余空间，剩余空间超出；假如给div1设置flex-grow:1,那么剩余1000-200-300-300=200px全部分配给div1；其他的子元素div2和div3不参与分配,即不设置此属性就不参与分配。-->

flex-shrink:1;
（flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩）

<!--计算：A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2
1.父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 
2.100*1+100*1+100*1+100*2+100*2=700px
3.被移除溢出量：(100*1/700)*100，即约等于14px……以此类推-->

flex-basis:100px;
<!--默认值：auto。如果是主轴是默认row的话，基准是width；相反（column）是hight，也就是你即使删除width也不会有改变；flex-basis属性定义了（该属性用来设置元素的宽度）在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。-->

注意：以上三种定义的复合属性是flex:flex-grow|flex-shrink|flex-basis；如：flex:1 2 100px

样式装饰

列表隐藏样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链入外部样式表文件</title>
		<style type="text/css">
			#stealth{
				display: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>水
				<ul id="stealth">
					<li>二氧化氮</li>
					<li>锂离子</li>			
				</ul>
			</li>
			<li>炸鸡</li>
			<li>火腿</li>
			<li>鸡翅</li>
		</ul>
	</body>
</html>

设置鼠标悬停效果

hover是专门设置鼠标悬停效果的（在使用hover的时候，左右两边不许有空格）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链入外部样式表文件</title>
		<style type="text/css">
			p:hover{
				color: #FF0000;
				font-size: 10px;
			}
		</style>
	</head>
	<body>
		<p>氯化钠</p>
		<p>氧化酶</p>
		<p>氨基酸</p>
	</body>
</html>

浮动样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链入外部样式表文件</title>
		<style type="text/css">			
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<article>
			<img src="https://img9.doubanio.com/view/subject/s/public/s3814606.jpg"width="30px"/>
			恶意》是日本作家东野圭吾挑战悬疑小说写作极限的佳作，是以加贺恭一郎为主人公的系列作品的第四部，该系列的上一部作品是《谁杀了她》，该系列的下一部作品是《我杀了他》。《恶意》于1996年由日本讲谈社出版发行单行本，文库本由讲谈社于2001年出版发行。《恶意》被媒体和读者列为东野圭吾的巅峰之作，与《白夜行》同享光辉与荣耀，这两部作品恰似两生花——《白夜行》为了爱粉身碎骨，《恶意》因为恨万劫不复。
        </article>
	</body>
</html>

光标样式

使用pointer，不要使用hand因为有浏览器兼容问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链入外部样式表文件</title>
		<style type="text/css">			
			img{
				float: left;
			}
			#div1{
				background-color: #FF0000;
				border: solid 1px blue;
				width: 100px;
				height: 100px;
				position: absolute;
				top: 200px;
				left: 101px;
				}
				#become:hover{
					cursor: pointer;
					text-decoration: underline;
					color: yellow;
				}
		</style>
	</head>
	<body>
		<div id="div1">
			<span id="become">百度</span>
		</div>
	</body>
</html>

补充

html不区分大小写
*通配符，意思是所有的标签都有的属性。
>元素选择器中选择子元素，不包括孙级及以下元素（后面的元素）
+紧挨着的同级兄弟元素。
~*后面所有兄弟元素
^=只要标签里面的属性值和style设置属性值前面相同元素都会被应用（以指定值开头的元素）
$= 以指定值结尾的元素
|=以指定值开头或以属性连接破折号的元素
~=指定值是独立值或者以空格隔开的独立值
:nth-child()选择器，:nth-of-type(n)选择器（简单理解：有of是第n个某个元素；没有of是第n个元素）
list-style:none去除样式

相关标签：前端 css css3 html5 java 后端

上一篇： js放大镜的功能实现

下一篇：用ImageLoder加载图片

前端CSS基础知识

文章目录

内联定义方式：在标签里面使用

定义内部样式块对象

css常见的选择器包括

标签选择器

id选择器

class选择器

链入外部样式表文件

导入样式（不建议使用直接在html中使用）

盒子模型

定位

静态定位

相对定位（relative）

绝对定位（absolute）

粘性定位

固定定位

弹性盒子布局

样式装饰

列表隐藏样式

设置鼠标悬停效果

浮动样式

光标样式

补充