CSS篇.day02-盒子模型, 浮动,定位

Mteee.

已于 2022-12-30 16:13:27 修改

阅读量435

点赞数 4

分类专栏： Web--- 文章标签： css html 前端

于 2022-12-15 21:58:32 首次发布

本文链接：https://blog.csdn.net/qq_54379580/article/details/128335705

版权

Web--- 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一.盒子模型

  <style type="text/css">
    div{
      margin: 20px;   /* 外边距  */
      padding: 20px;  /* 内边距  */
      width: 150px;  /* 宽(内容) */
      height: 150px; /* 高(内容) */
      border: 20px solid rgb(215, 184, 244); /* 边框  */
      background-color: rgb(250, 204, 204);
    }
    /* 盒子模型:
       width宽   height高    padding内边距    border边框    margin外边距
       设置margin,padding时, 以顺时针为方向(上top右right下bottom左left),可同时设置,也可分别设置
       设置border时(宽,样式,颜色), 可同时设置,也可分别设置, 
       分类:
        (1) 标准盒子模型(w3c): 默认  box-sizing: content-box    宽高指内容的宽高
                      盒子总宽 = width + 左右padding + 左右border + 左右margin
                      盒子总高 = hight + 上下padding + 上下border + 上下margin
        (2) IE盒子模型:  box-sizing: border-box    宽高包含内容,内边距和边框
                      盒子总宽 = width + 左右margin
                      盒子总高 = hight + 上下margin  
    */
  </style>

二.浮动

1. 文本溢出解决方案步骤

盒子必须设置固定的宽高
文本强制性的在一行显示 white-space: nowrap;
超出去的文本隐藏起来 overflow: hidden;
让隐藏的文本变成省略号 text-overflow: ellipsis

2.文档流

元素根据块或行内元素的特性,在浏览器中从上到下,从左到右依次排列

3.浮动

(1)特性:

浮动元素会脱离标准流(脱标), 不保留原位置
浮动元素会一行内显示并顶部对齐
浮动元素会具有行内块元素的特性(任何元素都可以浮动, 添加浮动后具有行内块元素特性)

(2)浮动溢出(高度塌陷)

子盒子在浮动后不再占据原来在标准流中的位置了。父元素盒子会依照普通流内元素高度设置，导致脱离普通流的浮动元素溢出容器，影响其后元素布局.

(3)元素溢出解决方案

清除浮动影响

父元素本身有高度, 不需要清除浮动
高度塌陷给父元素添加 overflow: hidden; 该属性触发了BFC(块格式化上下文). 缺点: 会隐藏定位到外围的元素
clear: both; 清除左右两侧浮动影响(两边不要有浮动元素) left 左/ right右
伪元素清除浮动, 父元素使用::after

<!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>float</title>
  <style>
/* 
     1. 文本溢出解决方案步骤: 
            (1)盒子必须设置固定的宽高
            (2)文本强制性的在一行显示 white-space: nowrap;
            (3)超出去的文本隐藏起来 overflow: hidden;
            (4)让隐藏的文本变成省略号 text-overflow: ellipsis
      2. 文档流:  元素根据块或行内元素的特性,在浏览器中从上到下,从左到右依次排列
      3. 浮动
        (1)特性: 
            a. 浮动元素会脱离标准流(脱标), 不保留原位置
            b. 浮动元素会一行内显示并顶部对齐
            c. 浮动元素会具有行内块元素的特性(任何元素都可以浮动, 添加浮动后具有行内块元素特性)
        
        (2)浮动溢出(高度塌陷): 子盒子在浮动后不再占据原来在标准流中的位置了。父元素盒子会依照普通流内元素高度设置，导致脱离普通流的浮动元素溢出容器，影响其后元素布局.
        (3)元素溢出解决方案   清除浮动影响
            a. 父元素本身有高度, 不需要清除浮动
            b. 高度塌陷 给父元素添加 overflow: hidden;     该属性触发了BFC(块格式化上下文).       
                缺点: 会隐藏定位到外围的元素
            c. clear: both; 清除左右两侧浮动影响(两边不要有浮动元素)     left 左/ right右   
            d. 伪元素清除浮动, 父元素使用::after  
  */
      /* 伪元素清除浮动, 父元素使用::after */
      div.parent::after{
      content: '';    /* 设置一个空内容 */
      display: block; /* 将块元素转换为行内元素  */
      height: 0;
      clear: both;
      visibility: hidden; /* 隐藏元素, 但保留位置(空间还在) */
    }

    *{
      margin: 0;
      padding: 0
    }
    div.parent{
      /* width: 800px; */
      background-color: pink;
      /* overflow: hidden;  此时p标签的内容会在左右两盒子中间 */
      /* hidden 超出隐藏   visible 默认显示  auto超出显示滚动条  scroll显示滚动条 */
    }
    div.parent div.son1{
      float: left;
      width: 200px;
      height: 200px;
      background-color: rgb(187, 194, 245);
    }
    div.parent div.son2{
      float: right;
      width: 200px;
      height: 200px;
      background-color: rgb(214, 237, 147);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="son1"></div>
    <div class="son2"></div>
    <!-- <div style="clear: both;"></div> --><!--在父盒子里清除 空的盒子也会撑开父盒子, 父盒子背景色显示    用该方法时,常写在此处清除浮动 ,缺点: 代码冗余-->
  </div>
  <div style="background-color:pink ;"> <!-- 如果在此处清除浮动 clear: both; 会在父盒子以下显示, 未撑开父盒子,父盒子背景颜色不显示 -->
      qqqqqqqqqqqqq
  </div>
</body>
</html>