CSS（4）display显示、posttion定位、overflow布局、float浮动

最新推荐文章于 2024-08-21 15:33:15 发布

初闻女人香

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量323

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/134775686

版权

Display显示与Visibility可见性

display属性设置一个元素应如何显示
visibility属性指定一个元素应可见还是隐藏。
隐藏元素-display：none或visibility：hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

<style>
h1.hidden {visibility:hidden;}
</style>
</head>

<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>

效果图显示如下：
在这里插入图片描述

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<style>
h1.hidden {display:none;}
</style>
</head>
<body>
	
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>

效果图如下：
在这里插入图片描述

CSS Display - 块和内联元素

在这里插入图片描述

把列表项转化为内联元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接列表水平展示</title> 
<style>
li{display:inline;}
</style>
</head>
<body>

<p>链接列表水平显示：</p>

<ul>
<li><a href="https://www.runoob.com/html/html-tutorial.html" target="_blank">HTML</a></li>
<li><a href="https://www.runoob.com/css/css-tutorial.html" target="_blank">CSS</a></li>
<li><a href="https://www.runoob.com/js/js-tutorial.html" target="_blank">JavaScript</a></li>
<li><a href="https://www.runoob.com/css3/css3-tutorial.html" target="_blank">CSS3</a></li>
</ul>

</body>
</html>

把span元素作为块元素：

<style>
span
{
	display:block;
}
</style>
</head>
<body>

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

如何显示一个元素的内联元素

<style>
p {display:inline;}
</style>
</head>

<body>
<p>display 属性的值为 "inline"的结果</p>
<p>两个元素显示在同一水平线上。</p>

2.如何显示一个元素的块元素

<style>
span
{
	display:block;
}
</style>
</head>
<body>

<span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>

3.如何使用一个表的collapse属性

Firstname	Lastname
Peter	Griffin
Lois	Griffin

<style>
table, th, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr class="collapse">
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

CSS Position（定位）

position属性指定了元素的定位类型， position属性的五个值：

static
relative
fixed
absolute
sticky
元素可以使用顶部，底部，左侧和右侧属性定位，然而这些属性无法工作，除非事先设定position属性，他们也有不同的工作方式，这取决于定位方法。

Static定位（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static属性</title>
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>

<div class="static">
该元素使用了 position: static;
</div>

</body>
</html>

fixed定位（固定定位）

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>fixed定位</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠

Relative定位（相对定位）

相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>relative相对定位</title> 
<style>
h2.pos_left
{
	position:relative;
	left:-20px;
}

h2.pos_right
{
	position:relative;
	left:20px;
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

absolute定位（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>absolute绝对定位</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

sticky定位（粘性定位）

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>z-index堆叠顺序</title> 
<style>
img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="../img/3147.jpg" width="200" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

裁剪元素外形

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>裁剪图片</title> 
<style>
img 
{
	position:absolute;
	clip:rect(2px,60px,200px,0px);
}
</style>
</head>

<body>
<img src="../img/3147.jpg" width="100" height="140" />
</body>
</html>

效果图如下：
在这里插入图片描述

Overflow属性：

使用滚动条来显示元素内溢出的内容，这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定区域过大时如何设置适应：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>overflow属性</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
} 

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div>

<h2>overflow: hidden:</h2>
<div class="ex2">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div>

<h2>overflow: auto:</h2>
<div class="ex3">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div>

</body>
</html>

更改光标：

演示如何改变光标：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>更改光标</title> 
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

Overflow布局

CSS overflow 属性用于控制内容溢出元素框时显示的方式，可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 60px;
    width: 80%;
    height: 150px;
    overflow: scroll;
    border: 2px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>

在这里插入图片描述

overflow: visible

默认情况下，overflow 的值为 visible，意思是内容溢出元素框：
在这里插入图片描述

<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

CSS Float浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动：元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>float浮动</title>
<style>
img 
{
	float:left;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:left</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="../img/3147.jpg" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>彼此相邻的浮动元素</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90x;
	margin:8px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="../img/123.jpg" width="170" height="90">
<img class="thumbnail" src="../img/234.jpg.png" width="107" height="80">
<img class="thumbnail" src="../img/478.jpg.jpg" width="116" height="90">
<img class="thumbnail" src="../img/692.jpg.jpg" width="120" height="90">
<img class="thumbnail" src="../img/3147.jpg" width="107" height="90">
</body>
</html>

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>clear清除浮动</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="../img/123.jpg" width="107" height="90">
<img class="thumbnail" src="../img/234.jpg.png" width="107" height="80">
<img class="thumbnail" src="../img/3147.jpg" width="110" height="90">
<img class="thumbnail" src="../img/478.jpg.jpg" width="100" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="../img/692.jpg.jpg" width="107" height="90">
<img class="thumbnail" src="../img/fir.jpg.jpeg" width="107" height="80">
<img class="thumbnail" src="../img/light.jpg.jpeg" width="116" height="90">
<img class="thumbnail" src="../img/R-C.gif" width="120" height="90">
</body>
</html>

在这里插入图片描述

创建一个没有表格的网页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>创建一个没有</title> 
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.header {
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer {
    background-color: #444;
    color: white;
    padding: 15px;
}
.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li {
    float: left;
}
.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.sidemenu {
    width: 25%;
}
.content {
    width: 75%;
}
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a {
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover {
    background-color: #555;
    color: white;
}
.sidemenu li a.active {
    background-color: #008CBA;
    color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>底部文本</p>
</div>

</body>
</html>