css-浮动及页面布局

最新推荐文章于 2023-03-22 18:29:33 发布

Winnie_9727

最新推荐文章于 2023-03-22 18:29:33 发布

阅读量809

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_59950604/article/details/122327162

版权

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

/*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;*/

Winnie_9727

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css-浮动及页面布局

行高作用：让文字垂直居中！/*line-height:300px;*/(等于盒子的高度）/*1、数字+px*//*2、数字+em1em=font-size谷歌浏览器一般默认的文字大小：16px/*line-height:2em;*//*3、百分数百分数*font-size=200%*16px=32px/*line-height:200%;...
复制链接

扫一扫