css权威指南

第一章 css与文档

  • 行内非替换元素、行内替换元素(行内非替换元素会忽略width属性)
  • 在html中，块级元素不能嵌套在行内元素中，但在css中，对于通过display属性如何嵌套不存在任何限制

———————————————————————————————————————————————————————————

第二章 选择器

  • 属性选择器(类和ID是特殊的属性选择器)
  • 与文档结构相关的选择器：后代选择器、子选择器(>)、相邻兄弟选择器(+)
  • 超链接是有href属性的所有a元素
  • 伪类选择器：动态伪类:focus、:hover、:active可以应用到任何元素；静态伪类只用于超链接：:link、:visited (UA使用假象的类)
  • 选择第一个子元素的伪类:first-child
  • 伪元素选择器：设置首字母样式、设置第一行样式、设置之前和之后元素的样式。(UA使用假象的元素)
  • 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示
  • 对于伪元素 :before 和 :after 而言，属性 content 是必须设置的

———————————————————————————————————————————————————————————

第三章 结构和重叠

  • 选择器的特殊性算法，并将这个特殊性附加到规则中的各个声明。选择器的特殊性由选择器本身的组件确定
  • 重要声明总会胜出 (重要声明与正常声明)
  • 继承值完全没有特殊性 比用户代理的样式还低 (用户代理的超链接样式就会占上风，因为浏览器的样式表可能包含以下规则：a:link{color:blue;})
  • 链接的样式 L:lik O:hover V:visited E:actived (原因后面的覆盖前面的)
  • 创作样式表 > 读者样式表 > 用户代理样式表

属性包括：值、初始值、应用于、继承性、百分数、计算值
———————————————————————————————————————————————————————————

第四章 值和单位

  • 数字：整数和小数(可以有正负)；百分数：几乎总是相对于另一个值；
  • 相对长度单位之所以得名，是因为它们是根据与其他事物的关系来度量的。共有3种相对长度单位：em，ex，px
  • 有时一个值需要用某个词来描述，这种词就称为关键字。如：none、underline等。

第五章 字体

———————————————————————————————————————————————————————————

  • 字体样式的所有这些方面都集中到一个属性，即：font
  • font-size继承的是计算值而不是百分数。
  • font中font-size和font-family值是必须的，而且顺序不能改变，不过所有其他值都是可选的

第六章 文本属性

———————————————————————————————————————————————————————————

  • 值：percentage | number | length | …
  • 文本是内容，而字体用于显示这个内容
  • white-spacewhite-space 属性设置如何处理元素内的空白，影响：空白符、换行符、是否自动换行

第七章 基本视觉格式化

———————————————————————————————————————————————————————————

  • 内容区的背景也会应用到内边距，外边距通常是透明的，从中可以看到父元素的背景
  • 包含块：每个元素都相对于其包含块摆放，可这么说，包含块就是一个元素的“布局上下文”
  • auto：浏览器计算对应的值
  • line-height小于font-size时，inline-level boxes会使用line-height作为自己的高度，此时content area会溢出inline-level boxes

New Knowledge

———————————————————————————————————————————————————————————

  • 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。Flex布局将成为未来布局的首选方案。
  • 任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
  • 采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

    容器的属性：以下6个属性设置在容器上。flex-direction、flex-flow、flex-wrap、justify-content、align-items、align-content (flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；align-items的stretch(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度)
    项目的属性：以下6个属性设置在项目上。order、flex-grow、flex-shrink、flex-basis、flex、align-self (flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto)和none(0 0 auto)。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 )
  • 最简单的网格布局，就是平均分布。在容器里面平均分配空间，但是需要设置项目的自动缩放。 (flex: 1;的全写：flex-grow: 1;flex-shrink: 1;flex-basis: 0%;)
  • CSS3中新增了一组相对于可视区域百分比的长度单位vw, vh, vmin, vmax。vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height。
  • 在CSS盒模型中，一个比较容易被忽略的就是margin, padding的百分比数值计算。按照规定，margin, padding的百分比数值是相对父元素宽度的宽度计算的。

Comments

去留言
⬆︎TOP