CSS基础知识

@H_301_6@ Box-sizing

• border-Box
• content-Box(default)

width/min-width/max-width

• content Box宽度
• 百分数相对于父元素的content Box宽度

height/min-height/max-height

只有当父元素的高度不依赖于该元素时，百分比才生效

margin

属性具有重叠的特性，顺序很重要

border

• border-width
• border-style
• border-color

border三角形的实现

       
       .Box {
      
      
    
       
       width: 
       
       0;
      
      
    
       
       border-width: 
       
       200px;        
      
      
    
       
       border-style: solid;
      
      
    
       
       border-color:  
       
       rgba(255,0) 
       
       rgba(255,0) 
       
       #f35;
      
      

       
       }
      
      

overflow

• overflow: scroll;
• overflow: hidden;
• overflow: auto;

块级元素与行级元素

• 行级margin-top、margin-bottom不起作用
• 行级padding-top、padding-bottom不影响布局

简单选择器的优先级

• level 0: *
• level 1: 标签选择器、伪元素
• level 2: 类、伪类、属性
• level 3: id
• level 4: 内联
• level 5: !important

渲染时的规则

1. 找出匹配到该属性的所有声明

2. 根据规则，优先级从低到高

   • 浏览器预设
   • 用户设置
   • 网页样式
   • 含有!important的网页样式
   • 含有!important的用户设置样式

1. 同一来源，按特异度来排序

2. 特异度一样，按照书写顺序，后面的优先级较高

继承

显示继承

       
       * {
      
      

       
           Box-sizing: inherit;
      
      

       
       }
      
      

       
       html {
      
      

       
           Box-sizing: border-Box;
      
      

       
       }
      
      

值

• 关键字：Box-sizing: inherit;
• 字符串：content: ‘abc’;
• url：background: url(/resources/logo.jpg);
• 长度：font-size: 1em;
• 百分数：width: 100%;
• 整数：z-index: 1;
• 浮点数：line-height: 1.5;
• 颜色：color: rgba(255,255,.4);
• 时间：transition-duration: 0.3s
• 角度：transform: rorateX(deg)

长度单位

绝对单位

• px像素
• in英寸
• cm厘米

相对单位

• em：相对于该元素的一个font-size
• rem：相对于html元素的font-size
• vh: 相对于视口的高度1%
• vmin：vh和vw中的较小者

颜色

• 关键字
• 16进制
• rgb
• rgba
• hsl
• hsla

响应式图片

• 大图随容器自动缩放，保持宽高比
• max-width：100%;

背景图片

• background-size: cover
• background-size: contain

图片保持宽高比

       
       height
       
       :0;
      
      

       
       paddingtop: 50%
      
      

字体设置

• em
• rem
• vh
• calc

选择器

• 通配选择器
• id选择器
• 类选择器
• 标签选择器
• 属性选择器
  • [for~="height"] { color: #f0f;}
  • input[disabled] {}
  • a[href^="#"] {}
  • img[src$=".jpg"] {}
  • [class*="icon-"] {}
• 伪类
  • a:hover {…}
  • a:active {…}

选择器组合

• EF
• E F
• E > F
• E,F

字体匹配

1. 浏览器先获取一个系统字体列表

2. 对于元素中每一个字符，使用font-family属性匹配字体

3. 如果步骤2没匹配上，选择下一个可选的font-family执行步骤2

4. 字体中没有该字符，继续对下一个可选的font-family执行步骤2

5. 如果没匹配到字体，使用浏览器默认字体

通用字体族

• Serif衬线体
  • Georgia、宋体
• Sans-Serif
  • Arial、Helevetica、黑体、微软雅黑
• Cursive手写体
  • 楷体
• Monospace等宽字体
  • Consolas、Courier、中文字体

font-family书写

• 英文字体在前
• 最后添加通用字体族

em

• 一般相对于元素的font-size计算
• 用在font-size属相时，相对于父元素的font-size计算

line-height

• 行盒的高度
• 单位推荐用数字

font缩写

/ 斜体 粗细 大小/行高 字体族 /
font: bold 14px/1.7 Helvetica,Sans-Serif;

Web Fonts

       
       @
       
       font-face {
      
      
    
       
       font-family: 
       
       'lobster';
      
      
    
       
       font-style: normal;
      
      
    
       
       font-weight: 
       
       400;
      
      
    
       
       src: 
       
       local(
       
       'lobster'),
         
       
       local(
       
       'lobster-Regular'),
         
       
       url(//.....woff),
         
       
       url(//......woff2);    
      
      

       
       }
      
      

       
       h1 {
      
      
    
       
       font-family: 
       
       'lobster',cursive;
      
      

       
       }
      
      

white-space

• 空白符处理
• normal/nowrap/pre

letter-spacing

• 字符间距
• 可继承

word-spacing

• 单词间距
• 可继承

word-break

• 单词在中间换行
• normal/break-all/keep-all

line-height

两行baseline之间的距离

vertical-align

• 定义盒子所处的行盒的垂直对齐关系
• 取值：baseline | sub | middle | super | text-top | text-bottom |…
• 百分比相对于元素自身的行高
• 默认baseline

strut

• 图片会按照baseline排列
• display: block;
• vertical-align: moddle;

lists style

• display: list-item会生成两个盒子
• Marker Box的内容和位置可以通过list-style系列属性指定

background

• background-color
• background-image
• background-repeat
• background-position
• background-attachment

border-radius

• border-radius: 5px
• 可以指定四个方向
• 可以使用百分数

Box-shadow

• x
• y
• 模糊程度
• 颜色
• 透明度
• 可以指定多个Box-shadow

position

• static，非定位，默认值
• relative，相对定位（相对自身）
• absolute，绝对定位，相对非static祖先元素
• fixed，相对于视口

z-index堆叠层次

• 为定位元素指定其在z轴上的上下等级
• 用一个整数表示，数值越大，越靠近用户
• 初始值为auto，可以为负数，0，正数

堆叠上下文的生成

• Root元素
• z-index值不为auto的定位元素
• 设置了某些CSS3属性的元素，比如opacity、transform、animation等

绘制顺序

• 形成该上下文的border和background
• z-index为负值的子堆叠上下文
• 常规流内非浮动块级元素
• 非定位浮动元素
• 非定位行级元素
• z-index为0
• z-index为正数

transform: transloate() rotate() scale()

transition : all 3s ease 1s;

配置动画

创建动画序列，需要使用@H_404_742@animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @H_404_742@@keyframes规则实现。

animation子属性有：

1. animation-delay
   设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

2. animation-direction
   设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

3. animation-duration
   设置动画一个周期的时长。

4. animation-iteration-count
   设置动画重复次数， 可以指定infinite无限次重复动画

5. animation-name
   指定由@keyframes描述的关键帧名称。

6. animation-play-state
   允许暂停和恢复动画。

7. animation-timing-function
   设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

8. animation-fill-mode
   指定动画执行前后如何为目标元素应用样式。

使用keyframes定义动画序列

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用 @H_404_742@@keyframes 建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

使用动画事件

利用动画事件可以更好的控制动画和信息。这些事件由 AnimationEvent对象表示，可探测动画何时开始结束和开始新的循环。每个事件包括动画发生的时间和触发事件的动画名称。

原文:大专栏  CSS基础知识