目录

CSS基础知识

前言

准备工作

元素的显示与隐藏

display

visibility

元素不透明度

RGBa

十六进制

opacity

元素的溢出属性

元素的滚动条

居中布局 

盒子水平居中

盒子垂直居中

盒子中心居中

网页的部分结构

顶部导航的编写技巧

轮播图的编写技巧

预告和回顾

后话

---

CSS基础知识

前言

本系列博客将分享层叠样式表（CSS）有关的知识点。

本期博客主要分享的内容为以下几个部分：

• 元素的显示与隐藏
• 元素不透明度
• 元素溢出属性
• 元素的滚动条
• 居中布局
• 网页的部分结构

不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

元素的显示与隐藏

通常来说，根据实际情况的不同，元素的显示与隐藏有两种设置的方式，分别为设置display属性和visibility属性。

display

前面我们已经知道，display属性可以设置为block，inline-block，inline等，这些属性值都将使我们的元素可见并占据位置。

如果我们想让元素不可见且不占据位置，则可以将元素的display属性值设置为none。

该属性常见于各种下拉菜单、banner轮播图以及图层蒙版的制作。

visibility

如果我们仅仅调整元素的可见性，而元素本身依然占据原来的位置，则可以使用visibility属性。

当该属性的值为visible，即默认值，则该元素可见；将其设置为none可以将元素隐藏。

该属性常常用于一些需要占位的元素或组件的显示状态中。

元素不透明度

对于visibility属性来说，元素只有完全显示和完全隐藏两种状态，但在有些情况之下，我们可能还需要让元素的显示状态介于完全透明与完全不透明（完全显示）之间，这个时候就需要调节元素透明度了。

调节元素透明度常见的属性有rgba，十六进制以及opacity。

RGBa

使用这种方式时，调节透明度主要利用最后的a值。

该方法的属性值格式为rgba(r,g,b,a)，前三个数值范围均为0~255，分别代表红、绿、蓝三原色的通道值。a的值范围为0~1，即从完全透明到完全不透明。

十六进制

其实十六进制和rgba是类似的。

在原来的6位十六进制颜色的基础上，加入两个十六进制位置组成八位十六进制颜色值，最后两位代表不透明度，范围为00~ff。

opacity

opacity的意义是单独调节不透明度，不需要在所有的情况下都繁琐地设置颜色了。 

它的属性值范围为0~1，代表从完全透明到完全不透明。

元素的溢出属性

有时，我们的盒子的范围可能没有元素所占的范围大，比如一篇很长的文章，或者一张很大的图片显示在浏览器的窗口，我们无法看到屏幕外的内容，这时就需要使用到元素的overflow属性了。

overflow的值和对应的处理效果如下：

属性值	效果
visible	默认值  内容不被修剪，呈现在元素框之外
hidden	隐藏  内容被裁剪，并且多余的内容不可见
scroll	卷轴 滚动条  内容会被修剪，浏览器会显示滚动条以便查询其余的内容
auto	如果内容被修剪，显示滚动条

对于后面两个属性，可能还会配合滚动条相关的样式使用。

hidden属性还常常用来处理上边框塌陷和溢出文字省略效果。

所谓上边框塌陷，主要出现在margin-top这一属性中。、

如果两个元素都设置了margin，但是他们之间却没有实际的边框隔开，或者margin-top和margin-bottom之间已经没有其他元素，这时就会出现两个margin部分重合的状况。

比如，我的上半的盒子设置了下外边距5px，下半盒子设置了上外边距5px，由于上边框塌陷，这两个盒子的实际距离将为5px。

元素的滚动条

滚动条的设置使用伪元素来完成，可以设置某个盒子中的滚动条样式，也可以直接写用于全局滚动条（包括浏览器侧边滚动条的显示）。

设置滚动条常见的伪元素以及对应的样式如下:

伪元素	对应样式
::-webkit-scrollbar	滚动条整体部分调节
::-webkit-scrollbar-thumb	滚动条滑块
::-webkit-scrollbar-track	滚动条轨道
::-webkit-scrollbar-button	滚动条两端的按钮
::-webkit-scrollbar-track-piece	内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner	边角，即两个滚动条的交汇处
::-webkit-resizer	两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

居中布局 

盒子水平居中

主要有两种方式：通过外边距调节、通过定位调节。

外边距的调节方式为在需要调节的元素中设置：

margin:0 auto;

 其中垂直方向的距离调节可不为0，自行调节。

通过定位调节时，需要将当前元素设置绝对定位。设置如下：

position:absolute;
left:50%;
margin-left:-x;

其中x的值为元素的水平宽度的一半。

这么做是因为，left调节的是元素左边界到父元素左边界的距离，50%将会导致元素被移动得过多了，所以要通过一个负的左外边距将元素调整回来。

盒子垂直居中

使用外边距方式的时候，需要计算margin-top的值，注意外边框塌陷的问题。

使用定位调节的方法和水平居中的方式相同，只需要将left改为top即可。

盒子中心居中

如果想让盒子在水平和垂直方向同时居中，可以将定位和外边距结合起来使用：

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;

 由于四条边都被设置为了基准的边界，所以auto属性值将会把元素调整到父级盒子的正中心。

网页的部分结构

顶部导航的编写技巧

网页的导航栏中的元素一般有多个，而且通常来说除了内容不同，其余样式包括边距、位置等都可以统一设置。

现在网页设置导航栏元素主要使用的方式为使用无序列表的列表项嵌套导航元素来解决。

在使用无序列表前，不要忘记在通配符中清除ul的标志样式：

* {
    list-style:none;
}

对于列表默认的换行，也要利用左浮动或者右浮动设置列表项水平分布。

不要忘记在设置浮动之后使用下面的盒子清除浮动，使得元素回到文档流中继续占位：

<div class="clear"></div>

这个盒子需要在CSS中设置：

.clear {
    clear:both;
}

轮播图的编写技巧

如果并未进行js的学习，则轮播图暂时使用一张静态的图片代替。

事实上，未来轮播图也就是很多张静态的图片放在一起，只不过动态设置了它们的display属性是否为none。

轮播图的基本结构包含内外两层。内层为版心部分；外层盒子设置100%宽，背景为颜色（购物网站）或者直接就是轮播图。

左右按钮、顶部和底部的按钮相对外层盒子做绝对定位。

预告和回顾

对网页布局和制作感兴趣的朋友，可以看下面的CSS专栏，里面有很多讲解详尽的案例，当前为第七期：

专栏 | CSS入门http://t.csdnimg.cn/4bvCJ

当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——疑似有点缺氧的【H2O2】