css小总结:overflow,vertical-align,border-collapse属性.

最新推荐文章于 2022-02-11 15:23:18 发布
最新推荐文章于 2022-02-11 15:23:18 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： javascript&html 文章标签： html Html HTML scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blue7wings/article/details/8232198
版权

overflow属性

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容.如果超出指定的高度或者宽度就可以指定其行为.
取值:
visible：
不剪切内容。
hidden：
将超出对象尺寸的内容进行裁剪，将不出现滚动条。
scroll：
将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto：
在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。
如果不指定行为的话(也就是不剪切),情况如下:

如果指定为hidden,情况如下:

如果指定为scroll,情况如下:

vertical-align属性

设置或检索对象内容的垂直对齐方式.
一个小例子:
 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test p{border:1px solid #000;font-size:16px;line-height:2;}
.test a{margin-left:5px;font-size:12px;}
.baseline a{vertical-align:baseline;}
.sub a{vertical-align:sub;}
.super a{vertical-align:super;}
.top a{vertical-align:top;}
.text-top a{vertical-align:text-top;}
.middle a{vertical-align:middle;}
.bottom a{vertical-align:bottom;}
.text-bottom a{vertical-align:text-bottom;}
.length a{vertical-align:10px;}
</style>
</head>
<body>
<ul class="test">
	<li class="baseline">
		<strong>与基线对齐</strong>
		<p>参考内容<a href="?">基线对齐</a></p>
	</li>
	<li class="sub">
		<strong>与参考内容的下标对齐</strong>
		<p>参考内容<a href="?">下标对齐</a></p>
	</li>
	<li class="super">
		<strong>与参考内容的上标对齐</strong>
		<p>参考内容<a href="?">上标对齐</a></p>
	</li>
	<li class="top">
		<strong>对象的内容与对象顶端对齐</strong>
		<p>参考内容<a href="?">要对齐的内容</a></p>
	</li>
	<li class="text-top">
		<strong>对象的文本与对象顶端对齐</strong>
		<p>参考内容<a href="?">要对齐的内容</a></p>
	</li>
	<li class="middle">
		<strong>对象的内容与对象中部对齐</strong>
		<p>参考内容<a href="?">要对齐的内容</a></p>
	</li>
	<li class="bottom">
		<strong>对象的内容与对象底端对齐</strong>
		<p>参考内容<a href="?">要对齐的内容</a></p>
	</li>
	<li class="text-bottom">
		<strong>对象的文本与对象顶端对齐</strong>
		<p>参考内容<a href="?">要对齐的内容</a></p>
	</li>
	<li class="length">
		<strong>与基线算起的偏移量</strong>
		<p>参考内容<a href="?">偏移量对齐</a></p>
	</li>
</ul>
</body>
</html>
效果:

通过这个例子可以很轻松的掌握 vertical-align属性.

border-collapse属性

取值:separate collapse
设置或检索表格的行和单元格的边是合并还是独立。默认是separate,单元格的边是独立的,如果属性设置为collapse单元格的边此时就是合并的,此时单元格之间margin属性就失效了.


blue7wings
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity 之 UGUI Text文本组件详解
陈言必行 -- Unity游戏开发领域优质博主
09-10 3万+
文本控件向用户显示非交互式文本。此控件可用于为其他 GUI 控件提供标题或标签，或显示说明或其他文本。
css之border-collapse属性
Focus-Fe
02-07 232
CSS border-collapse 属性       ---------设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示。   默认值： separate 继承性： yes 版本： CSS2 JavaScript 语法： object.style.borderCollapse="collapse"   ...
CSS-overflow和vertical-align的用法-八
HAOXUAN_的博客
07-21 207
溢出问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
关于文本设置overflow：hidden后引起的垂直对齐问题
weixin_45386794的博客
02-11 373
本文转载自：https://blog.csdn.net/weixin_30877181/article/details/101731141 实现图片中红框左右两部分文本垂直对齐 目前有这样的需求，一行标题中，前面为图标，后面是文字，文字要实现一行省略的效果。 首先把文字设为：display: inline-block; 然后设置省略： overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; .
vertical-align:middle和overflow:hidden;
weixin_30645617的博客
03-03 141
如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。 在设置了 width 或 height 的div中，写上overflow:hidden;的话，超出宽度或高度的部分，就隐藏了。就是说，这个overflow:hidden;属性可以保证div的高度或宽度不变。div里添加的东西再多，高度或宽度也不变。超出的部分隐藏。 转载于:htt...
关于CSS 定位及z-index、overflow、vertical-align和cursor相关属性的使用
weixin_45369499的博客
10-28 362
1、css定位： CSS 有三种基本的定位机制：普通流、float浮动和position定位。 类型 内容 普通流 只要不设置定位方式都默认为普通流。 float浮动 设置float属性 position定位 设置position属性 接下来重点说说position定位，这是在页面设计中用得比较多的定位方式。 position定位：有四种不同的定位方法。 值 属...
CSS样式所有属性.pdf
02-27
- `vertical-align`：设置元素的垂直对齐方式。 - `visibility`：控制元素是否可见。 - `z-index`：设置元素的堆叠顺序。 9. **打印属性（Print）**： - `orphans` 和 `widows`：控制页面分页时的行数。 - `...
DIV+CSS属性设置参数.pdf
11-26
本文将详细解析`DIV+CSS`中的各种属性设置参数，这些参数是构建网页布局和美化页面的关键元素。我们将逐一探讨行距、背景图像、宽度、高度、最大字符数等核心概念，并深入讲解各种排版、定位、字体样式、文本装饰...
DIV+CSS属性设置参数.docx
11-26
25. **Border-collapse**: 是否合并表格的边框，`collapse`表示合并。 26. **Border-spacing**: 设置表格单元格之间的边距。 27. **Empty-cells**: 控制空单元格的显示，如`hide`（隐藏）。 28. **Cursor**: 设置...
DIV+CSS属性设置参数 (2).docx
11-26
31. **border-collapse**：表格边框合并，`collapse`表示合并。 32. **border-spacing**：设置表格单元格之间的边距。 33. **empty-cells**：控制空单元格的显示方式。 34. **Tr:hover**：鼠标悬停在表格行上的...
Unity UGUI的各种属性
qq_26916435的博客
05-06 1430
Alignment: 文字以 水平和垂直 对齐方式,   Horizontal Overflow: 水平         Wrap: 文字大小和数量超过Text边框宽度,不再显示         Overflow: 文字超过了边框宽度,还是显示出来   Vertical Overflow:垂直         Truncate: 截断,文字垂直超过Text
unity UGUI组件详情
qq_41063643的博客
01-08 3094
一、Image Source Image（图像源）：纹理格式为Sprite（2D and UI）的图片资源（导入图片后选择Texture Type为Sprite（2D and UI））。 Color（颜色）：图片叠加色。 Material（材质）：图片叠加材质。 Raycast Target（射线投射目标）：是否作为射线投射目标。 Imag
【UGUI】Text组件——迷糊点解析
weixin_42935398的博客
08-20 566
红1.Horizontal Overflow 文字在框水平方向排成一行，要超出框右边界，怎么办 “Wrap”换行 （如果框下部，还有空间盛放下一行文字，就换行；如果没有空间，就截断不要了） "Overflow"溢出（盛不下的文字，在框外显示） 红2.Vertical Overflow 文字多次换行后，要超出框下边界，怎么办 "Truncate"截断（盛不下的文字，截断不要了） "Overflow"溢出（盛不下的文字，在框外显示） 红3.Raycast Target "Raycast Target"是否为射.
【不一样的CSS】深入理解 overflow (溢出要学会处理)
一碗周
12-21 2859
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) overflow 的基本属性 概述 overflow 属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个
UGUI源码剖析（Text）
漫漫无期的博客
12-06 653
Runtime类图分析 Text继承了MaskableGraphic, ILayoutElement 关键方法分析 生命周期方法 OnEnable方法 先调用TextGenerator.Invalidate()，使TextGenerator失效，将在下次调用Populate时，强制全文生成。之后调用了FontUpdateTracker.TrackText，把自己添加到字体更新追踪器中。 OnDisable方法 调用FontUpdateTracker.UntrackText，把自己从字体更新
UGUI进阶组件[八]Text
weixin_43149049的博客
12-26 470
Text也是UI里面最常用的组件了 Font 指定字体文件，注意有些字体文件不能够显示中文，不同的text使用不同的字体文件 可能会造成打出来的包有bug FontStyle FontStyle有四种选择，正常，加粗，斜体，加粗斜体，这用于整个Text里面的内容 LineSpacing 如果有换行的情况下，这个属性控制的是每行字体之间的间隔 RichText 这个属性表示的是这个text会识别...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
热门推荐
陈小峰（iefreer）的专栏
12-28 1万+
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。
html表格样式及border,align属性
qq_43320218的博客
03-30 1418
基本表格 首先上一段最基本的表格绘制代码。 <table border="1" align="center" style=" border: 1px black solid; border-spacing: 0px; border-collapse: collapse; "> <caption>这是表的标题</caption> ...
H5 table表格案例、边距 解析（表格带有滚动条）
林中明月间丶
12-18 8759
一个简单的表格： <table id="tab1" width="100%" cellspacing="0" border="1px"> <thead> <tr> <th>第一季度</th> <th>第二季度</th> <th>第三季度...
下列样式定义字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线 正确的定义是：（ ） A、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：top；text-align：left； } B、 p{text-decoration：0.5em；letter-spacing：underline；vertical-align：top；text-align：left； } C、 p{text-decoration：left；letter-spacing：top；vertical-align：0.5em；text-align：underline； } D、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：left；text-align：top； }
最新发布
06-03
在CSS中，可以使用`letter-spacing`属性来定义字体间距，使用`text-align`属性来定义水平对齐方式，使用`vertical-align`属性来定义垂直对齐方式，使用`text-decoration`属性来定义下划线。根据题目的要求，可以将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值