CSS3必备技能

macycle
167 阅读9分钟

语法

语法一：样式语法

选择器{
    属性名：属性值；
    /*注释*/
}

注意事项：
- 所有符号都是英文符号，如果写错了，浏览器会警告
- 区分大小写，a和A是不同的东西
- 没有//注释
- 最后一个分号可以省略
- 任何地方写错了，都不会报错，浏览器会直接忽略

语法二：@语法

@charset "UTF-8";
@import url(2.css);
@media (min-width:100px)and(max-width:200px){
    语法一
}

注意事项：
- @charset 必须放在第一行
- 前面两个@语法必须以分号；结尾
- charset是字符集的意思，UTF-8是字符编码encoding

调试

Border 调试法

步骤

- 怀疑谋而元素有问题
- 给这个元素加border属性
- border没出现？说明选择器错了或者语法错了，而且是border属性的上一个属性错了，继续将border属性向下移动一行，可以测出所有的代码是否有误
- border出现了？看看便捷是否符合预期
- bug解决了才能删掉border

文档流

  • 流动方向
inline 元素从左往右依次排列。
block 元素从上往下排列，每一个元素都是另起一行。
inline-block 也是从左往右排列。
  • 宽度
inline宽度为内部inline元素的和，不能用block指定宽度，整行排完再换行，如果该行剩余的空间放不下一个inline元素，则inline元素被拆分。
block默认自动计算宽度，可用width指定宽度。block宽度默认是auto，并不是100%。
inline-block既可以指定宽度，又是从左往右排列，当不指定宽度时，该行剩余空间放不下一个inline-block元素，则整个元素在下一行显示,inline-block会尽可能的缩小占用空间的面积。他的宽度为内部文档流的宽度。
  • 高度
inline高度由line-height简介决定，跟height无关。
block高度由内部文档流元素决定，同时也可以自己设定高度。
inline-block也可以自己设定高度
  • 标签
inline：a、span、br、i、em、strong、label、cite、code
inline-block：img、input
block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
  • 溢出
当内容的宽度或者高度大于容器时会发生溢出。
可以使用overflow属性来设置是否显示滚动条。
auto是灵活设置
scroll是永远显示
hidden是直接隐藏溢出部分
visible是直接显示溢出部分
overflow可以分为overflow-x和overflow-y

脱离文档流

脱离文档流的设置方法：
float
position：absolute、fixed
注意：position：relative不会脱离文档流

例子

文档流

  • 当div标签没有包含东西的时候，他的宽度默认auto，高度为零，而span标签他的高度是有行高间接决定的，而且行高具有继承性，所以他的高度是存在的，但是它的宽度是由内部元素决定的。

盒模型

盒模型的区别在于宽度是否包含了padding与border的宽度,盒模型分为标准盒模型，即W3C盒模型与怪异盒模型，即IE盒模型。

}

边距的合并

  • 边距合并只发生在上下两个子元素之间，而左右两个子元素不会发生边距的合并。

浏览器渲染原理

1. 构建DOM

浏览器会遵守一套步骤将HTML文件转换为DOM 树，可以分为以下几个步骤： 字节数据 ->字符串 ->token ->Node ->DOM

  • 浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串。
  • 将字符串转换成Token。
  • 生成节点对象并构建DOM。
HTML
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

以上的代码将会解析成这样：

构建 CSSOM

DOM会捕获页面的内容，但浏览器还需要知道页面如何展示，构建CSSOM的过程与构建DOM的过程非常相似，当浏览器接收到一段CSS，浏览器首先要做的是识别出Token，然后构建节点并生成CSSOM。在这一过程中，浏览器会确定下每一个节点的样式到底是什么，并且这一过程其实是很消耗资源的。因为样式你可以自行设置给某个节点，也可以通过继承获得。在这一过程中，浏览器得递归 CSSOM 树，然后确定具体的元素到底是什么样式。

  • 注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去。

构建渲染树

当我们生成 DOM 树和 CSSOM 树以后，就需要将这两棵树组合为渲染树。

  • 在这一过程中，不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是 display: none 的，那么就不会在渲染树中显示。

布局与绘制

  • 当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

  • 布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。

  • 布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。

transform

transform有四个比较常用的功能

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew
transform一般需要配合 transition过度，而且inline元素不支持 transform，需要先转换为block或者inline-block

*{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  
  width:100%;
  height:500px;
}

