css-浮动及页面布局

本文主要是介绍css-浮动及页面布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

行高作用：让文字垂直居中！

/*line-height: 300px;*/(等于盒子的高度）

/*1、数字+px*/

/*2、数字+em 1em = font-size

谷歌浏览器一般默认的文字大小：16px

/*line-height: 2em;*/

/*3、百分数

百分数*font-size = 200% * 16px = 32px

/*line-height: 200%;*/

/*4、单纯的数字（倍数）

倍数*font-size = 2 * 16px = 32px;

/*line-height: 2;*/

/* line-height: 300px;

font: italic 700 20px '楷体';*/

font属性连写的完整形态：

font：style weight size/line-height family；

/*font: italic 700 20px/300px '楷体';*/

注意点：

如果需要同时设置font的连写和line-height的属性

1、要么把line-height写在连写的下面

2、要么把line-height写在font连写的里面

margin的合并现象：

当盒子是水平布局的时候：左右的margin会叠加-》两个盒子之间的距离为margin的和

当盒子是垂直布局的时候：上下的margin会合并-》两个盒子之间的距离为两者margin的最大值

解决方法：避免就好

margin的塌陷现象：嵌套的块级元素

互相嵌套的块级元素，如果此时给子元素设置margin-top，此时父元素会一起往下移动！

解决方法：

1、给父元素设置一个border-top

(相当于给老父亲添加一块钢板)

2、给父元素设置一个padding-top

(相当于给老父亲添加一层泡沫)

3、给父盒子设置一个overflow：hidden =》触发了父盒子的BFC（块级格式化上下文） =》相当于变成了一个铁盒子！！

4、设置 float：left

5、转换inline-block

.father {
      width: 400px;
      height: 400px;
      background-color: pink;

      border-top: 1px solid #000;
      padding-top: 1px;
      overflow: hidden;
      float: left;
      display: inline-block;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 100px;
    }

浮动：让原来垂直布局的盒子变成水平布局（一个在左，一个在右）

代码：

1、float：left 左浮动

2、float：right 右浮动

 .red {
      background-color: red;
 
      float: left;
    }
    .green {
      background-color: green;
      float: right;
    }

标准流：浏览器默认摆放盒子的顺序（从上往下、从左往右）

浮动的特点:

1、浮动的元素会脱离标准流（脱标）

-》相当于飘起来了

-》在标准流中不占位置了！！！

2、浮动之后的元素会覆盖在标准流中的元素之上（覆盖）

浮动之后的元素比标准流中的元素高出半个级别

3、浮动找浮动，不浮动找不浮动（浮找浮）

4、浮动之后的元素只能影响下面的元素（浮动之后只影后）

浮动之后的元素受到边界的影响

5、浮动之后的元素有特殊的显示效果（一行多个，可设置宽高）

1、一行可以显示多个

2、可以设置宽高（如a标签）

类似于是行内块元素的显示方式！！

注意：不要把浮动之后的元素当做是行内块元素来使用！！

页面布局练习：

* {
      margin: 0;
      padding: 0;
    }

    .top {
      /*width: */
      height: 80px;
      background-color: pink;
    }

    .nav {
      /*width: 1000px;*/
      height: 80px;
      background-color: orange;
      /*margin: 0 auto;*/
    }
    .banner {
      width: 1000px;
      height: 600px;
      background-color: yellow;
      /*margin:  0 auto;*/
    }
    .banner .left {
      width: 400px;
      height: 600px;
      background-color: red;
      float: left;
    }
    .banner .right {
      width: 600px;
      height: 600px;
      background-color: green;
      float: right;
    }
    
    /*把宽度固定并且水平居中的代码抽取出一个类*/
    .w {
      width: 1000px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="top"></div>
  <div class="nav w"></div>
  <div class="banner w">
    <div class="left"></div>
    <div class="right"></div>
  </div>

seo页面导航：

/*1、清除默认的margin和padding*/
    * {
      margin: 0;
      padding: 0;
    }
    /*2、找到ul，去除小圆点*/
    ul {
      list-style: none;
    }
    /*3、给li标签设置float：left  让li标签在一行中显示*/
    ul li {
      float: left;
    }
    /*4、给a标签设置宽高*/
    ul li a {
      width: 80px;
      height: 60px;
      background-color: pink;
      /*要给a标签设置宽高*/
      /* display: inline-block; */
      /*display: block;*/
      float: left;

     text-decoration: none;
      text-align: center;
      line-height: 60px;
      color: #fff;
    }

    ul li a:hover {
      background-color: green;
    }

    .red {
      width: 1000px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <!-- ul>li*8>a[#]{新闻$} -->
  <ul>
    <li><a href="#">新闻1</a></li>
    <li><a href="#">新闻2</a></li>
    <li><a href="#">新闻3</a></li>
    <li><a href="#">新闻4</a></li>
    <li><a href="#">新闻5</a></li>
    <li><a href="#">新闻6</a></li>
    <li><a href="#">新闻7</a></li>
    <li><a href="#">新闻8</a></li>
  </ul>

  <div class="red"></div>

清楚浮动：清除浮动带来的影响

影响：当父元素没有设置高度，此时由子元素撑开的！！！

如果此时子元素浮动了（相当于飘起来了-》在标准流中不占位置），此时不能把父元素撑开！

如何清除浮动：

1、额外标签法 ( 最后块级 )

1、在父元素里面的最后的添加一个块级元素

2、给添加的块级元素设置清除浮动的核心代码clear:both;

缺点：需要添加额外的标签，会让页面的结构变得很复杂！！！

2、直接给父元素设置overflow:hidden;

3、伪元素清除法

伪元素：其实就是由css设置的元素

::before 在...之前

::after 在...之后

::的写法是css3所规定的

伪元素 ::

伪类选择器 :hover

在css3之前的伪元素的写法 :after

如果要让css3之前的浏览器上显示伪元素，应该写几个:????

:after

本质上和额外标签法是一样！！！

伪元素默认是行内元素！！！

4、简单粗暴的方法：直接给父元素设置高度！！！

.clearfix::after {
        /*必加的属性：content*/
        content: '';
        /*转换为块级元素*/
        display: block;
        /*清除浮动的核心代码*/
        clear: both;

        /*其实有上面三个属性已经可以生效了，但是可能在开发的时候，会有额外的几个属性！！*/
        /*目的：在页面中看不到伪元素*/
        height: 0;
        line-height: 0;
        visibility: hidden;
      }

      .clear {
        clear: both;
      }


    .red {
      width: 600px;
      height: 600px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <!-- <div class="clear"></div> -->
  </div>
  <!-- <div class="red"></div> -->
</body>

浮动最开始的作用：图文环绕

现在：页面的布局（让原来垂直布局的盒子变成水平布局）

img {
      float: left;
    }

网页头部案例：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .top {
      width: 760px;
      height: 150px;
      background: url(images/banner_bg.jpg);
    }
    ul {
      list-style: none;
      background: url(images/button1_bg.jpg);
      width: 760px;
    }
    ul li {
      float: left;
    }
    ul li a {
      width: 80px;
      height: 32px;
      background-color: pink;
      float: left;
      text-decoration: none;
      text-align: center;
      line-height: 32px;
      color: red;
      font-size: 12px;
      background: url(images/button1.jpg);
    }
    ul li a:hover {
      background: url(images/button2.jpg);
    }

    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="top">
    <img src="images/banner1.jpg" alt="">
  </div>
  <ul class="clearfix">
    <li><a href="#">导航</a></li>
    <li><a href="#">导航</a></li>
    <li><a href="#">导航</a></li>
    <li><a href="#">导航</a></li>
  </ul>
</body>

行内元素内外边距失效的情况：

先分析：margin

左右的margin：能生效的！！！

上下的margin：是失效的！！没有作用的！！！

分析padding：

左右的padding：能生效的！！

上下的padding：是失效的！！下padding看起来有效果，但是其实没有作用的！！！！

* {
      margin: 0;
      padding: 0;
    }
    span {
      background-color: red;
      /*margin-bottom: 100px;*/
      padding-bottom: 100px;
    }

浮动之后的元素是在父元素的content中：

 .father {
      width: 400px;
      height: 400px;
      background-color: pink;
      border: 1px solid #000;
      padding: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      float: right;
    }


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

overflow:设置内容溢出部分的显示效果

取值：

1、visible：溢出部分可见！！！

2、hidden：溢出部分隐藏（内容！！！！！）

3、scroll：显示滚动条（无论内容有多少，都会显示滚动条）

4、auto：自动根据内容的多少，显示或者隐藏滚动条

 overflow: auto;

 <div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>

css三种隐藏方式：

1、overflow：hidden：让超出部分的内容隐藏

2、visibility: hidden 让元素本身隐藏（看不见）！！-》仍然是占位置！！！

3、display：none；让元素本身隐藏（看不到！！）-》不占位置！！！

/*overflow: hidden;*/

/*visibility: hidden;*/

这篇关于css-浮动及页面布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS教程

css-浮动及页面布局

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