浮动，定位，伪类&伪元素

前言

在学习网页设计中，如何为网页布局是制作网页的基本技能，通过学习HTML标签，可以知道常用div标签作为布局工具。（当然，除了div还有其他标签也可以使用）不过，如何在一个页面中放置div，则是网页布局的基本内容。传统的网页布局方式有3种：普通流，浮动，定位。以下将会分别对3种方式做出解释。
伪类：

一、普通流

普通流，即按照规定的默认方式排列。如块级元素独占一行，行内元素则不会，按照从左到右的顺序排列。普通流是最基本的布局方式，一般用于布置网页的大体框架。

二、浮动

一 、什么是浮动

在普通流的标准下，块级元素只能独占一行，而实际开发中往往需要多个块级元素并行排列，通过浮动布局，就可以将某个块级元素脱离原来的位置，使其可以浮动在页面上，重新定位，达到并行排列的效果。实际上，浮动经常与标准流父元素搭配来完成布局，即标准流用于设置父元素的位置，浮动用于设置子元素的位置。

属性值	描述
none	不浮动
left	向左浮动
right	向右浮动

语法 选择器 {float:属性值; }

二、浮动的特性

一般浮动具有三大特性：
1.浮动元素会脱离标准流（脱标）

元素设置浮动后，顾名思义，将会从原来的位置脱离出来，变得可以自由设定位置，举个例子，给两个盒子设置左浮动，结果是原先并列的两个盒子并排在一起了。

<style>
        div {
            height: 300px;
            width: 300px;
            background-color: blueviolet;
            float: left;
            margin-left: 10px;
        }
    </style>

 <div>
        浮动1
    </div>
    <div>
        浮动2
    </div>

并且，浮动的元素原先的位置将不再保留， 即如果其下方还有块级元素，此块级元素将会占领这个位置，会出现类似层叠的现象。如果有多个块级元素，只有一个浮动，例如中间的某个块级元素浮动，那么它不会影响其上方的元素，其下方的块级元素将会占据这个元素的位置。

 <style>
        #box1 {
            height: 300px;
            width: 300px;
            background-color: blueviolet;
            float: left;
            /* margin-left: 10px; */
        }

        #box2 {
            height: 200px;
            width: 400px;
            background-color: chocolate;
        }
    </style>

 <div id="box1">
        浮动1
    </div>
    <div id="box2">
        浮动2
    </div>

2.浮动的元素将在一行显示，并且对齐顶部

当多个块级元素设定了浮动，则它们会在一行内并排显示。如果块级元素过多，一行装不下这么多块级元素，则多出的块级元素将会移向下一行。因为浮动的块级元素实现上对齐，所以未设置margin时，下移的元素将会和上一行的元素连在一起。

<style>
      div {
            height: 300px;
            width: 300px;
            background-color: rgb(187, 115, 63);
            float: left;
            margin: 10px 10px;
        }
    </style>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>

3.浮动的元素具有行内块元素的特性
不管是行内元素还是块级元素，设置浮动后，都会有行内块元素的特性。
如下：

<style>

      span {
            height: 200px;
            width: 200px;
            background-color: chocolate;
            float: left;
            margin-left: 5px;
        } 
</style>

    <span>1</span>
    <span>2</span>

三、清除浮动

在很多情况下，父级盒子不方便给定高度，而浮动的块级元素不占空间，直接不给父盒子高度，会使其高度为0，进而影响下面的标准流盒子。清除浮动则可以清除浮动带来的影响，此后，父级就会根据浮动的盒子检测高度，所以就不会影响下面的盒子了。

语法

选择器{clear: 属性值;}

属性值	描述
left	清除左侧浮动
right	清除右侧浮动
both	清除两侧浮动

方式

1.额外标签法

额外标签法是在浮动元素末尾添加一个空标签，（空标签必需为块级元素）加上clear属性。

 <style>
        .bigbox {
            width: 900px;
            border: 1px solid grey;
            margin: 0 auto;
        }

        .box1 {
            height: 300px;
            width: 300px;
            background-color: rgb(187, 115, 63);
            float: left;
            margin: 10px 10px;
        }

        .box2 {
            height: 300px;
            width: 200px;
            background-color: rgb(187, 115, 63);
            float: left;
            margin: 10px 10px;
        }

        .footer {
            height: 300px;
            width: 900px;
            background-color: hotpink;
        }

        .clear {
            clear: both;
        }
    </style>

 <div class="bigbox">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="clear"></div>
  </div>
 
  <div class="footer">3</div>

