CSS 常见属性
前言
这里有很多小功能CSS实例Demo，可以看看去~
一：元素分类
①块级元素（block element）
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。块级元素的一些例子：
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
②行内元素（inline element）
内联元素不从新行开始，仅占用所需的宽度。行内元素的一些例子：
<span>
<a>
<img>
二：常见的CSS属性
1，display属性
display属性规定是否或如何显示元素。
每个 HTML元素都有一个默认的 display值，具体取决于它的元素类型。
大多数元素的默认display 值为 block或inline。
image.png
下面几个重要的常用的说明：
display: none
display: block
display: inline
display: inline-block
display: inherit
① display: none
none这个值表示此元素将不被显示。
比如：当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！
当然display: none的用法绝不是专门用于这里的，它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none; 当鼠标滑过一级菜单时，再显示出来（详见《如何实现导航菜单中的二级下拉菜单》）。还可以用于登陆模态框的制作等等。
② display: block
此元素将显示为块级元素，此元素前后会带有换行符。设置为block后，那么内联元素就具有了块级元素的特征，具有高度和margin-top和padding-top等信息。
③ display: inline
针对inline的标签，你设置宽度和高度是无效的，元素前后没有换行符。该元素实际的宽度和高度都是auto，并不是我们设定的值。
显然，display:inline的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。
④ display: inline-block
根据名字，实际上我们就可以才出来它是结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。
⑤ display:inherit
规定应该从父元素继承 display 属性的值。举例如下：
html代码如下：
<div id="parent">
<div id="first_son"></div>
<div id="second_son"></div>
</div>
css代码如下：
#parent{display: inline-block； font-size: 0; background: #cadafa;width: 400px;height: 300px;}
#first_son{display: inherit; background: #eaedac;width: 200px;height: 100px;}
#second_son{display: inherit; background: #da5dd8;width: 200px;height: 100px;}
我们先设置了id为parent的元素的display属性值为inline-block，然后将其子元素的display属性值设置为inherit（继承），于是，子div的display属性值继承了父元素的display属性值为inline-block。
（注意，我在id为parent的div元素中设置了font-size:0px;这样可以有效解决由inline元素带来的空白符问题。）
效果图如下：
image.png
2，position属性
position属性指定了元素的定位类型。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
①position: static
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-position-static</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
<style>
.container{
background-color: #868686;
width: 100%;
height: 300px;
}
.content{
background-color: yellow;
width: 100px;
height: 100px;
position: static;
left: 10px;/* 这个left没有起作用 */
}
</style>
</head>
<body>
<div class="container">
<div class="content">
</div>
</div>
</body>
</html>
left: 10px;这个left没有起作用
image.png
②position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
image.png
image.png
③position: absolute
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
image.png
④position: fixed
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
image.png
⑤position: sticky
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。有点类似iOS的tableView的头部悬浮
QQ20210812-143855-HD.gif
3，overflow属性
overflow属性规定当内容溢出元素框时发生的事情
image.png
①scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
QQ20210812-153830-HD.gif
②visible 默认值。内容不会被修剪，会呈现在元素框之外。
image.png
③hidden 内容会被修剪，并且其余内容是不可见的。
image.png
④auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
QQ20210812-154311-HD.gif
⑤inherit 规定应该从父元素继承 overflow 属性的值。
4，对齐属性
①元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
image.png
②文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
image.png
③图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
image.png
④左右对齐 - 使用定位方式
我们可以使用position: absolute; 属性来对齐元素:
提示: 当使用 position来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
image.png
⑤左右对齐 - 使用 float 方式
我们也可以使用float 属性来对齐元素:
image.png
⑥垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用padding:
image.png
⑦垂直居中 - 使用 line-height
image.png
