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

CSS

- - 说在前面
  - display
  - max-width
  - position

说在前面

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

display

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

HTML 元素都有一个默认的 display 值
具体取决于它的元素类型
大多数元素的默认 display 值为 block 或 inlineblock 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>