CSS（边框补充、文本补充、Display与 Visibility、position（定位）、解决文本溢出

WX_Tracy

已于 2022-02-09 12:08:17 修改

阅读量362

点赞数

文章标签： css html css3

于 2022-01-23 20:10:18 首次发布

本文链接：https://blog.youkuaiyun.com/wx_tracy/article/details/122640995

版权

本文深入探讨CSS中的边框、文本、显示与可见性、定位及溢出等核心概念，通过实例讲解如何设置圆角边框、文本阴影、元素显示方式、定位类型以及处理内容溢出的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、边框

1、圆角边框

border-radius属性用于设置元素的外边框圆角，radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角的效果

语法：border-radius：length：

参数值可以是为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者50%
如果是矩形，设置为高度的一半就可以做类似于一个椭圆

2、盒子阴影

box-shadow 属性被用来添加阴影

语法：box-shadow：h-shadow v-shadow blur spread color inset;

h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色，参阅CSS颜色值
inset	可选，将外部阴影（outset）改为内部阴影

3、边界图片

border-image 属性可以使用图像创建一个边框。border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像（详细参考菜鸟教程）

二、文本

1、文本阴影

在CSS3 中，text-shadow属性适用于文本阴影。效果例如：

2、文本溢出

3、自动换行

word-wrap属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

p {word-wrap:break-word;}

三、display（显示）与visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

1、隐藏元素：display:none、visibility：hidden

注：visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。但display:none隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

2、display

①块级元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，

自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器(父级高度)的100%
是以个容器及盒子，里面可以放行内或者块级盒子

②行内(内联)元素：<a>、<em>、<span>等

相邻行内元素在一行上，即一行可以显示很多个
高度和宽度设置无效
默认宽度就是他本身内容的宽度
行内元素只能容纳文本或其他行内元素

③行内块元素：<img/>、<input/>、<td>这些标签同时具有块元素与行内块元素的特点

和相邻行内元素在一行上，但是他们之间会有空白间隙，一行可以显示多个
默认宽度就是他本身内容的宽度
高度、行高、外边距以及内边距都可以控制

④显示模式转换：更改内联元素和块元素

转换为块级元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

四、定位

position 属性指定了元素的定位类型。以下是属性值

①static 定位：HTML 元素的默认值

②fixed 定位：元素的位置相对于浏览器窗口是固定位置。

③relative 定位：相对定位元素的定位是相对其正常位置，需要指定单位

h2.pos_top
{
    position:relative;
    top:-50px;
}

④absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，用法与相对定位类似

⑤sticky 定位：粘性定位。

position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。（效果相当于哔哩哔哩的首页，详细见菜鸟教程）

⑥有关元素重叠：z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），

一个元素可以有正数或负数的堆叠顺序

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

注：具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

五、overflow

overflow 属性用于控制内容溢出元素框时显示的方式。

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚定条以便查看其余的内容
inherit	规定应该从父元素继承overflow属性的值

注：overflow 属性只工作于指定高度的块元素上。