Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

block，inline和inline-block概念和区别 #48

Open
wl05 opened this issue Jun 30, 2019 · 0 comments
Open

block，inline和inline-block概念和区别 #48

wl05 opened this issue Jun 30, 2019 · 0 comments

Comments

@wl05
Copy link
Owner

wl05 commented Jun 30, 2019

display:block

  • block元素独占一行。默认情况下，block元素宽度自动填满其父元素宽度。
  • block元素可以设置width,height属性。
  • block元素可以设置margin和padding属性。

display:inline

  • inline元素不会独占一行，多个相邻的行内元素会排列在同一行里。
  • inline元素设置width,height属性无效。
  • inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

使元素既具有block的宽度高度特性又具有inline的同行特性。

我们可以一起来看一个demo:

<html>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .a {
        display: inline;
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 100px;
        padding-left: 100px;
        padding-top: 100px;
    }

    .b {

    }

    .c {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: blue;
        margin: 100px 100px;
    }
</style>
<div class="container">
    <div class="a">a</div>
    <div class="a">a</div>
    <div class="a">a</div>
    <div class="a">a</div>

    <div class="b">b</div>
    <div class="b">b</div>
    <div class="b">b</div>


    <div class="c">c</div>
    <div class="c">c</div>
    <div class="c">c</div>

</div>
</html>

在这个demo中我们会看到的.a被设置为display:inline，其中width、height、margin-left、margin-right、padding-left、padding-right 都不起作用。其他的参照上面几点就比较清楚了。

参考文章

  1. block，inline和inline-block概念和区别
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@wl05