CSS 杂谈

2017-07-13 本文已影响23人 _空空

CSS 杂谈

文档流 Normal Flow

流动是默认的网页布局形式。也就是说在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的
流动布局模型具有两个比较典型的特征：
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，每个元素另起一行
- 内联元素都会在所处的包含元素内自左到右水平分布显示，宽度不够就换行

宽高如何确定

内联元素 inline
- 占的宽：内容、左右padding、左右margin
- 占的高：line-height、font-size。如果设置了上下的填充、间距，对行内元素的边框、背景色会有影响，但不影响布局

    <style type="text/css">
    body {
        font-size: 0;
    }

    span {
        /* 
        内联元素之间的间距问题：当行内元素之间有“回车”、“tab”、“空格”时就会出现空隙
        解决办法：
            1. 写在一行，之间不要有空格之类的符号
            2. 使用 font-size。设置内联元素的父元素字体大小为 0，然后设置内联元素字体大小 
        */
        font-size: 15px;
        border: 1px solid green;
    }

    span:nth-child(1) {
        line-height: 100px;
        font-size: 30px;
        /*padding: 40px 0;*/
    }
    </style>
</head>
<body>

<span>文字文字文字文字文字文字</span>
<span>文字文字文字文字文字文字</span><br>
<span style="background-color: pink">文字文字文字文字文字文字</span>

</body>

块状元素 block
- 内容宽度：父元素的内容区域的宽度 - 自己的左右边框 border - 自己的左右填充 padding - 自己的左右 margin；可以通过 white-space 控制是否换行
- 内容高度：它内部文档流中元素的高度的总和

    <style type="text/css">
    div {
        border: 10px solid red;
    }

    .contain {
        width: 300px;
        border-color: lightgreen;
    }

    .contain > div:nth-child(1) {
        /* 宽度 %：定义基于包含块（父元素）宽度的百分比宽度／高度 */
        width: 100%;   
        /* 
        不要设置 width: 100%; 很容易出问题
        widtd 的默认值为 auto，它会自动计算的
        */
    }
    </style>
</head>
<body>

<div class="contain">
    <div>文字文字文字文字文字文字</div>
    <div>文字文字文字文字文字文字</div>
    <div>文字文字文字文字文字文字</div>
</div>

</body>

内联块状元素 inline-block
- 宽：内容决定宽度，也可以设置 width。可以通过 white-space 控制是否换行
- 高：它内部文档流中元素的高度的总和。也受 line height、font size 的影响
- 在实际工作中，使用 block 或 float（注意要清除浮动）或 flex，不要使用 inline-block

    <style type="text/css">
    /*
    使用 inline-block 元素的时候，常会遇到两个 bug：
    1. 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
       解决办法：将父元素的 font-size 设置为 0，然后在 inline-block 元素中将 font-size 设置为需要的大小 

    2. 两个不同高度的 inline-block 元素无法对齐，或者下面无缘无故多出几像素
       解决办法：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
    */
    .box {
        font-size: 0;
        background-color: lightblue;
    }

    .box > img {
        vertical-align: top;
        width: 100px;              
    }
    </style>
</head>
<body>
<div class="box">
    <\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
    <\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>

居中（水平、垂直）

文档流中的元素

水平居中

内联元素：在父元素身上加 text-align: center;
块级元素：
- 固定宽度的div
  - margin-left: auto;
  - margin-right: auto;
- 不固定宽度的 div
  - margin: 0 100px;

    <style type="text/css">
    .box {
        text-align: center;
        background-color: lightblue;
    }

    .box > div {
        /* 通过设置 margin 来居中 */
        margin: 0 100px;
        border: 1px solid red;
    }
    </style>
</head>
<body>

<div class="box">
    <span style="border: 1px solid black;">行内元素行内元素行内元素</span>
    <div>块状元素块状元素块状元素</div>
</div>

</body>

垂直居中

内联元素：
- 在父元素上加 line-height（自己身上加也可以）
- 在父元素上加 padding: 100px 0;
- 或两者同时使用
块级元素
- 在父元素上加 padding: 100px 0;

    <style type="text/css">
    .box {
        padding: 100px 0;
        background-color: lightblue;
        /*line-height: 300px;*/

    }

    .box > span {
        line-height: 300px;
    }
    </style>
</head>
<body>

<div class="box">
    <!-- <span style="border: 1px solid black;">行内元素行内元素行内元素</span> -->
    <div style="border: 1px solid red;">块状元素块状元素块状元素</div>
</div>

</body>

不在文档流中的元素

浮动元素居中 float
- 浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止
- 让浮动元素居中这个需求就不太合理
绝对定位
- top: 50%; left: 50%; margin-left: - 宽度的一半; margin-top: - 高度的一半
- top: 50%; left: 50%; transform: translate(-50%,-50%) （CSS 3 属性）
- 兼容性最好的垂直居中：table

    <style type="text/css">
    .parent {
        position: relative;
        height: 300px;
        border: 1px solid red;
    }

    .parent > .child {
        position: absolute;
        width: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid lightgreen;
    }

    table,
    .table
    {
        width: 500px;
        height: 300px;
        margin-top: 30px;
        border: 1px solid red;
    }

    table .child,
    .table .child
    {
        width: 200px; 
        margin: 0 auto; 
        border: 1px solid lightgreen;
    }

    .table {
        display: table;
    }

    .tr {
        display: table-row;
    }

    .td {
        display: table-cell;
        vertical-align: middle;
    }
    </style>
</head>
<body>

<div class="parent">
    <div class="child">
        文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字
    </div>
</div>

<table>
    <tr>
        <td>
           <div class="child">
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
            </div> 
        </td>
    </tr>
</table>

<div class="table">
    <div class="tr">
        <div class="td">
            <div class="child">
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
            </div>
        </div>
    </div>
</div>

</body>

布局（一栏、两栏、三栏）

IE: float
非IE： flex

参考

写css时常遇到的一些问题

CSS 杂谈

CSS 杂谈

文档流 Normal Flow

宽高如何确定

居中（水平、垂直）

文档流中的元素

不在文档流中的元素

布局（一栏、两栏、三栏）

参考

猜你喜欢

热点阅读