CSS学习部分知识点记录

2019-05-16 admin

整理一些最近几天学习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>

图片描述

[转载]原文链接:https://segmentfault.com/a/1190000019198485

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65082.html

文章标题:CSS学习部分知识点记录

相关文章
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JS基于cookie实现来宾统计记录访客信息的方法
&lt;p&gt;本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法。分享给大家供大家参考。具体如下:&lt;/p&gt;&lt;p&gt;这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名...
2017-03-29
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
Dcloud,hbuilderX开发uni-app第一天踩坑记录
其实大部分坑在 uni-app在官网都有介绍 具体位置在 在 uni-app 中使用 Vue.js 模块 官方文档中总结了很多坑,但我只说一下我今天遇到的: 解决办法:从后台获取数据后始用js对数据进行处理, 例子: 始用过滤器时: &lt...
2018-08-27
使用mpvue开发小程序需要注意和了解的知识点
一、实例生命周期 除了Vue本身的生命周期处,mpvue还兼容了小程序的生命周期,这部分生命周期的钩子来源于微信小程序的Page,除特殊情况外,不建议使用小程序的生命周期钩子。 app 部分: onLaunch,初始化 onShow,当小...
2018-05-23
回到顶部