首页手记奇舞团前端特训第二次课程笔记—&mdash...

奇舞团前端特训第二次课程笔记——CSS

标签：

Html/CSS Html5 CSS3

css选择器
- [for~="height"] 匹配属性值里以空格分隔的属性里包涵height的
- a[href^="#"] ^以什么开头
- a[href\$="jpg"] $以什么结尾
- [class*="icon-"] 匹配字符串里包含指定子串的元素
伪类选择器
- :link
- :visit
- :active
- :focus
显示继承
- box-sizing:inherit;m
长度单位
- 绝对单位
  - px 像素
  - in 英寸
  - pt 磅
- 相对单位
  - em 相对该元素的一个font-size
  - rem 相对于html的font-size
  - vh 浏览器窗口高度的1%
  - vw 浏览器宽度的1%
  - vmin vh和vw中较小者
  - vmax vh和vw中较大者
line-height
- 数字继承时不会被计算
- 长度、百分比继承时是计算值

@font-face{
    font-family:'xxx',
    src:local('Lobster'),       //优先在本地找   
        url(//xxx.woff),
        format('woff')
}

text-align: justify 两端对齐，对最后一行不起作用。
text-intent: 文本缩进
white-space:指定空白符如何处理
- normal 换行
- nowrap 不换行
- pre
word-break: 是否允许在单词中间换行。normal | break-all | keep-all | break-word
logo一般放在h1标签里，并且里面写上文字，搜索引擎会抓取，文字一般可以隐藏掉。
width、height在指定为100%时，是相对于父元素的conten box的宽度。不论box-sizing为什么值。
viewport 视口
块级元素
- display block、list-item、table
- 不在行级元素里面的文字会包裹一个匿名的行级盒子
  行级元素
- display inline、inline-block、inline-table
- margin的top、bottom无效，left，right有效，但只对于第一行。
- padding不对布局的位置产生影响
- 行级盒子里可以包含行级元素，行级盒子里要包含块级元素，会被块级盒子拆成两个行级盒子
定位模式
- 常规流
  - 除根元素、浮动、绝对定位元素之外的
- 浮动
  - 脱离文档流
  - 行级元素会变短以避开浮动元素
  - 不影响块级元素布局
- 绝对定位
BFC 块级格式化上下文
- 同一个上下文中垂直margin会合并
- 从上往下摆放
- 内部浮动不会影响外面的浮动
- 高度会包含内部的浮动元素
- 不会和浮动元素重叠
- 可以通过overflow：hidden创建，正常情况下都在根的BFC里
- BFC的创建
  - 浮动框
  - 绝对定位
  - overflow非visible属性
LFC 行级格式化上下文
- 一个接一个水平摆放