CSS开发技巧——布局技巧

最新推荐文章于 2023-06-29 17:08:52 发布
最新推荐文章于 2023-06-29 17:08:52 发布
阅读量136 收藏 1
点赞数 1
分类专栏： css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42445025/article/details/118696328
版权
CSS开发技巧——布局技巧

  • 使用vw定制rem自适应布局

    移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制

    • 场景： rem页面布局不兼容低版本移动端系统

    • // 基于 UI宽度为750px DPR=2的页面

    • html {
	fongt-size:calc(100vw / 7.5)
}

  • 使用:nth-child()选择指定元素

    通过 :th-child()筛选指定的元素设置样式

    • 场景：表格着色、边界元素排版(首元素、尾元素、左右两边元素)

    • <div class="bruce flex-ct-x" data-title="使用:nth-child()选择指定元素">
	<ul class="specified-scope">
		<li>10001</li>
		<li>10002</li>
		<li>10003</li>
		<li>10004</li>
		<li>10005</li>
		<li>10006</li>
		<li>10007</li>
		<li>10008</li>
		<li>10009</li>
		<li>10010</li>
	</ul>
</div>


<style>
.specified-scope {
	width: 300px;
	li {
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		&:nth-child(odd) {
			background-color: #f66;
		}
		&:nth-child(even) {
			background-color: #66f;
		}
		&:nth-child(n+6):nth-child(-n+7) {
			background-color: #3c9;
		}
	}
}
</style>

在这里插入图片描述

  • 使用writing-mode排版竖文

    通过writing-mode调整文本排版方向

    • 场景：竖行文字、文言文、诗词

    • <div class="bruce flex-ct-x" data-title="使用writing-mode排版竖向文本">
	<div class="vertical-text">
		<p>忽故人心上过，<br>回首山河已是秋。<br>两处相思同淋雪，<br>此生也算共白头。</p>
	</div>
</div>

<style>
.vertical-text {
	writing-mode: vertical-rl;
	h3 {
		padding-left: 20px;
		font-weight: bold;
		font-size: 18px;
		color: #f66;
	}
	p {
		line-height: 30px;
		color: #66f;
	}
}
</style>

在这里插入图片描述

  • 使用text-align-last对齐两端文本

    通过text-align-last:justify设置文本两端对齐

    • 场景：未知字数中文对齐

    • <div class="bruce flex-ct-x" data-title="使用text-align-last对齐两端文本">
	<ul class="justify-text">
		<li>账号</li>
		<li>密码</li>
		<li>电子邮件</li>
	</ul>
</div>
<style>
.justify-text {
	li {
		padding: 0 20px;
		width: 100px;
		height: 40px;
		background-color: #f66;
		line-height: 40px;
		text-align-last: justify;
		color: #fff;
		& + li {
			margin-top: 5px;
		}
	}
}
</style>

在这里插入图片描述

  • 使用:not()去除无用属性

    通过:not()排除指定元素不使用设置样式

    • 场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)

    • <div class="bruce flex-ct-x" data-title="使用:not()去除无用属性">
	<ul class="cleared-attr">
		<li class="first-line">
			<span>A</span>
			<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
		</li>
		<li class="second-line">
			<span>A</span>
			<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
		</li>
	</ul>
</div>

<style>
.cleared-attr {
	li {
		height: 40px;
		line-height: 40px;
	}
	span {
		display: inline-block;
		color: #66f;
	}
	.first-line span:not(:last-child)::after {
		content: ",";
	}
	.second-line span:not(:nth-child(-n+3)) {
		display: none;
	}
}
</style>

在这里插入图片描述

  • 使用object-fit规定图像尺寸

    通过object-fit使图像脱离background-size的约束，使用来标记图像背景尺寸

    • 场景：图片尺寸自适应

  • 使用overflow-x排版横向列表

    通过flexbox或inline-nlock的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看

    • 场景：横向滚动列表、元素过多但位置有限的导航栏

    • <div class="bruce flex-ct-y" data-title="使用overflow-x排版横向列表">
	<div class="horizontal-list flex">
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
			<li>E</li>
			<li>F</li>
		</ul>
	</div>
	<div class="horizontal-list inline">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>