注意额外的标签应直接加在浮动的盒子末尾，而不是父盒子后面，这样写虽然可以使下面的盒子不受影响，但该父级盒子不会有高度

2.父级添加overflow属性

给父元素添加overflow属性，其属性值可以是hidden,quto,scroll。

<style>
             .bigbox {
            width: 900px;
            border: 1px solid grey;
            margin: 0 auto;
            overflow: hidden;
        }
</style>

 <div class="bigbox">
    <div class="box1">1</div>
    <div class="box2">2</div>
  </div>
 
  <div class="footer">3</div>

overflow属性代码简洁，但是使用它无法显示溢出的部分，即溢出的部分将会被切去，无法看见。

3.after伪元素

给父元素添加:after标签，在父盒子内部的末尾额外添加一个盒子，和额外标签法类似。

<style>
           .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        //IE6、7专有
        .cleaarfix {
            zoom: 1;
        }
</style>

  <div class="bigbox clearfix">
    <div class="box1">1</div>
    <div class="box2">2</div>
  </div>
 
  <div class="footer">3</div>

4.双伪元素

给父元素添加:before、:after 两个伪元素，在其内部两边各添加一个盒子。

<style>
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .cleaarfix {
            zoom: 1;
        }
</style>

  <div class="bigbox clearfix">
    <div class="box1">1</div>
    <div class="box2">2</div>
  </div>
 
  <div class="footer">3</div>

定位

一、什么是定位

通过定位属性可以设置一些固定的位置，不会随着页面的滑动而改变位置。定位（position）有四个属性值：absolute/relative/fixed/static(绝对/相对/固定/静态)

语法

  position : 定位模式+边偏移

定位模式	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移
top	距离父元素上边线的距离
bottom	距离父元素下边线的距离
left	距离父元素左边线的距离
right	距离父元素右边线的距离

二、静态定位static

静态定位是元素默认的定位方式，即没有定位。

语法 {position: static;}

三、相对定位relative

相对定位是指元素是相对于其原来的位置移动的。

        .box1 {
            position: relative;
            top:100px;
            left:200px;
            height: 300px;
            width: 300px;
            background-color: rgb(206, 90, 196);
            /* float: left; */
            margin: 10px 10px;
        }

    <div class="box1">1</div>
    <div class="box2">2</div>

注意元素相对定位后，将继续保留原来的位置。

四、绝对定位absolute

绝对定位是指元素在移动时，是相对于其祖先元素来进行的。

<style>
        .son {
            height: 300px;
            width: 300px;
            background-color: aqua;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }

        .father {
            position: relative;
            height: 500px;
            width: 600px;
            border: 1px solid black;
        }

</style>

   <div class="father">
   <div class="son">3</div>

当祖元素没有定位时，则子元素以浏览器为定位标准。如果祖先元素有定位，则以最近的一级有定位的元素为定位参考点。

绝对定位不再占有原先的位置，例如：

<style>
        .son {
            height: 300px;
            width: 300px;
            background-color: aqua;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }

        .father {
            position: relative;
            height: 600px;
            width: 600px;
            border: 1px solid black;
        }

        .brother {
              height: 100px;
              width: 100px;
               background-color: blue;
        }
</style>

   <div class="father">
    <div class="son">3</div>
    <div class="brother">4</div>
   </div>

由于绝对定位的特性，使得它常与相对定位一起使用，即子绝父相。

五、固定定位

固定定位可以使元素固定于页面的某一位置，例如：在滚动浏览百度百科时，它的侧栏不会随页面的滚动而改变位置。

语法

选择器 {position: fixed; }

固定定位不占用原来的位置

六、粘性定位（了解）

粘性定位被认为是相对定位和绝对定位的混合。以导航栏为例，当导航栏的上边界与浏览器上边界相连时，导航栏就会与其上边界连在一起，不随页面的滚动而变化，这就是粘性定位的作用。虽然粘性定位的性能不错，但目前该属性使用并不广泛。

语法 {position: sticky; top: 10px; }

        div {
            position: sticky;
            top: 0px;
            height: 50px;
            width: 700px;
            background-color: blueviolet;
            margin: 100px auto;
        }

在使用sticky属性时，必需添加top、left、right、bottom其中一个才有效，，且粘性定位不占用原来的位置。

七、定位拓展

1.定位叠放顺序

在页面布局时，常出现盒子重叠的情况，此时就需要明确盒子的叠放顺序，通过z-index可以实现盒子的先后排序。

