浏览王福朋“CSS知多少”的笔记

这两天学习了王福朋“CSS知多少”系列文章，惊叹于他别出心裁的理解思路，从浏览器的工作原理开始讲起，是看过的有关CSS的文章中最令我明澈的，写下这篇随笔只为整理学到的知识点以便形成体系，以便日后快速查阅复习。

我来问你来答

用于检测浏览器是否支持HTML5、CSS3的技术/工具是：Modernizr。它是一个用来检测浏览器功能支持情况的 JavaScript 库。
相应display属性值的标签　　block：html、body、div、dl、dt、form、h1-h6、ol、ul、hr；　　inline：a、b、br、em、i、img、input、label、span、textarea；　　 inline-block：img、input、textarea
@import：用于引入css文件
@import + 空格+ url(CSS文件路径地址);
link引入css的结构：

二者区别：link是html标签而@import是css元素
!important：用在css样式后，用于改变该css样式的优先级（使其优先级最高）
结构化伪类可以实现表格隔行不同背景色显示的现象

even偶数 odd奇数
:before、:after的使用场景
a.在文本前后增加内容

b.清除浮动

c.实现某些动态功能、特效功能
何为层叠样式表
层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。
样式来源及优先级：

此外，!important优先级最高
选择器优先级：!important、Id、class(类、属性、伪类)、标签
“查理版简单层叠要点”
规则一：包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；例如下图，第一个特指度更高：

规则二：同一元素的不同选择器的特指度比较时，不区分加载的顺序，例如下图，虽然后加载，但是特指度低：

<p id="div" class="content">
　　aaaaaaaaaa
</p>
最终会因特制度高而显示蓝色，而不会因加载顺序而显示红色
规则三：设置的样式高于继承的样式，不用考虑特指度。例如：

最终会显示红色
浏览器将载入的html变为dom树，但是此时没有任何显示样式。之所以显示样式，都是css定义的，浏览器只会通过css来渲染视图样式。div、p、h1-h6、ul等并非天生是block，span、a、label等也并非天生就是inline，是浏览器的默认样式天生规定了它们具有相应的display属性。注意，是浏览器的默认样式规定的，而不是浏览器内核规定的。
由于不同浏览器默认样式中对于margin、padding等的默认值设置不同，所以通常会在CSS文件中设置 *{margin:0; padding: 0;}，这是为了实现自己所写CSS的浏览器兼容性。
margin存在纵向重叠性：纵向的margin是会重叠的，大的会把小的“吃掉”
“盒模型”中设置的width是content的宽度，而不是全部的，如何使其是全部的宽度呢？
使用box-sizing: border-box; 这样设置的宽度=content+padding * 2+margin * 2，即盒子全部的宽度
float的设计初衷是为了实现图片的文字环绕效果
“包裹性”：
“破坏性”：

清除浮动的方法：
第一种：为父元素添加 overflow: hidden;
第二种：为父元素添加浮动，例如 float: left;
第三种：在最后一个子元素后边添加一个空div，并为该div设置 clear;
第四种：clearfix方法。（利用结构化伪类选择器after，在最后一个子元素后边添加一个空div，但可以消除第三种方法在DOM中添加一个空节点的缺点）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .clearfix{
                background-color: #333;
                /* 第一种 overflow: hidden;*/
                /* 第二种 float: left;*/
            }
            
            /*第四种 clearfix*/
            .clearfix:after{
                content: '';
                display: table;
                clear: both;
            }
            .clearfix{
                *zoom: 1;
            }
            
            .red{
                background-color: #FF0000;
                border: 1px solid #000000;
                width: 300px;
                height: 300px;
                float: left;
            }
            .yellow{
                background-color: yellow;
                border: 1px solid #000000;
                width: 300px;
                height: 300px;
                float: left;
            }
            .green{
                background-color: green;
                border: 1px solid #000000;
                width: 300px;
                height: 300px;
                float: left;
            }
            
        </style>
    </head>
    <body>
        <div class="clearfix">
            <div class="red"></div>
            <div class="yellow"></div>
            <div class="green"></div>
            <!-- 第三种 <div style="clear: both;"></div>-->
            ssaasasa
        </div>
    </body>
</html方法方法实例

绝对定位absolute、相对定位relative
position: relative;不脱离文档流，对其他元素的形状和位置都没有影响
position: absolute;脱离文档流，具有“破坏性”，会使其它元素位置改变。在不设置内外边距的情况下会保持在原来的位置，但是悬浮在页面之上。
定位上下文
relative元素的定位永远是相对于元素自身位置的，与其他元素无关，也不会影响其他元素　　　　
fixed元素的定位永远是相对于浏览器边界的，与其他元素无关，但具有破坏性，会导致其它元素位置的变化。
absolute元素，浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。
实现多列布局的方式：
IE6/7如何兼容inline-block？

posted @ 2017-02-26 15:33 JackyZz 阅读(236) 评论(0) 收藏举报

刷新页面返回顶部

JackyZz

浏览王福朋“CSS知多少”的笔记

我来问你来答

公告