说在前面
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>
8816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