</div>

<style>
.horizontal-list {
	overflow: hidden;
	width: 300px;
	height: 100px;
	& + .horizontal-list {
		margin-top: 10px;
	}
	ul {
		overflow-x: auto;
		cursor: pointer;
		&::-webkit-scrollbar {
			height: 10px;
		}
		&::-webkit-scrollbar-track {
			background-color: #f0f0f0;
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			background-color: #f66;
		}
	}
	li {
		overflow: hidden;
		height: 90px;
		background-color: #66f;
		line-height: 90px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		& + li {
			margin-left: 10px;
		}
	}
	&.flex {
		ul {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
		li {
			flex-shrink: 0;
			flex-basis: 90px;
		}
	}
	&.inline {
		height: 102px;
		ul {
			overflow-y: hidden;
			white-space: nowrap;
		}
		li {
			display: inline-block;
			width: 90px;
		}
	}
}
</style>

在这里插入图片描述

  • 使用text-overflow控制文本溢出

    通过text-overflow:ellipsis对溢出的文本在末端添加 ...

    • 场景：单行文字溢出、多行文字溢出

    • <div class="bruce flex-ct-y" data-title="使用text-overflow控制溢出文本">
	<p class="ellipsis-text s-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p>
	<p class="ellipsis-text m-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
	<p class="ellipsis-text m-line mls-ellipsis">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>

<style>
.ellipsis-text {
	line-height: 30px;
	font-size: 20px;
	&.s-line {
		width: 400px;
	}
	&.m-line {
		margin-top: 10px;
		width: 400px;
		text-align: justify;
	}
	&.sl-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&.ml-ellipsis {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	&.mls-ellipsis {
		overflow: hidden;
		position: relative;
		max-height: 90px;
		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			padding-left: 40px;
			background: linear-gradient(to right, transparent, #fff 50%);
			content: "...";
		}
	}
}
</style>

在这里插入图片描述

  • 使用transform描绘1px边框

    分辨率比较低的屏幕下显示1px的边框回显得模糊，通过::before或::after和transform模拟细腻的1px边框。

    • 场景：容器1px边框

    • <div class="bruce flex-ct-y" data-title="使用transform描绘像素边框">
	<div class="onepx-border normal">1px</div>
	<div class="onepx-border thin">0.5px</div>
</div>

<style>
.onepx-border {
	width: 200px;
	height: 80px;
	cursor: pointer;
	line-height: 80px;
	text-align: center;
	font-weight: bold;
	font-size: 50px;
	color: #f66;
	& + .onepx-border {
		margin-top: 10px;
	}
	&.normal {
		border: 1px solid #f66;
	}
	&.thin {
		position: relative;
		&::after {
			position: absolute;
			left: 0;
			top: 0;
			border: 1px solid #f66;
			width: 200%;
			height: 200%;
			content: "";
			transform: scale(.5);
			transform-origin: left top;
		}
	}
}
</style>

在这里插入图片描述

  • 使用transform翻转内容

    通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)

    • <div class="bruce flex-ct-x" data-title="使用transform翻转内容">
	<ul class="flip-content">
		<li>正常文本</li>
		<li class="x-axis">水平翻转</li>
		<li class="y-axis">垂直翻转</li>
		<li class="reverse">倒序翻转</li>
	</ul>
</div>

<style>
.flip-content {
	li {
		position: relative;
		width: 121px;
		height: 51px;
		line-height: 51px;
		text-align: center;
		font-weight: bold;
		font-size: 30px;
		color: #f66;
		&::before,
		&::after {
			position: absolute;
			background-color: #66f;
			content: "";
		}
		& + li {
			margin-top: 10px;
		}
		&.x-axis {
			transform: scale(1, -1);
			&::after {
				left: 0;
				top: 25px;
				width: 100%;
				height: 1px;
			}
		}
		&.y-axis {
			transform: scale(-1, 1);
			&::after {
				left: 60px;
				top: 0;
				width: 1px;
				height: 100%;
			}
		}
		&.reverse {
			transform: scale(-1, -1);
			&::before {
				left: 0;
				top: 25px;
				width: 100%;
				height: 1px;
			}
			&::after {
				left: 60px;
				top: 0;
				width: 1px;
				height: 100%;
			}
		}
	}
}
</style>

在这里插入图片描述

  • 使用letter-spacing排版倒序文章

    通过letter-spacing 设置负值字体间距将文本倒序

    • <div class="bruce flex-ct-x" data-title="使用letter-spacing排版倒序文本">
	<div class="reverse-text">平安喜乐</div>
</div>

<style>
.reverse-text {
	padding-left: 100px; // 与letter-spacing一致
	font-weight: bold;
	font-size: 50px;
	color: #f66;
	letter-spacing: -100px; // letter-spacing最少是font-size的2倍
}
</style>

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SBU7glwi-1626147337410)(C:%5CUsers%5Cmeryliangyu%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210712163540267.png)]

  • 使用margin-left排版左重右轻列表

    使用flexbox横向布局时，最后一元素通过margin-left:auto实现向右对齐

    • 场景：右侧带图标的导航栏

    • <div class="bruce flex-ct-y" data-title="使用margin排版凸显布局">
	<ul class="highlight-list left">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
		<li>F</li>
	</ul>
	<ul class="highlight-list right">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
		<li>F</li>
	</ul>
