span不能直接设置宽和高的一些而相关问题（行内、块级）

 

span之所以不能设置宽和高是因为它是一个行内元素。

行内元素：可以和其他元素共享一片空间，宽度由子级元素撑起，不能直接设置宽高，不能直接设置上下的内外边距。

块级元素：独占一片空间，不与其他元素共享一片空间，宽都沾满整个父级元素，高度由子级元素撑起， 可以设置width，height，设置了width后同样也占领一行、同样也可以设置   margin与padding属性。

 

 display:inline/block/inline-block的区别：

1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。

 

 解决方法：

我们可以为span设置style--------->      float或者display:inline-block

1.span的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一只</title>
    <style>
        span{
                width:400px;height:500px;background-color:red;
            }
    </style>
</head>
<body>
    <span>hello</span>
</body>
</html>

 

 2.style加了display:inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一只</title>
    <style>
        
        
        span{
            width:400px;height:500px;background-color:red;display:inline-block;
        }
    </style>
</head>
<body>
    <span>hello</span>
</body>
</html>

 

3.style中加了float:right;之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一只蒟蒻</title>
    <style>
        span{
            width:400px;height:500px;background-color:red;float: right;
        }
    </style>
</head>
<body>
    <span>hello</span>
</body>
</html>

 

 

 

posted @ 2021-01-09 15:52  一只蒟蒻也有大佬梦  阅读(1089)  评论(0)  编辑  收藏  举报