##CSS复习##②_如何使nav下的按钮居左对齐-优快云博客

本文链接：https://blog.youkuaiyun.com/XBT1118/article/details/98534506

CSS Display显示

CSS布局 - display属性

display属性是CSS中用来控制布局的重要属性。其决定元素如何来显示。该属性有如下4中常用的取值，当然肯定不只这4种：

none - 当取值为none，等于让该元素完全消失（不会占据网页空间）
inline - 定义一个行内元素，且该元素的width属性和height属性不会起任何作用
block - 定义一个块级元素，该元素首末都会另起一行，该元素会占据整行宽度
inline-block - 定义一个行内块级元素，类似行内元素，但该元素的width和height是可以设置的

CSS Max-width

CSS布局 - 善用max-width

大多容器类型的HTML元素都是块级元素（Block），譬如最常用的div元素。这些元素本身就是会占据整行宽度。在部分场景下，如果使用max-width来取代width的功效，会使网页的自适应能力更强。配上使用margin:auto;会更加美观。

这些都是已经学过的，这里说的只是一些处理技巧，如下例所示：

div.ex1 {
    width:360px;
    margin: auto;
    border: 3px solid #46acb6;
}

div.ex2 {
    max-width:360px;
    margin: auto;
    border: 3px solid #46acb6;
}

CSS Position定位

CSS中的position属性是用来定义元素的定位方式（ static / relative / fixed / absolute / sticky ）。

Position 属性

position属性可定义元素的定位方式，该属性有5种取值，如下：

static
relative
fixed
absolute
sticky

position: static

HTML元素在默认情况下的定位属性的取值都是static这个值。

当position属性取值static时，left/right/top/bottom这些属性不会被支持的，设置了也白搭，static定位时不会考虑这些的。

static定位时，该元素不会有啥特殊的功效，根据页面的正常布局方式。

这是一个div元素，其设置了position: static;

如下例所示：

div.static {
    position: static;
    border: 3px solid #46acb6;
}

position: relative

当position属性取值relative时，则意味其定位方式是相对定位，相对于普通定位（static定位的原有位置）而言，此时left/right/top/bottom属性就会生效，如下所示：

这是一个div元素，其设置了position: relative;

源码如下所示：

div.relative {
    position: relative;
    left: 72px;
    border: 3px solid #46acb6;
}

position: fixed

当position属性取值fixed时，则意味其定位方式是相对于视窗（viewport）的绝对定位（视窗就是浏览器窗口），此时left/right/top/bottom属性就会生效，如下所示：

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #46acb6;
}

一些运营商的狗B黑产，还有一些以杀毒安全的名义暗地扶持流氓插件的浏览器，进行dns劫持后，在页面右下角弹出300*250px大小的垃圾广告的元素定位方式就是fixed；呵呵 ——_——|||

position: absolute

当元素positions属性取值为absolute时，即绝对定位。所谓绝对定位，类似fixed定位，但相对的不是视窗，而是相对于离该元素最近的已定位元素（只要不是static定位的都可以）。

这个div元素设置了position: relative;

这个div元素设置了position: absolute;

案例源码如下：

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #46acb6;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #46acb6;
}

position: sticky

当元素positions属性取值为sticky时，则会根据滚动条的位置，来切换relative和fixed的效果。

CSS Overflow

CSS布局 - Overflow

CSS中的overflow属性控制是用来定义内容太大超出范围的处理方式。其取值范围如下：

visible - 这是默认取值。超出部分不会被裁剪，而是直接超出元素本身的范围。
hidden - 超出部分会被裁剪掉，汝不会再看到超出的部分。
scroll - 超出部分会隐藏，但是可以通过滑动滚动条来浏览超出部分内容。（会强制显示滚动条）
auto - 超出部分会隐藏，但可以通过滚动来浏览超出部分内容。（类似scroll，但更雅观，当需要滚动的时候才会出现滚动条）

重要提示：overflow属性只针对有特定高度的块级元素（block）才会有效。

overflow-x 和 overflow-y

如果只想单独设置水平方向或垂直方向上的overflow属性，那使用overflow-x和overflow-y即可。

overflow-x - 只设置水平方向上的overflow属性
overflow-y - 只设置竖直方向上的overflow属性

div {
    overflow-x: hidden; /* 隐藏水平方向上滚动条 */
    overflow-y: scroll; /* 添加垂直方向上滚动条 */
}

CSS Float浮动

CSS中float属性定义一个元素的浮动方式。 CSS中clear属性定义指定元素的哪一侧不允许其他浮动元素。

float属性

CSS中的float属性定义一个元素的浮动方式；其取值如下：

left - 使元素向左浮动
right - 使元素向右浮动
none - 不对元素设置浮动（默认）

Clear属性

CSS中的clear属性定义指定元素的哪一侧不允许其他浮动元素。该属性取值如下：

none - 这是默认取值，左右两侧都允许浮动元素的存在；
left - 元素左侧不允许浮动元素的存在；
right - 元素右侧不允许浮动元素的存在；
both - 元素左右两侧都不允许浮动元素的存在。

clear属性最多的应用场景是，在连续使用完浮动元素后，想重新回到使用非浮动元素的状态下，随意搞个空的元素，设置其clear属性为both即可。

浮动元素超出容器范围咋办呢？

经常会遇到浮动元素超出容器范围，那该怎么办呢？很简单，把外部容器设置上overflow:auto;就ok啦~（不过这不是最佳的方法，不过可以先试试）

利用float来实现各种布局

实现布局的方式很多，但万变不离其宗，贫道最推荐利用float的方式进行布局，除了上述的那些细节，还注意一下box-sizing属性使用border-box取值。

CSS Inline-block

