综合编程

CSS学习部分知识点记录

微信扫一扫,分享到朋友圈

CSS学习部分知识点记录
0

整理一些最近几天学习CSS的一些知识点,好记性不如烂笔头,写下来敲一遍代码为自己写哈。

左右两栏或三栏布局

1、常用方法是给div加float浮动方式实现,加了浮动后div不再独占一行。

2、还有就是position属性实现,通过position的话需要额外加一层div,最外层div的position设为relative,子div的position设为absolute,然后根据两栏还是三栏去设置中/右div的left值即可。

3、通过felx弹性布局。这点就不献丑了,也是才学习。

**float浮动方式实现**
<style>
    div {
        float: left;
    }

    .one {
        height: 500px;
        width: 500px;
        background: gray
    }

    .two {
        height: 500px;
        width: 500px;
        background: rebeccapurple
    }
</style>


**position方式实现**
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

<style>
    .father{
        position:relative;
    }
    .one {
        height: 500px;
        width: 500px;
        background: gray;
        position: absolute ;
    }

    .two {
        height: 500px;
        width: 500px;
        background: rebeccapurple;
        position: absolute;
        top: 0;
        left: 500px;
    }
</style>

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>

几种常见的居中方法

块级元素水平/垂直居中:

1、不改变float和position的情况下,设置margin: 0 auto即可实现快速水平居中而且不需要知道div的具体宽高,但是只能实现水平居中。

body{
        border: 1px solid black;
    }

    .three {
        border: 1px solid green;
        height: 500px;
        width: 500px;
        margin: 0 auto;

    }
</style>

<body>
    <div class="three"></div>
</body>

2、如果div有浮动或position情形,可通过设置left/topd值为50%,再配合transform: translate(?, ?)实现水平/垂直居中,这种方式不需要知道div的具体宽高。

<style>
    .abc {
        height: 500px;
        border: 1px solid black;
    }

    .three {
        background: darkgray;
        height: 300px;
        width: 300px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
</style>

<body>
    <div class="abc">
        <div class="three"></div>
    </div>
</body>

3、如果div的宽高已知,则设置left/topd值为50%后margin-top/margin-left分别减去div宽高的一半,也可以实现水平/垂直居中

.abc {
        height: 500px;
        border: 1px solid black;
    }

    .three {
        background: darkgray;
        height: 300px;
        width: 300px;
        position: relative;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-left: -150px;

    }
</style>

<body>
    <div class="abc">
        <div class="three"></div>
    </div>
</body>

行内元素水平/垂直居中:

1、行内元素设置text-align: center实现水平居中,ine-height值设置为父元素高度可实现垂直居中。不过ine-height只能设置单行文本且父元素高度要已知。

<style>
    .abc {
        height: 200px;
        border: 1px solid black;
        text-align: center;
        line-height: 200px;
    }
</style>

<body>
    <div class="abc">
        <p>1</p>
    </div>
</body>

2、多行文本水平/垂直居中的话,父元素设置display: table,文本元素设置display: table-cell;vertical-align: middle;可实现垂直居中。

<style>
    .abc {
        height: 200px;
        width: 200px;
        border: 1px solid black;
        display: table;
        text-align: center;
    }

    .abc>p {
        display: table-cell;
        vertical-align: middle;
    }
</style>

<body>
    <div class="abc">
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </div>
</body>

一些其他的知识点

3、英文单词因不可分割性,div宽度不够时不会自动换行,word-break属性可强制换行不过中文不受此限制。

4、脱离文档流的元素(fixed),其高度不再计算到body高度内。

5、CSS尽量不要写死具体高度,宽度不要也高度100%,容易引发其他问题。div的宽高应有其内元素撑开。

6、加了display:inline-block的话一般都需要加vertical-lign。

7、span标签换行和不换行是有区别的。大家仔细看看html内,四个span前2个没换行后2个换行,浏览器渲染出的结果明显有一个空格。

<body>
    <div>
        <span>123</span><span>456</span>
    </div>
    <div>
        <span>123</span>
        <span>456</span>
    </div>
</body>

阅读原文...


SegmentFault博客

产品如何打动消费者?产品经理须知这3点

上一篇

zookeeper-选举源码分析

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
CSS学习部分知识点记录

长按储存图像,分享给朋友