CSS学习部分知识点记录

lookSomeone 发布于2019-08-30 10:53 / 3342人阅读

摘要：整理一些最近几天学习的一些知识点，好记性不如烂笔头，写下来敲一遍代码为自己写哈。这点就不献丑了，也是才学习。脱离文档流的元素，其高度不再计算到高度内。

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

左右两栏或三栏布局
1、常用方法是给div加float浮动方式实现，加了浮动后div不再独占一行。

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

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

**float浮动方式实现**



**position方式实现**

几种常见的居中方法

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

    body{
        border: 1px solid black;
    }

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

    }

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

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;

    }

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

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

一些其他的知识点
3、英文单词因不可分割性，div宽度不够时不会自动换行，word-break属性可强制换行不过中文不受此限制。

4、脱离文档流的元素（fixed），其高度不再计算到body高度内。

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

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

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

GPU云服务器云服务器深度学习部分和 javascript应该学习哪部分学习机器学习知识深度学习知识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114639.html

CSS学习部分知识点记录

摘要：整理一些最近几天学习的一些知识点，好记性不如烂笔头，写下来敲一遍代码为自己写哈。这点就不献丑了，也是才学习。脱离文档流的元素，其高度不再计算到高度内。整理一些最近几天学习CSS的一些知识点，好记性不如烂笔头，写下来敲一遍代码为自己写哈。左右两栏或三栏布局1、常用方法是给div加float浮动方式实现，加了浮动后div不再独占一行。 2、还有就是position属性实现，通过posi...

maxmin 2019-08-02 16:18 评论0 收藏0
前端开发学习-网址记录

摘要：不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这，还有太多网址，先归类一下再补充。最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文，虽然比以前理解深了一点，但还是懵，想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

CatalpaFlat 2019-08-29 11:31 评论0 收藏0
前端开发学习-网址记录

摘要：不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这，还有太多网址，先归类一下再补充。最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文，虽然比以前理解深了一点，但还是懵，想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

anonymoussf 2019-08-20 12:06 评论0 收藏0
前端开发学习-网址记录

摘要：不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这，还有太多网址，先归类一下再补充。最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文，虽然比以前理解深了一点，但还是懵，想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

zhigoo 2019-08-01 15:54 评论0 收藏0