块级元素和行内元素

时间:2022-08-25 05:01:28

标准文档流等级森严 , 标签分为两种等级:

  1 行内元素

  2 快内元素

 

行内元素和快内元素的区别: (重要)

行内元素  :   

  与其他行内元素并排 ; 

  不能设置宽 , 高  默认的宽度 , 就是文字的宽度 . 

块级元素:

  霸占一行 , 不能与其他任何元素并列;

  能接受宽 , 高 如果不设置宽度, 那么宽度将默认变为父亲的100% . 

 

块级元素和行内元素的分类 :

在以前的HTML 知识中 , 我们已经将标签分过来类  当时分为了:文本级、容器级。

从HTML的角度来讲,标签分为:

  • 文本级标签:p、span、a、b、i、u、em。
  • 容器级标签:div、h系列、li、dt、dd。

注意 :  为什么说P是文本级标签呢?  因为P里面只能放 文字 或  图片  或 表单元素 , P里面不能放 h  和  ul  p里面也不能放 p .

 

现在,从CSS的角度讲,CSS的分类和上面的很像,就p不一样:

  • 行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。

  • 块级元素:所有的容器级标签都是块级元素,还有p标签。

 

块级元素可以转换为行内元素:

给一个块级元素设置 成行内元素:    display : inline 

这个标签将立即变为行内元素,此时它和一个span无异。inline就是“行内”。也就是说:

  • 此时这个div不能设置宽度、高度;
  • 此时这个div可以和别人并排了

行内元素转换为块级元素:

给一个行内元素设置 成块级元素  :  display : block

这个个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:

  • 此时这个span能够设置宽度、高度
  • 此时这个span必须霸占一行了,别人无法和他并排
  • 如果不设置宽度,将撑满父亲

        display             

   display : 块级元素与行内元素的转换 : 

   display: block   :将标签立即变成块级元素.

                             独占一行 / 可以设置宽高, 如果不设置,则默认父盒子宽高的100%

   display: inline    :将标签变成行内元素

        在一行内显示 / 不可以设置宽高 ,根据内容显示宽高.

   display: inline-block    :行内块 

             在一行内显示 / 可以设置宽高 . 

   display: none     :不显示,隐藏 ,不在文档上占位置.

   visibility: hidden    :隐藏 ,在文档上占位置.

脱离标准流

css中一共有三种手段,使一个元素脱离标准文档流:

  • (1)浮动
  • (2)绝对定位
  • (3)固定定位

 

浮动 

浮动 是 css  里面布局最多的一个属性, 也是很重要的一个属性 . 

float : 表示浮动的意思 , 他有四个值 . 

  float none :  表示不浮动

  float left :  表示左浮动

  float right :  表示右浮动

 

注意 : 当盒子向右/左浮动时 , 如果有左/右浮动的盒子,那么会贴近以浮动的盒子,没有就去贴边. 

块级元素和行内元素块级元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*<!--将屏幕没有缝隙-->*/
        *{
            padding:0;
            margin: 0; 
        }
        /*这个div是将高为40px的一条全部沾满*/
        .top-Bar{
            width:100%;
            height: 40px;
            background-color: #333; 
        }
        /*需要的长度1226,高40,居中--绿色到黄色右边的举例*/
        .container{
            width: 1226px;
            height: 40px;
            /*background-color: red;*/
            margin-right: auto;
            margin-left: auto;
        }
        .top-Bar .top-l{
            width: 550px;
            height: 40px;
            background-color: green;
            /*浮动,要不然div是换行的*/
            float: left;
        }
        .top-Bar .top-shop{
            width: 100px;
            height: 40px;
            background-color: yellow;
            float: right;
        }
        .top-Bar .top-info{
            width: 200px;
            height: 40px;
            background-color: purple;
            float: right;
            /*距离右边距20px*/
            margin-right: 20px;
        }
    </style>
</head>
<body>
    
    <div class="top-Bar">
        <div class="container">
            <div class="top-l">
                
            </div>
            <div class="top-shop"></div>
            <div class="top-info"></div>
        </div>
    </div>
</body>
</html>
示例

 

浮动的四大特性 : 

  1 ,  浮动的元素脱离标准流 

  2 , 浮动的元素互相贴靠

  3 , 浮动的元素有"字围" 的效果

  4 , 收缩效果 :  一个浮动元素 , 如果没有设置 ,width , 那么自动收缩为文字的宽度 , 

块级元素和行内元素

 

 

 

 

 

 

 

 

 

注意 :  要浮动一起浮动 , 有浮动 ,要清除浮动

 

浮动的好处与缺点 : 

  --- 好处 : 使元素实现并排/就在页面上占位置 

  ---缺点 :  子盒子浮动 , 不在页面占位置 , 如果父盒子不设置高度 , 那么撑不起父盒子的高度 , 页面会出现紊乱

 

清除浮动 :

清除浮动的方法 : 

  1 , 给父盒子设置高度 (后期不好维护)

  2 , clear : both

  3 , 伪元素清除法 

  4 , overflow : hidden

有三个值 : 

 left : 清除当前元素左边的浮动元素

 right : 清除当前元素右边的浮动元素

 both : 清除当前元素两边的浮动元素.

给浮动元素的后面加一个空的 div , 并且该元素不浮动 , 然后设置 clear (在该元素上面表示清除左边) 

 

示例 : 

块级元素和行内元素块级元素和行内元素
<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ,然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>   
html
块级元素和行内元素块级元素和行内元素
*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }
css

 

伪元素清除法 

给我浮动元素的父盒子 , 也就是不浮动元素 , 添加一个clerafix 的类 , 然后设置 :

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}

一般都是这样写 :

        .clearfix:after{
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden
            }    

 

overflow: hidden    清除法     

overflow  属性规定当内容溢出元素框时 发生的事情 , 

 说明: 

  这个属性定义溢出元素内容区的内容如何处理, 如果值为scroll , 不论是否需要 ,用户代理都会提供一种滚动机制, 因此, 有可能使元素框中可以放下所有的内容也会出现滚动条 . 

 

有五个值 :

块级元素和行内元素

 

.

 

 

 

 

 

 

 

其实这是一个 BFC 区域: https://blog.csdn.net/riddle1981/article/details/52126522  

     记住 : BFC 内的元素之间互不影响.