goldEli commented 6 years ago

选择器权重优先级

内联样式：如 style="" 权重为1000
ID选择器：如 #box 权重为100
类、伪类和属性选择器：如 .box :hover [attribute] 权重为10
元素选择器和伪元素选择器：如 p div 权重为1
通用选择器（*）、子选择器（<）、相邻同胞选择器（+）权重为0

权重值越大优先级越高，相同权重遵循后定义的覆盖先定义的

盒模型

三个核心：padding、border、margin

盒子的宽度：内容宽度 + padding宽度 + border宽度 + margin宽度。改变任何一个都会改变整个宽度。

如果设置了box-sizing:border-box，那么设置 width:100px时，这100px 包含了（内容 + padding宽度 + border宽度）

纵向 margin 重叠

当两个 div 的 margin 为 20px，那么两个div的纵向的距离不是 40px，而是20px，因为纵向的 margin 会重叠。如果一个的比另一个的 margin 大，那么遵循大的吃小的原则。

浮动

float 的设计初衷是为了图片的环绕效果，当图片设置了 float:left 文字会环绕图片周围。

float + div

人们发现 float + div 可以解决类似 table 的布局，所以 float 现在常常用来布局。

破坏性

如果子 div 设置了 float，会导致父 div 出现坍塌。因为设置 float 会让子 div 脱离文档流

包裹性

div 属于块级元素，如果不设置宽度，会撑满整个宽度，当设置 float:left 时，会让 div 包裹文字。这就印证了它的设计初衷，让文字环绕图片，如果没有包裹性，它就无法紧贴文字。

清空空格

当几个图片在一排显示时，有留有空格。设置 float 让图片脱离文档流，既然都脱离文档流了，那么什么空格换行都跟他没关系了。

清除浮动

浮动会导致脱离文档流，导致布局错乱，所以需要触发 bfc 来清除浮动，清除浮动常见的方式：

伪类

.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}

为父级设置高度

什么是BFC？

BFC 全称 Block Format Context，可以想象成一个盒子，营造一个封闭空间，盒子里面和外面相互不影响。在说 BFC 之前先来看看元素定位问题。

常见的定位方式有三种：

普通文档流

元素按照从上到下，从左到右，以此排列。如果是行内元素，从左到右，铺满换行。如果是块级元素，他会默认占满一行，所以会从上到下排列

float

float 会脱离普通文档流，元素按照当前的位置，向左或者向右靠。

绝对定位

脱离普通文档流，他的位置不会受到别的元素影响，也不会去影响其他元素。通过绝对坐标来确定位置。

BFC 具有除了普通文档流的其他特性，比如 margin 重叠的问题，如果触发 BFC，margin 就不会重叠。比如 BFC 会阻止设置 float 导致的文字环绕，所以 BFC 还是清除浮动。

那怎样才能触发 BFC 呢？

比较常用的，overflow:hidden, overflow 除 visible 的属性外都可以触发

定位

可选属性 static/relative/absolute/fixed

absolute

脱离文档流
包裹性
跟随性
悬浮页面上方，挡住下面的内容

flex布局

基本使用：

<style type="text/css">
    .container {
      display: flex;
    }
    .item {
        border: 1px solid #000;
        flex: 1;
    }
</style> 
<div class="container"> 
    <div class="item">aaa</div> 
    <div class="item" style="flex: 2">bbb</div> 
    <div class="item">ccc</div> 
    <div class="item">ddd</div> 
</div>

如何实现居中对齐

水平居中

inline 居中

text-aligin: center

block 居中

.container {
    text-align: center; 
}
.item {
    width: 1000px;
    margin: auto; 
}

绝对定位居中

.container {
    width: 500px;
    height: 100px;
    position: relative; 
}
.item {
    width: 100px;
    height: 100px; 
    position: absolute;
    left: 50%;
    margin-left: -50px
}

垂直居中

inline 居中

.container {
   height: 50px;
   line-height: 50px;
}

block 居中

可以用绝对定位居中（同上），也可以用 margin:auto，不需要提前知道尺寸，且通用性好。

.container { position: relative; height: 300px; } 
.item { 
    width: 100px; 
    height: 50px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
}

语义化

让人和机器更容易读懂代码

比如 h1 p header strong 这些标签，方便搜索引擎爬网页

CSS动画

@keyframes testAnimation { 
    0% {background: red; left:0; top:0;} 
    25% {background: yellow; left:200px; top:0;} 
    50% {background: blue; left:200px; top:200px;} 
    75% {background: green; left:0; top:200px;} 
    100% {background: red; left:0; top:0;} 
}
div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: testAnimation;
    animation-duration: 5s;
}

重绘和回流

重绘：指的是浏览器重新绘制样式，比如颜色，背景等，不会脱离文本流。

回流：当元素的大小，或者属性发生改变，会导致浏览器重新渲染部分或者全部文档

相比之下，回流比重绘更消耗性能。编码时，要尽量避免回流。

思考：如何优化一下代码

for (var i = 0; i < data.length; ++i) {
    dom.innerHTML = '<p>'+data[i]+'</p>'
}

Shucaiping commented 6 years ago

定位

absolute

跟随性:跟随具有除static 以外定位方式的祖籍元素来渲染位置
fixed
定位方式：根据浏览器窗口来渲染定位元素的位置

Shucaiping commented 6 years ago

水平垂直居中

block

flex


<!-- 父级样式：子级 block & inline 元素均可 -->
.container{
    display: flex;
    justify-content: center; //水平居中
    align-items: center;    //垂直居中
}

goldEli / blog

HTML + CSS #2