css-display-块级元素和行内元素

Document

块级元素和行内元素

 

行内元素会撑开盒子

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>Document</title>
</head>

<body style="width: 500px;">
    <h1>块级元素和行内元素</h1>
    <div style="border-top:20px solid #000;height: 20px;border: 1px solid #000;"></div>
    <h3>行内元素会撑开盒子</h3>
    <div style="display: inline-flex;border:1px solid  #ff0036;">
        <span style="width:200px;height:200px;border:1px solid #00aaee;display: inline-block;">span</span>
        <span style="width:1000px;height:200px;border:1px solid #00aaee;flex-shrink: 0;display: inline-block;"></span>
    </div>

    <h3>块级元素会溢出盒子</h3>
    <div style="display:flex;border:1px solid  #ff0036;">
        <span style="width:200px;height:200px;border:1px solid #00aaee;flex-shrink: 0;display: inline-block;"></span>
        <span style="width:1000px;height:200px;border:1px solid #00aaee;flex-shrink: 0;display: inline-block;"></span>
    </div>
</body>

</html>

 
posted @ 2020-12-16 22:24  zc-lee  阅读(179)  评论(0)    收藏  举报