定位，浮动，BFC

文章目录

1，定位
- 1. margin 与 padding 区别：
- 2. 定位：
2，元素分类，浮动，BFC
3. BFC 块级格式化上下文

1，定位

1. margin 与 padding 区别：

1. padding【行内间距】，可以设置在一个块里边
2. margin【两个块的外间距】，必须是两个块之间
3. 注意：一般margin 设置上面块的下边距margin-bottom，左面块的右边距margin-right

2. 定位：

不脱标的

定位

：static静态定位，relative 相对定位

2. 脱标（脱离文档流）的定位：absolute 绝对定位，fixed 固定定位

3.

static

设置 left/top/right/bottom 没有作用，对margin/padding敏感。

4.

relative

不脱标，【定位占据原来位置】根据 left/top/right/bottom 位置做偏移

5.

absolate

脱标，不占位置，根据父元素【否则窗口】定位，

6.

fixed

脱标，不会局限于父级元素，一直浮在窗口

7.

sticky

是 relative 和 fixed 结合，不脱标，仅在父级内粘性定位【设置了top等值】，

2，元素分类，浮动，BFC

1.1 常见块级元素：

1. 举例

  <center>...</center>  地址文字

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <pre>...</pre>  预格式化

  <blockquote>...</blockquote>  段落缩进   前后5个字符

  <marquee>...</marquee>  滚动文本

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

   	2. 特征： 宽高可控，
   	         无宽度时默认100%，
   	         块级元素内可包含块级元素以及行内元素，
   	         块级元素内不能放入其他块级元素，
   	         大多为结构性标记。

3.转为块级元素：
display : block

1.2 常见行内元素：

举例：

  <b>...</b>  加粗

  <strong>...</strong>  加粗
  
  <sup>...</sup>  上标

  <sub>...</sub>  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

	2. 特征：和其他元素在一行；
	               宽高以及内边距不可控；
	               宽高依靠自身字体大小和图形支撑，不可改变；
	               行内只能包括行内不能包含块级；
	               padding值可以设置
	               margin 值只能设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效
	               大多数为结构性标记

转为行内元素：
display:inline

1.3 行内块级元素

举例：

	<span>...</span>

	<a>...</a>

	<img/>

	<textarea>...</textarea>

	<button>..</button>

	<input>

	<br>

	<label>...</label>

	<select>...</select>

	<canvas>...</canvas>

	<progress>...</progress>

	<cite>...</cite>

	<code>...</code>

	<strong>...</strong>

	<em>...</em>

	<audio>...</audio>
	
	<video>...</video>

特征：

可以设置宽高

可以设置内外边距
转为行内块元素： display : inline-block

2. 浮动：元素脱离文档流【在父级内飘着】，空间释放

行内元素不能设置宽高，但设置浮动后脱标就可以设置宽高了，更像行内块元素，默认宽度为内容宽度
为什么需要清除浮动：
1. 【浮动导致塌陷】：父盒子不设置高度，子盒子设置高度，父盒子高度取决于子盒子，若子盒子浮动【脱标】，导致父盒子高度为 0 ，此时需要清除浮动，让父盒子重新获得高度。
清除浮动的5种方式
1. clear
  : 包含三个值：
  left
  , right, both
  1. 用 left : 当前两兄弟都左浮动时；
  2. 用 right : 当前两兄弟都右浮动时；
  3. 用 both : 当前两兄弟任意浮动时；
2. 若是浮动导致塌陷，让最后一个兄弟采用clear:both。解决父盒子高度为零的问题。

    <style>
        #child1 {
            width: 50px;
            height: 50px;
            background-color: red;
            float: right;
        }
        
        #child2 {
            width: 50px;
            height: 50px;
            background-color: green;
            float: right;
        }
        
        #clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <div id="clear"></div>
    </div>
</body>

3.  浮动导致塌陷：给 父级 元素设置  单伪元素清除  `clearfix::after`   属性：

#child1 {
            width: 50px;
            height: 50px;
            background-color: red;
            float: right;
        }
        
        #child2 {
            width: 50px;
            height: 50px;
            background-color: green;
            float: right;
        }
        /* #clear {
            clear: both;
        } */
        
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    <div id="main" class="clearfix">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>

	 <div id="main2" class="clearfix">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>

 	4. 溢出隐藏：解决浮动塌陷问题  overflow: hidden;

 #main3 {
            background-color: green;
            overflow: hidden;
        }
<div id="main3">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>

    5. 双伪元素清除浮动

    <style>
部分代码：
        /* 双伪元素清除法 */
        .box::before,
        .box::after {
            /* 这里用display:block也可以,用table是可以解决盒子塌陷问题 */
            display: table;
            /* content必须要有 不然伪元素无法生效 */
            content: '';
        }
 
        .box::after {
            /* 这里是清除浮动的关键代码 */
            clear: both;
        }
 
        /* 双伪元素清除法 */
 
        /* 单伪元素清除法 
        .box::after {
             伪元素默认是行内元素,需要转成行内块元素才能撑起父盒子的高度
            display: block;
            需要注意的是,伪元素必须加content属性才能生效 
            content: '';
            clear: both;
        }
         单伪元素清除法 */
 
 
        /* 额外标签法 */
        /* .clear {
            clear: both;
        } */
        /* 额外标签法 */
    </style>
</head>
 
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
 
</html>

3. BFC 块级格式化上下文

作用：给盒子形成

独立的渲染区域

，使内部元素的渲染不会影响外界
触发 BFC 条件：
1. 浮动元素： float 不是 none
2. 绝对定位元素： position 是 absolate 或 fixed
3. 块级元素： overflow 不是 viisible
4. flex 元素
5. inline – block 元素
应用场景：
1. 清除浮动，【浮动导致父级塌陷】

  #child3 {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            float: left;
        }
        
.bfc {
            /* 解决父级盒子高度塌陷问题 */
            overflow: hidden;
        }

 <div id="main3" class="bfc">
        <div id="child3"></div>
        <i class="bfc">我是行内元素</i>
    </div>

原文链接：https://blog.csdn.net/bug_caicai/article/details/127349496

文章目录

1，定位

1. margin 与 padding 区别：

2. 定位：

2，元素分类，浮动，BFC

1.1 常见块级元素：

1.2 常见行内元素：

1.3 行内块级元素

2. 浮动：元素脱离文档流【在父级内飘着】，空间释放

3. BFC 块级格式化上下文

你可能也喜欢