</div>

<style>
.highlight-list {
	display: flex;
	align-items: center;
	padding: 0 10px;
	width: 600px;
	height: 60px;
	background-color: #3c9;
	& + .highlight-list {
		margin-top: 10px;
	}
	li {
		padding: 0 10px;
		height: 40px;
		background-color: #3c9;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
	}
	&.left li {
		& + li {
			margin-left: 10px;
		}
		&:last-child {
			margin-left: auto;
		}
	}
	&.right li {
		& + li {
			margin-left: 10px;
		}
		&:first-child {
			margin-right: auto;
		}
	}
}
</style>

在这里插入图片描述

xiaoLiang o
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css技巧收藏——经典中的经典
09-22
本文将分享一些经典的CSS技巧，这些技巧在实际开发中非常实用且广泛适用。 1. 删除链接上的虚线框：在Firefox浏览器中，当链接被点击或获得焦点时，会自动添加一个虚线框。为了去除这个虚线框，可以使用以下代码： ...
CSS布局技巧三【使用letter-spacing排版倒序文本、使用margin-left排版左重右轻列表（导航）】
weixin_43837268的博客
09-08 807
使用letter-spacing排版倒序文本 要点：通过letter-spacing设置负值字体间距将文本倒序 场景：文言文、诗词 兼容：letter-spacing <div class="bruce flex-ct-x"> <div class="reverse-text">恭喜发财</div> </div> <style la...
CSS左中右自适应布局六种方案与原理
lzqial1987的专栏
06-02 1129
css虽简单,但细节多,技巧性高,易学难精。 如何实现左右固定300px , 中间宽度自适应？ 有如下结构 <div class="wrapper"> <div class="item left">左</div> <div class="item right">右</div> <div class="item center">中</div> </div> 公有样式, 设置高,设置左
灵活运用CSS开发技巧（转载）
xuehu837769474的博客
02-24 1411
何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物...
标记语言——CSS布局
12-12
点击这里返回软件开发网　HTML教程　栏目．...在这一章内,将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 稍后在"技巧延伸"中,将会讨论Wind
CSS+DIV浏览器兼容技巧
06-13
在构建基于 CSS+DIV 的网页布局时，浏览器兼容性是一个重要的考量因素，因为不同的浏览器对 CSS 规则的解析和执行可能存在差异。本篇文章主要探讨了一些针对 IE7、IE6 和 Firefox 的 CSS 兼容性技巧。 首先，我们来...
css布局总结
11-09
本文将重点介绍几种常用的CSS布局技巧，包括但不限于居中布局、多列布局及全局布局等。 #### 二、居中布局 在CSS布局中，居中是一种常见的需求，无论是水平居中还是垂直居中都有多种实现方式。下面我们将详细介绍...
制作网页Css使用技巧
11-18
布局技巧也是CSS学习的重要部分。Flexbox（弹性盒布局）和Grid（网格布局）是现代CSS布局的两大利器。Flexbox处理一维布局，如行或列，而Grid则适用于二维布局，可以轻松创建复杂的网格系统。 响应式设计是当前网页...
三栏式布局详解（代码+图解）
qq_42445025的博客
09-02 2331
三栏式布局 三栏式布局就是两边固定，中间自适应。 三栏式布局实现方法有很多，包括： 流体布局 BFC三栏布局 双飞翼布局 圣杯布局 Flex布局 Table布局 绝对定位布局 网格布局 流体布局 左侧向左浮动、右侧向右浮动，最后渲染中间实现；最后渲染中间也就意味着在html中内容div写在最后，并设置中间模块的 margin 值使中间模块宽度自适应 缺点就是主要内容无法最先加载，当页面内...
CSS知识点汇总(十)--移动端适配
qq_42445025的博客
06-29 1804
rem（font size of the root element）是指相对于根元素的字体大小的单位，如果我们设置 html 的 font-size 为 16px，则如果需要设置元素字体大小为 16px，则写为 1rem。设置 viewport 的 width 为 device-width，改变浏览器 viewport（布局视口和视觉视口）的默认宽度为理想视口宽度，从而使得用户可以在理想视口内看到完整的布局视口的内容。页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，这个代价有点高；
CSS知识点汇总(五)--文本对齐&脱离文档流
qq_42445025的博客
06-29 1251
什么是 Fouc(文档样式短暂失效)？在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。使用 import 方法导入样式表将样式表放在页面底部有几个样式表，放在 html 结构的不同位置当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
CSS知识点汇总(六)--垂直居中&动画实现方式
qq_42445025的博客
06-29 884
你可以 transition: 值1，值2，值3，值4 这样写，也可以：transition-property: 值1;逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画在 CSS3 中是由属性keyframes来完成逐帧动画的。因为 SVG 中保存的是点、线、面的信息，与分辨率和图形大小无关，只是跟图像的复杂程度有关，所以图像文件所占的存储空间通常会比 png 小。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。
CSS开发技巧——行为技巧
qq_42445025的博客
02-21 845
CSS开发技巧
CSS3之盒子模型详解
qq_42445025的博客
06-30 784
CSS3之盒子模型详解 1、什么是盒子模型？ CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 在CSS中盒模型被分为两种：第 一种 是 W3C的标准模型，另一种 是IE的传统模型（也叫怪异盒模型）。 2、W3C 的标准...
CSS知识点汇总(十一)--回流&重绘
最新发布
qq_42445025的博客
06-29 650
当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。触发回流一定会触发重绘。
CSS知识点汇总(三)--定位&伪类&移动端1px&CSS布局
qq_42445025的博客
06-28 624
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0. 75em, 10px=0. 625em。生成相对定位的元素怒，相对于其在普通流中的位置进行定位。生成绝对定位的元素，相对于浏览器窗口进行定位的。默认值，没有定位，元素出现在正常的流中。CSS3 border-image 属性。fixed （老IE不支持）
CSS知识点汇总(二）--选择器&外边距等
qq_42445025的博客
06-28 601
外边距重叠就是 margin-collapse。在 CSS 当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。两个相邻的外边距都是正数时，折叠结果取两者之间较大的。两个相邻的外边距都是负数时，折叠结果取两者绝对值的较大的。两个外边距一正一负时，折叠结果取两者相加之和。
CSS知识点汇总(九)--BFC
qq_42445025的博客
06-29 585
常见的文档流其实分为定位流、浮动流、普通流三种。
CSS知识点汇总(八)--Flexbox
qq_42445025的博客
06-29 562
浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性。设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值