.tss{
  border:1px solid black;
  width:100px;
  height:100px;
  transition:all 1s;
}
.tss:hover{
  transform:translate(100px,100px) scale(1.2) skew(10deg) rotate(45deg)
}


当鼠标移到.tss的框中，动画的效果如上图所示，移上去将会触发位移、变形、旋转灯动画属性。
在.tss中添加transition属性，则可以控制鼠标划上去的动画的展示时间以及展示属性。

trainsition

语法

transition：属性名 时长 过度方式 延迟时间
transition：left 200ms linear 20ms
在动画中定义可各种各样的属性，其中包括left、top、scale等变形方式，但是在transition中指定left，则变形效果只能看到left的变形效果，如果想要看到全部动画的变形效果，需要使用all，表示全部动画效果都展示出来。
过度方式：linear（线性）| ease（缓动）|ease-in | ease-out | ease-in-out | cubic-bezier | step-start |

注意:
并不是所有的属性都能够过渡
display：none=>block并不能够过渡
一般需要改成visibility：hidden=>visible

animation

animation同样也是用来添加动画的。

@ keyframes的两种写法

from-to写法

@keyframes name{
    form{
        transform:translatex(0%);
    }
    to{
        transform:translatex(100%);
    }
}
弊端就是只能声明两个状态；

百分比写法

@keyframes name{
    0%{
        top:0;left:0;
    }
    30%{
        top:50px;
    }
    60{
        left:50px;
    }
    100%{
        top:100px;left:100px;
    }
}

缩写语法

animation:时长|过渡方式|延迟|次数|方向| 填充模式|是否暂停|动画名

-时长  1s或者1000ms
-过渡方式  linear | ease |ease-in | ease-out | ease-in-out | cubic-bezier | step-start |
-次数 2、3...或者是infinite
-方向 reverse | alternate | alternate-reverse | 
-填充模式 none | forward |  backward | both
-是否暂停 paused | running

选择器解惑

part one

div.d1不等于div .d1
<div class="d1">
hello world
</div>
<div>
 <p class="d1">hello world</p>
 </div>
 <style>
     div.d1{
         color:yellow;
     }
     div .d1{
         color:red
     }
 </style>
 
 注：有空格代表是后代选择器，没有空格，直接写在一起表示非子代选择器


part two

<a href="www.google.com" title="谷歌 一下">google</a>
  <a href="www.google" title="谷歌一下">google</a>
  <style>
      a[href][title~="谷歌"]{
      color:red
  </style>
}
注：用~表示含有该独立元素的属性才会显示。


part three

<a href="www.google" title="谷歌一下">google</a>
<a href="www.google" title="谷歌 一下">google</a>

<style>
    a[title*="谷歌"]{
      color:red;
    }
</style>
注：*表示含有该元素就会显示效果。



part four
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
 </ul>
  
 <ol>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
 </ol>
 
 <style>
     li+li{
      color:red
    }
 </style>
 
     <p>dqwfe</p>
    <p>efwfw</p>
    <div>fwefwef</div>
    <div>fwdfcdf</div>
    
    <style>
        p+div{color:red}
    </style>
     注：li+li起作用的是第一个li后面的下一个元素显示。


part five
<div>
   <p>1d</p>
   <p>vdsvsd</p>
   <p>dsvsd</p>
   <p>dsv</p>
   <p>vasbt</p>
 </div>
 <style>
     p:nth-child(4){
      color:red;
    }
 </style>


part six
<div>
  <p>111</p>
  <p>222</p>
  <p>333</p>
  <h6>cascae</h6>
  <h6>fewfwefe</h6>
</div>
<div>
  <p>444</p>
  <p>555</p>
  <p>666</p>
</div>
  
<div>
  <p>777</p>
  <p>888</p>
  <p>999</p>
</div>
<style>
    div :nth-of-type(2){
      color:red
    }
</style>
注：div中的子代元素的所有种类的第二个元素显示效果。


part seven
<div>
  <p>111</p>
  <p>222</p>
  <p>333</p>
  <h6>cascae</h6>
  <h6>fewfwefe</h6>
</div>
<div>
  <p>444</p>
  <p>555</p>
  <p>666</p>
</div>
  
<div>
  <p>777</p>
  <p>888</p>
  <p>999</p>
</div>

<style>
    div p:nth-of-type(2){
      color:red
    }
</style>
注：div所有子代元素为p的第二个元素显示效果。

avatar
文章
阅读
粉丝