选择器  {z-index: 数值;}

数值可以是整数，复数，0，auto（默认值），数值大小确定了盒子的优先顺序，数值越大，盒子就越在上层。==当数值都相同时，则按照书写的先后顺序，后写的写在上方。==例如：

<style>
        div {
            position: absolute;
            top: 0px;
            height: 50px;
            width: 700px;
            margin: 0px auto;
        }

       #one {
            background-color: blueviolet;
            /* z-index: 1; */
        }

        #two {
            background-color: rgb(85, 47, 47);
            /* z-index: -1; */
        }

        #three {
            background-color: chartreuse;
            /* z-index: 3; */
        }

        #four {
            background-color: cornflowerblue;
            /* z-index: 2; */
        }
</style>

        <div id="one">1</div>
        <div id="two">2</div>
        <div id="three">3</div>
        <div id="four">4</div>

原来绿色的导航栏变成了蓝色。

2.绝对定位的盒子如何居中

盒子在实行绝对定位后，再采用margin:0 auto的方法在页面居中是无效的，所以这时需要采用另外的方法。

<style>
        div {
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 0px;
            height: 300px;
            width: 300px;
            background-color: blueviolet;
        }
</style>

       <div id="one">1</div>

首先通过left：%50使盒子左移到页面正左边，然后再通过margin：-（盒子的宽度的一半）px使盒子向左移动自身宽度的一半，这样，盒子就布局在了页面中间。

3.定位特殊性

行内元素添加绝对或固定定位，可以直接设置高度和宽度

块级元素添加绝对或固定定位，不给宽高，默认大小是内容大小

伪元素&伪类

一、伪类

伪类是选择器的一种，用于选择处于特定状态的元素，其开头为冒号。
下面举几个例子

1.:first-child

可以修饰一组兄弟元素中的第一个元素，例如：

    <style>
        ul li:first-child {
            color: crimson;
        }
    </style>

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

结果只有每个列表的第一行文字为红色。

2.:after-child

可以修饰父元素的最后一个子元素，例如：

    <style>
        ul li:last-child {
            color: rgb(109, 111, 199);
            background-color: rgb(231, 181, 73);
        }
    </style>

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

3.:only-child

可以修饰没有兄弟元素的元素，例如：

    <style>
        div :only-child {
            color: darkmagenta;
            font-size: 8px;
        }
    </style>

        <div>
            <p>I am a lonely only child.</p>
          </div>
        
          <div>
            <p>I have siblings.</p><br>
            <p>So do I!</p><br>
            <span>I also have siblings, <span>but this is an only child.</span></span>
          </div>

4.:invalid

可以用于修饰未通过验证的input或其他form元素，常用于显示用户的输入错误，例如：

    <style>
        input:invalid {
            background-color: #eebebe;
        }

        form:invalid {
            border: 5px solid #ffdddd;
        }

    </style>

   <form>
        <label for="url_input">Enter a URL:</label>
        <input type="url" id="url_input" />
    </form>

二、伪元素

伪元素和伪类相似，但伪元素更像是向文本中加入了修饰元素，以双冒号开头：：
一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

1.::after & ::before

::after 和 ::before伪元素常和conten属性来一起修饰文本，可以通过使用这两个伪元素给文本添加图标，使文章更生动。::before可在元素前方添加修饰，::after可在元素后方添加修饰，例如：

   <style>
        p::before {
            content: "«";
        }

        p::after {
            content: "»";
        }
    </style>

   <p>Look at this orange box.</p>
    <p>Look at this orange box.</p>

其中，content可以为任何图片或文字

2.::first-inline

可以修饰包含此伪元素的元素的第一行，例如：

    <style>
        p::first-line {
            font-size: 20px;
        }
    </style>

<p>Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
    </p>

::first-line 伪元素只能在块容器中起作用，在其他类型中无效

3.::first-letter

可以修饰第一行的第一个字母，例如：

    <style>
        p::first-letter {
            font-size: 200%;

        }
        p {
            text-indent: 2em;
        }
    </style>

    <p>Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
        Look at this orange box.Look at this orange box.
    </p>

::first-letter伪元素也只能在块容器中起作用

总结

本次博客写了页面布局的三种方法——普通流、定位、浮动，还有伪类和伪元素，内容较多，还需要多加巩固。对于网页布局，大体方法已经知道，还有许多小的细节需要注意，伪类和伪元素仍有许多需要学习。总之，小白还是小白，@#@，还需要继续努力~~~~