利用inline-block去实现导航条

.nav li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
}

div {
    resize: both;
    overflow: auto;
    border: 1px dotted Tomato;
    padding-bottom: 81px;
}
</style>
</head>
<body>

<div>
<h2>横向导航条</h2>
<ul class="nav">
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#mails">邮箱</a></li>
<li><a href="#games">游戏</a></li>
</ul>
<p>亲，可以拖拽改变大小试试看~</p>
</div>

CSS Align对齐

margin:auto

以前说过的，如果想是让一个块级元素（block）在水平方向上居中，可以使用margin:auto来搞定这事情。如下例所示：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid #46acb6;
    padding: 10px;
}

提示：1.margin:auto要用在block类型元素，比如div元素；2.该元素必须设置特定的宽度。

text-align:center 文本居中

如果想使一段文本居中对齐，那就使用text-align:center即可。

使一张图片居中

是一张图片在block元素中居中对齐的方式就是把这张图片设置上display:block;，然后套用margin:auto的方法就ok了~

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

通过position属性实现左右对齐

通过position属性也可以实现元素的左对齐和右对齐。对目标元素设置position: absolute;即可，但是这种方式会使该元素脱离正常的页面元素排布序列，而覆盖其他元素，因此除非特殊需求，一般不推荐这种方式

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #46acb6;
    padding: 10px;
}

通过float属性实现左右对齐

通过float属性也可以实现元素的左对齐和右对齐。

.right {
    float: right;
    width: 300px;
    border: 3px solid #46acb6;
    padding: 10px;
}

垂直方向上的居中 - 使用padding内边距

水平方向上的文本居中可以使用text-align属性搞定，而垂直方向上，这里可以用padding来实现一下。

.center {
    padding: 70px 0;
    border: 3px solid #46acb6;
    text-align: center;
}

垂直方向上的居中 - 使用line-height行高

如果外部容器元素的高度是一个确定的数值单位，则这时使用line-height属性是更明智的选择。使外部元素的line-height属性等于height属性的值即可。

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid #46acb6;
    text-align: center;
}

/* 如果段落不只一行，下面的设置就起作用了 */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

垂直方向上的居中 - 使用position和transform

当padding和line-height的方法都不适用的时候，可用如下第三种方式来实现，即使用position和transform属性。

CSS 透明度

定义透明的图片

opacity属性可定义元素的透明度，该属性的取值范围是0.0~1.0；取值越低，透明度越低；越高则透明度越高；当为0.0的时候，等于完全透明看不见；当为1.0时，完全不透明，跟没设置了该属性一样。

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* 兼容IE8以及更老的版本 */
}

透明的div元素 - 使用opacity属性

opacity属性不仅适用于img元素，也适合于div等绝大部分元素。

div {
    opacity: 0.3;
    filter: alpha(opacity=30); /* 兼容IE8以及更老的版本 */
}

透明背景的div元素 - 使用rgba来定义背景色

使用opacity属性设置div元素的透明度，会使整个元素变成完全透明；如果仅仅是想把div元素的背景变成透明的，那就可以使用rgba来设置透明的背景色。

div {
    background: rgba(212, 216, 84, 0.3); 
}

CSS 导航条

垂直导航条

为了实现垂直导航条（纵向导航栏），可以把<a>放在列表项li内，而且来修改个列表项的背景色：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px;
    background-color: #eef8f8;
}

上例解析：

display: block使该li元素变成一个块级元素，如此，整个li元素会变得都可以点击了（刚才是只可以点击超链接的文字部分）；不仅如此，而且因为是块级元素（Block），所以可以自由设置高度、宽度、内边距、外边距了；
width: 60px;定义列表项li的宽度；
background-color: #eef8f8即自定义设置了列表项li的背景色。

其实，汝也可以不设置a元素的宽度而去设置无序列表的宽度，因为a元素被定义成了block块级元素，而块级元素的默认特性就是会占据整行宽度。故而这种方式也是等效的。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
}

li a {
    display: block;
    background-color: #eef8f8;

进一步优化垂直导航条

设置鼠标悬浮在列表项上时的CSS样式

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #eef8f8;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* 鼠标悬浮时的样式 */
li a:hover {
    background-color: #555;
    color: white;
}

把垂直导航条固定到侧栏来试试。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling */

水平导航条

实现水平导航条有两种思路，即inline和float两种思路。

inline思路

将列表项元素的display属性设置成inline，如此，列表项就不会换行了，从而实现水平导航条，如下所示：

li {
    display: inline;
}

CSS 下拉菜单

下拉菜单按钮

类似上一个案例，而不同的是下拉框中是一组菜单按钮。

<style>
.dropbtn {
    background-color: #46acb6;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #eef8f8;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #46acb6;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #2c7177;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单按钮</button>
  <div class="dropdown-content">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

在导航条中添加下拉菜单按钮

下拉菜单按钮经常被应用在导航条中，从而更直观地展示网站的层次与逻辑，也方便了用户的快捷访问。

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #46acb6;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">游戏</a>
    <div class="dropdown-content">
      <a href="#">吃鸡</a>
      <a href="#">吃鸭</a>
      <a href="#">吃鹅</a>
    </div>
  </li>
</ul>

CSS 表单

设置input元素的样式

关于input元素的选择器倒是花样不少，如下所示：

input[type=text] - 只选择type属性为text的input元素
input[type=password] - 只选择type属性为password的input元素
input[type=number] - 只选择type属性为number的input元素

源码如下：

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #46acb6;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #eef8f8;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
</style>
</head>
<body>

<p><b>自适应表单：</b>试着去改变一下浏览器的大小来看看表单的变化吧~</p>

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

</body>
</html>