CSS(二)

了解完CSS的盒子模型之后，我们就可以更深一步的学习CSS。

---

目录

显示（Display）

​编辑

尺寸

定位（position）

position: static;

position: relative;

position: fixed;

position: absolute;

position: sticky;

重叠元素：

溢出

浮动

​编辑

导航栏

网页布局

头部区域：

菜单导航区域：

内容区域：

底部区域：

---

显示（Display）

  display 属性是用于控制网页布局的重要 CSS 属性。

  它规定元素是否显示，设置为显示后又是以什么样的形式显示在网页中。

每个 HTML 元素都有默认的 display 值，具体取决于元素的类型。

HTML 元素的默认 display 值大多为 block (主要是块元素) 和 inline(主要是行内元素)。

想要了解块级元素与行内元素，请前往HTML 区块。

display属性常用属性值：

• display: none;  — 用于决定是否显示元素
• display: inline; — 将块元素修改为行内元素
• display: block; — 将行内元素修改为块元素
• display: inline-block; — 将元素设置为行内块元素

注意：每个元素都有默认的 display 属性值，当我们修改元素的display 属性值时会覆盖默认属性值，但不会改变元素的种类！

---

尺寸

CSS不仅可以设置文本的大小与颜色，而且还可以设置元素的宽度、高度。

在网页布局过程中，我们可以通过将元素的边框显示出来，再设置元素的大小，最后给元素添加外边距或填充来确定元素的最终位置，达到更好的页面效果。

调整元素尺寸的属性及其描述：

---

定位（position）

在网页设计中，元素有了定位就可以更快更准地调整元素的位置。

元素其实是使用 top、bottom、left 和 right 属性定位的，前提是元素设置了 position 属性，否则，top、bottom、left 和 right 将不起作用。

在CSS中，元素的定位类型主要分为五种：

• static
• relative
• fixed
• absolute
• sticky

position: static;

        HTML 元素默认情况下的定位方式为 static（静态）。

        使用 static(默认)定位的元素根据页面的正常流进行定位，此时的元素不受 top、bottom、left 和 right 属性的影响。

position: relative;

         将position 属性值设置为 relative 的元素相对于其正常位置定位，此时 top、bottom、left 和 right 属性将导致元素偏离其正常位置，以此达到布局的效果。

        偏移前：

        偏移后：

position: fixed;

         将position 属性值设置为 fixed 的元素相对于视口定位，这就意味着就算我们滚动页面，元素位置始终不变，通过top、bottom、left 和 right 属性确定元素在视口中的位置。

        固定定位的实例：红框中的元素就使用了固定定位。

position: absolute;

        将position 属性值设置为 absolute 的元素相对于已经定位的父级元素定位，如果元素已经定位的父级元素，它将相对于HTML文档主体(body)定位，并且随着页面一起滚动。

        

        实例：红色框相当于绿色框定位

position: sticky;

        将position 属性值设置为 sticky 的元素相对于用户的滚动位置定位，粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。

        淘宝官网的搜索框便使用了 sticky 定位：

重叠元素：

        元素在定位时，可以与其他元素重叠。

        z-index 属性决定了元素的堆叠顺序。

        z-index 属性值最大的元素堆在最上面。

---

溢出

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，以确保用户能够看到全部内容。

overflow 的属性值及其描述：

---

浮动

CSS的浮动(Float)会使元素向左或向右移动，其周围的元素也会重新排列。浮动往往用于制作图片廊，在网页布局时一样有用。

float 的属性值：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）(默认值)
• inherit - 元素继承其父级的 float 值

CSS浮动属性：

---

导航栏

对于网页来说，导航栏至关重要。导航栏能够快速跳转到另一个页面或当前页面的某个位置，实用性高，可以提高用户的体验感。

导航栏需要标准 HTML 作为基础。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。

导航栏主要有垂直导航栏和水平导航栏。

使用CSS设置垂直导航栏：

        1.创建一个无序列表，在每一个<li>中放入连接。

        2.每一项之前都会有一个默认的列表项标记。面对默认的列表项标记，我们可以使用list-style-type: none;消除。

        3.使用 margin 和 padding 设置每一项的间隔和填充。

        4.如果希望导航栏在不同状态有不同的效果，可以使用 伪类选择器 设置。

使用CSS设置水平导航栏：

1. 创建一个无序列表，在每一个<li>中放入连接。
2. 使用list-style-type: none;消除默认列表项标记。
3. 使用 float:left; 或 display:inline; 将每一项水平放置。
4. 使用 margin 和 padding 设置每一项的间隔和填充。
5. 如果希望导航栏在不同状态有不同的效果，可以使用 伪类选择器 设置。

---

网页布局

网页布局有很多种方式，一般包含一下部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域：

         头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo。

菜单导航区域：

        菜单导航条包含了一些链接，可以引导用户浏览其他页面。

内容区域：

        内容区域一般有三种形式：

• 移动端

        

• 平板设备

        

• PC端

        

底部区域：

        底部区域在网页的最下方，一般包含版权信息和联系方式等。