CSS基础知识点整理

HollisChuang 发布于2019-08-30 14:13 / 952人阅读

摘要：忙忙碌碌的，没空整理。最近遇到些相关问题，之前只是印象中要这么用，不知道之所以然，今天就大概的整理下会比较零散。首先，巧妙的使用这一标记，将浏览器从所有情况中分离出来。接着，再次使用将和分离开来，这样已经独立识别。

忙忙碌碌的，没空整理。最近遇到些CSS相关问题，之前只是印象中要这么用，不知道之所以然，今天就大概的整理下（会比较零散）。

盒子模型 W3C标准/IE盒子模型

标准盒子模型：宽度=内容宽度（content）+ border + padding + margin
IE盒子模型：宽度=内容宽度（content + border + padding）+ margin

box-sizing

用来控制元素的盒子模型的解析模式。默认为content-box
content-box: W3C标准盒子模型，设置元素的width/height属性是指content部分的宽/高。
border-box: IE传统盒子模型，设置元素的width/height属性是指(content + border + paddubg)部分的宽/高

块级/行内元素及其区别 常用块级元素

div/table/h1-h6/p/form/ol等，以及html5新增的section/canvas/audio/video等等。
块级元素：

会另起一行

可以设置width、margin、border、padding、width属性

默认宽度是容器的100%

行内元素

a/input/textarea/button/label/select等等
行内元素：

和其他元素在同一行

宽度/高度是内容的宽度/高度

可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性

border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加

BFC（块级格式化上下文: block formatting context）

BFC规定了内部的Block Box如何布局.。可参考理解CSS的BFC
特征:

内部的Box会在垂直方向上一个接一个放置

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box 的左边，与包含块border box的左边相接触

BFC的区域不会与float box重叠

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

计算BFC的高度时，浮动元素也会参与计算

触发BFC条件：

float的值不为none

position的值不为static或者relative

display的值为inline-block、table-cell、table-caption、inline-flex或者flex其中之一

overflow的值不为visiabl

::before和:before中双冒号和单冒号区别

单冒号:用于CSS3中的伪类，双冒号::用于CSS3中的伪元素

::brfore就是一个子元素的存在，定义在元素主体内容之前的一个伪元素，并不存在于DOM中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

常见兼容性问题

渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

    div {
        background-color: #ffffff; /* 所有识别 */
        background-color: #fbfbfb; /* IE6、7、8识别 */
        +background-color: #fcfcfc; /* IE7识别 */
        _background-color: #fdfdfd; /* IE6识别 */
    }

Chrome支持小于12px 的文字

    p { font-size: 10px; -webkit-transform: scale(0.8); } //0.8是缩放比例

position: flxed在android下无效

未完待续~~

服务器托管私有云基础知识点小结 PHP基础知识点基础知识入门基础知识

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

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

前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 评论0 收藏0
Web前端基础知识整理-CSS篇

摘要：标签标签自定义盒模型一基本概念盒模型由里向外是由构成的。生成相对定位的元素，相对于其正常位置进行定位。相对与支付的高度，通常为字体高度的一半。视口被平均分为单位的相对于视口的高度。 CSS手册：http://t.mb5u.com/css3/选择器一、元素选择符通配选择符(*):选择所有元素类型选择符(E)：以文档对象类型作为选择符 id选择符(E#id):以唯一标识符id属性等于...

邱勇 2019-08-29 15:21 评论0 收藏0
基础知识：css3核心知识整理

摘要：前缀浏览器兼容根据了解，属性大部分支持，部分支持，少部分支持前缀苹果谷歌火狐浏览器世界之窗例如兼容转换过渡关键帧动画转换及以上支持，需添加前缀属性的方法使用缩放轴缩放倍，轴缩放倍，只有一个值时为缩放倍数倾 css3前缀（浏览器兼容）根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前缀 // -webkit- Safari and Chrome（...

kycool 2019-08-30 15:55 评论0 收藏0