PHP全栈开发(八):CSS Ⅸ dispaly & visibility
display用来设置一个元素如何显示;
visibility用来设置一个元素可见还是隐藏。
visibility:hidden;
这个语句会使元素在HTML页面中不可见。但是这个元素仍然会占用HTML页面的位置。
display:none;
这个语句同样的会使元素在HTML页面中不可见,而且不可见的同时,不会占用HTML页面的位置。
我们都知道,在如今的HTML页面中,列表元素被大量的当做导航来使用。
但是列表元素一般是纵向排列的,而导航栏大多时候我们看到的是横向排列的。
那么我们如何做到让列表元素横向排列呢?
这也是一个困惑了我很久的问题。如今终于找到答案了。
那就是使用display:inline;语句来让列表元素横向排列。
这是什么原因呢,因为列表元素是典型的块元素,什么是块元素呢。
我们常见的,h1,p,div等都是块元素,块元素的显著特征就是,它的前后都是换行符。
那么与块元素相反的就是内联元素,内联元素是不强制换行的
例如说a,span等都是典型的内联元素。
而我们的display:inline;语句就很巧妙的将块元素变换成了内联元素。
说那么多,大白话就是让它不自动换行而已。
那么display:inline;这个语句的对立语句是什么呢
就是dispaly:block;就是把内联元素变换为块元素。加了一个换行