阶段性总结（CSS）四

最新推荐文章于 2024-09-05 23:48:57 发布

小李不吃糖0

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量52

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/m0_50911050/article/details/126923402

版权

1.浮动

1.1传统网页布局的三种方式

标准流：是指标签在不借助任何特殊的css排列规则元素的排布规则
浮动：通过浮动的方式使得元素脱离标准流控制，灵活调整位置
定位：通过添加定位使得元素脱标，位置更加灵活

1.2浮动的语法格式

 div{
            float:left;
            /* 设置float属性,可以控制元素左浮动或右浮动,属性值：none/left/right */
        }

1.3浮动的特性

浮动元素会脱离标准流，不再保留原来的位置
浮动的元素会在一行内显示，并元素顶部对齐，且浮动元素之间互相贴靠
浮动的元素会具有行内块元素的特性
浮动元素的默认宽度与内容相关
设置浮动以后元素会向父元素的左侧或右侧移动，直到触碰边界
浮动元素为文字环绕提供支持，为元素设置浮动，文字会自动环绕在浮动元素的周围

<style>

        .father{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .son{
            float: right;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>


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

如图所示即实现了元素脱离标准流控制的右浮动效果，不会脱离父元素的边界。

2.清除浮动

当我们的父盒子高度不固定，会随着其内部元素的增多而动态变化时，内部脱标的浮动元素不占据实际的位置，因此父盒子的高度会被认作是0。当父盒子后方有新的内容出现时，新的内容会占据父盒子原本应在的位置。这时候我们就需要清除浮动的影响。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            margin:0 auto;
            width: 1200px;
            background-color: skyblue;
        }
        .son{
            margin-left: 50px;
            float: right;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .container{
        
            width: 1200px;
            margin: 0 auto;
            height: 300px;
            background-color: yellow;
        }
    </style>
<body>
    <div class="father">
        <div class="son"></div>
        /*div.son*10 布置若干个内容*/
    </div>
    <div class="container">
        后续内容
    </div>

解决方法：

1).在需要清除浮动的元素后面加上一个空的块级盒子，并设置属性clear:both;

2).给父元素添加 overflow:hidden;

3).给父元素添加after伪元素

4).双伪元素法，为父元素添加before,after伪元素

        /* 双伪元素清除浮动 */
.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}.clearfix:after {
 clear:both; }.clearfix {
 *zoom:1;
}

/* 单伪元素 */
.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

3.CSS属性书写顺序

为了使我们的代码具有更高的可读性，提升代码质量和写作风格，在书写元素属性时，尽量按照一定顺序书写。

1).布局定位属性：display/position/float/clear/overflow

2).自身属性:width/height/margin/padding/border/background

3).文本属性:color/font/text-decoration/text-align/vertical-align

4).其他属性：content/cursor/border-radius/box-shadow/background-color

4.导航栏实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .nav a{
                display:inline-block;
                width: 120px;
                height: 58px;
                font-size: 20px;
                background-color: pink;
                text-decoration: none;
                line-height: 58px;
                text-align: center;
                color :white;

          }
          .nav .bg1 {
            background: url(images/bg1.png) no-repeat; 
          }
          .nav .bg2 {
            background: url(images/bg2.png) no-repeat; 
          }
          .nav .bg3 {
            background: url(images/bg3.png) no-repeat; 
          }
          .nav .bg4 {
            background: url(images/bg4.png) no-repeat; 
          }
          .nav .bg5 {
            background: url(images/bg5.png) no-repeat; 
          }
          .nav .bg1:hover {
            background: url(images/bg11.png) no-repeat; 
          }
          .nav .bg2:hover {
            background: url(images/bg22.png) no-repeat; 
          }
          .nav .bg3:hover {
            background: url(images/bg1.png) no-repeat; 
          }
          .nav .bg4:hover {
            background: url(images/bg2.png) no-repeat; 
          }
          .nav .bg5:hover {
            background: url(images/bg3.png) no-repeat; 
          }
          ul li{
            float: left;
          }
          ul{
            list-style: none;
          }
    </style>
</head>
<body>
    <div class="nav">
      <ul>
        <li> <a href="#" class="bg1">五彩导航</a></li>
        <li> <a href="#" class="bg2">五彩导航</a></li>
        <li> <a href="#" class="bg3">五彩导航</a></li>
        <li> <a href="#" class="bg4">五彩导航</a></li>
        <li> <a href="#" class="bg5">五彩导航</a></li>
      </ul>
    </div>
</body>
</html>

Tips: