CSS 布局与样式设计全解析

俎树振

已于 2024-04-19 12:49:09 修改

阅读量216

点赞数 1

分类专栏： Web前端技术探索：DOM、JS与CSS 文章标签： css 前端

于 2022-11-06 20:22:08 首次发布

本文链接：https://blog.csdn.net/zsz1805355272/article/details/127718979

版权

Web前端技术探索：DOM、JS与CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、选择器

选择器
标签选择器		p{ }
类选择器		.p{ }
id选择器		#a{ }
通配符选择器		p{ }
通配符选择器		* {margin: 0;padding: 0; list-style: none; text-decoration: none;}
后代选择器		div p{ }	定义的时候用空格隔开
交集选择器		divp{ }	两个选择器之间紧密相连
并集选择器		div,p{ }	并集选择器:定义的时候用逗号隔开
子代选择器		div>p{ }	用符号>表示
序选择器		li:first-child{ } li:last-child{ }
下一个兄弟选择器		h1+p{ };
伪类选择器	静态伪类	:link :visited	超链接点击之前超链接点击之后
	动态伪类	+ :focus：是某个标签获得焦点的时候（比如某个输入框获得焦点） + :hover：鼠标放到某个标签上的时候 + :active：点击某个标签没有松鼠标时

二、常用样式属性

1.背景和边框

①背景

background-image（图片）
background-size（指定背景图像的大小）
background-origin（背景图像的位置区域）
background-clip（背景剪裁）

⭐线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向

background-image: linear-gradient(to right，颜色1, 颜色2,……);
//⭐左边开始
background-image: linear-gradient(to bottom right, red , yellow);
//⭐左上角开始（到右下角）

⭐径向渐变（Radial Gradients)：由它们的中心定义

background-image: radial-gradient(red, green, blue);

在这里插入图片描述

2.边框

①border-radius（圆角）

 border: 2px solid #8AC007;

②box-shadow（阴影）
③border-image（使用图像创建一个边框）
④border-style（样式）

solid：实线
dashed：虚线
dotted：点
double：双实线
groove 定义 3D 凹槽轮廓
ridge 定义 3D凸槽轮廓。
inset 定义 3D 凹边轮廓。
outset 定义 3D 凸边轮廓

2.文字特效

text-shadow（文本阴影）

例:text-shadow: 5px 5px 5px #FF0000;

box-shadow（盒子阴影）

例:box-shadow: 10px 10px 5px #888888;

text-overflow（显示溢出内容）
word-wrap（允许长文本换行）
word-break（单词拆分换行）
color：设置文本颜色
direction：设置文本方向

ltr：文本方向从左到右
rtl：文本方向从右到左

letter-spacing：增加或减少字符间距

letter-spacing：`<integer>` em / px / rpx
	normal:默认间隔
	length:定义字符间的固定空间（允许使用负值）。
	inherit:规定应该从父元素继承 letter-spacing 属性的值。

text-align：排列元素中的文本

值	描述
left	靠左对齐
right	靠右对齐
center	居中对齐
justify	两端对齐

text-decoration：向文本添加修饰
text-indent：缩进元素中文本的首行 (2em)
text-shadow：控制元素中的字母
white-space：设置元素中空白的处理方式
word-spacing：增加或减少字间距
⭐⭐css 文本超出就隐藏并且显示省略号

overflow:hidden; 		//超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap;		//溢出不换行

二、盒模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

在这里插入图片描述

三、浮动

已经非常少用浮动了，推荐使用弹性盒子布局：点击前往。

四、定位（position）

项目1绝对定位

position:absolute;

项目2相对定位

position:relative
	left:盒子右移
	right:盒子左移
	top:盒子下移
	bottom:盒子上移

固定定位

position: fixed;//相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

用途：

项目网页右下角的“返回到顶部”
顶部导航条

粘性

position: sticky;	//基于用户的滚动位置来定位。

z-index：来控制层级数

五、表单

<!DOCTYPE html>
<html>
	<head>
		<title>下拉菜单示例</title>
		<meta charset="utf-8">
		<style>
			.dropbtn {
				width: 160px;
				padding: 16px;
				background-color: #4CAF50;
				color: white;
				font-size: 16px;
				border: none;
				cursor: pointer;
			}
			.dropdown {position: relative;display: inline-block;}
			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			}
			.dropdown-content a {
				color: black;
				padding: 16px;
				text-decoration: none;
				display: block;
				text-align: center;
			}
			.dropdown-content a:hover {background-color: #f1f1f1}
			.dropdown:hover .dropdown-content {display: block;}
		</style>
	</head>
	<body>
		<div class="dropdown">
			<button class="dropbtn">下拉菜单</button>
			<div class="dropdown-content" style="left:0;">
				<a href="#">学会啦！</a>
				<a href="#">学会啦！</a>
				<a href="#">学会啦！</a>
			</div>
		</div>
	</body>
</html>