【CSS 08】display 控制布局块级元素行内元素隐藏元素结合JS 最大宽度浏览器窗口定位 position z-index 堆叠-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CSS 08】display 控制布局块级元素行内元素隐藏元素结合JS 最大宽度浏览器窗口定位 position z-index 堆叠。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

说在前面

CSS基础教程系列已经结束，接下来就是中级教程，让我们跟上脚步，继续努力吧！
并且最近临近期末考试，后面十天休刊…

display

display 属性是用于控制布局的最重要的 CSS 属性
display 属性规定是否/如何显示元素

HTML 元素都有一个默认的 display 值
具体取决于它的元素类型
大多数元素的默认 display 值为 block 或 inline

block element 块级元素
块级元素总是从新行开始，并占据可用的全部宽度
尽可能向左和向右伸展
例如:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

inline element 行内元素
内联元素不从新行开始，仅占用所需的宽度
例如:
<span>
<a>
<img>

display: none; 通常同JavaScript一同使用以隐藏和显示元素，而无需删除和重新创建它们

每个元素都有一个默认display的值，但是可以覆盖
对于使页面以特定方式显示同时仍遵循 Web 标准很有用
一个常见的例子是为实现水平菜单而生成行内的 <li> 元素
li {
	display: inline;
}

设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类
因此带有 display: block; 的行内元素不允许在其中包含其他块元素

隐藏元素 - display:none 还是 visibility:hidden

通过将 display 属性设置为 none 可以隐藏元素
该元素将被隐藏，并且页面将显示为好像该元素不在其中

visibility:hidden; 也可以隐藏元素
但是该元素仍将占用与之前相同的空间
元素将被隐藏，但仍会影响布局

利用CSS和JavaScript实现单击显示元素

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
	font-size: 16px;
	padding: 10px;
	background-color: #4CAF50;
	color: white;
	border: solid 1px hotpink;
	margin: auto;
}

#panel {
	display: none;
}
</style>
</head>

<body>

<p class="flip" onclick="myFunction()">点击显示面板</p>

<div id="panel">
 <p>面板包括一个div元素，默认情况下元素隐藏 display:none; </p>
 <p>其使用CSS进行样式的设置，使用JS来显示 display:block; </p>
 <p>工作原理是带有class="flip"的p元素拥有onclick属性，当用户点击p元素（块级元素）时，将会执行名为 myFunction()的函数，该函数将id="panel"的div样式从 display: none 改为 display: block</p>
 </div>

<script>
function myFunction() {
	document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>

max-width

使用 width、max-width 和 margin: auto
像前面所述，块级元素始终占用可用的全部宽度（尽可能向左和向右伸展）
设置块级元素的 width 将防止其延伸到其容器的边缘
然后可以将外边距设置为 auto 以将元素在其容器中水平居中
元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配

当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题
浏览器会将水平滚动条添加到页面

在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理
为了使网站在小型设备上可用，这一点很重要

ex1的宽度是固定的，不会随着浏览器窗口变化而变化，而是部分长度被覆盖
div.ex1 {
	width: 500px;
	margin: auto;
	border: 3px solid #73AD21;
}

ex2的宽度最大是500px，并且会随着窗口缩小而缩小
div.ex2 {
	max-width: 500px;
	margin: auto;
	border: 3px solid #73AD21;
}

position

position 属性规定应用于元素的定位方法的类型
static、relative、fixed、absolute 或 sticky

元素其实是使用 top、bottom、left 和 right 属性定位的
但是除非首先设置了 position 属性，否则这些属性将不起作用
根据不同的 position 值，它们的工作方式也不同

/* position: static;
HTML 元素默认情况下的定位方式为 static（静态）
静态定位的元素不受 top、bottom、left 和 right 属性的影响
position: static 的元素不会以任何特殊方式定位
始终根据页面的正常流进行定位
*/

div.static {
  position: static;
  border: 3px solid #73AD21;
}
/*
position: relative; 的元素相对于其正常位置进行定位
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整
不会对其余内容进行调整来适应元素留下的任何空间
*/

div.relative {
	position: relative;
	left: 30px;
	border: 3px solid #73AD21;
}

/*
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面也始终位于同一位置
top、right、bottom 和 left 属性用于定位此元素
固定定位的元素不会在页面中通常应放置的位置上留出空隙
*/

div.fixed {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 300px;
	border: 3px solid #73AD21;
}

/*
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）
然而，如果绝对定位的元素没有祖先，将使用文档主体（body），并随页面滚动一起移动
“被定位的”元素是其位置除 static 以外的任何元素
*/

div.relative {
	position: relative;
	width: 400px;
	height: 200px;
	border: 3px solid #73AD21;
}

div.absolute {
	position: absolute;
	top: 80px;
	right: 0;
	width: 200px;
	height: 100px;
	border: 3px solid #73AD21;
}

/*
position: sticky; 的元素根据用户的滚动位置进行定位
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）
Safari 需要 -webkit- 前缀，举例如下:
*/

div.sticky {
	position: -webkit-sticky; /* Safari的适配 加上为好 不影响其他浏览器的使用*/
	position: sticky;
	top: 0;
	background-color: green;
	border: 2px solid #4CAF50;
}

/*
重叠元素
在对元素进行定位时可以与其他元素重叠
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）
元素可以设置正或负的堆叠顺序
*/
img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}

/*
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前
如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部
*/

定位图像文本
<!DOCTYPE html>
<html>
<head>
<style>
.container {
	position: relative;
}

.topleft {
	position: absolute;
	top: 8px;
	left: 16px;
	font-size: 18px;
}

img {
	width: 100%;
	height: auto;
	opacity: 0.3;
}

</style>
</head>

<body>
<div class="container">
	<img src="/i/logo/w3logo-2.png" alt="W3School" width="800" height="450">
	<div class="topleft">Top Left</div>
	<!-- 两个定位的元素重叠而未指定z-index时，html代码中后面的元素显示在上面 -->
</div>

</body>
</html>