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

CSS

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

说在前面

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: blockp>
 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 Leftdiv>
	
div>

body>
html>

参考更高级的更详细的定位技巧

你可能感兴趣的:(CSS,css,javascript,html)