/learncss

Primary LanguageHTML

learncss

  • 本文为重新学习css的记录，参考资料love丁酥酥的简书
  • 本文只记录简单的点，方便自己进行知识的检索

1. head标签能嵌套的标签

  • title, base, meta, style, link, script

1.1 meta标签 meta深入

  • META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）
  • 指明文件的编码属性
    <meta charset="utf-8" />
  • 把 content 属性关联到一个名称
    <meta name="author" content="Your Name"/>
  • 把 content 属性关联到 HTTP 头部
    <meta http-equiv="Refresh" content="5;url=http://www.jianshu.com/u/7a62ab344c39" /> 5秒后会定义到指定页。
  • scheme 属性设置或返回用于解释 content 属性的值的格式
    <meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />

2. 认识html之元素

顶级元素

html, body, frameset

块级元素Block-level element

  • 高度宽度可设置
  • p, h1~h6, div, ul, table, ul, ol, li, hr水平分隔线, form, dl, blockquote
  • 占一行
  • 非块级转换 display:block

内联元素inline elelment

  • 高度宽度不可设置
  • a, span, input, img, button, select, br, textarea, q, b, big, i, em
  • 转换 display:inline float

3. css引入

  • 内联样式、内部样式（style）、外部链接样式（link）、外部导入（import）

4. 选择器

  • "#id", "元素选择器", ".class", "属性选择器[ ]", "通配选择器*"

伪类选择器

  • 顺序：link-visited-focus-hover-active
  • 静态伪类：link, visited;只应用于超链接;只能设置字体颜色、边框颜色、outline颜色
  • 动态伪类：focus, hover, active;用于所有元素
  • 目标伪类:target;IE8-不支持
  • UI元素伪类(IE8-不支持):enabled可用状态,disabled不可用状态,checked选中状态
  • 结构伪类(IE8-不支持)
    • E:first-child(IE6-不支持) 父元素的第一个子元素,且该子元素是E，与E:nth-child(1)等同
    • E:last-child(IE6-不支持) 父元素的最后一个子元素，且该子元素是E，与E:nth-last-child(1)等同
    • :root 选择文档的根元素，即html元素
    • .....

伪元素选择器

  • :first-letter, :first-line, :first-child, :before, :after, ::selection

亲戚关系

  • 后代element element, 子代element>element, 兄弟element~element, 相邻兄弟element+element

5. 盒模型

box-sizing属性

  • 设定那种标准的盒模型
    • content-box 默认值，表现形式同W3C标准和模型。（总宽度 = width + padding + border + margin）
    • border-box 表现形式同IE盒模型，常用值，经常在css-reset中设置。（总宽度 = width + margin）
    • inherit 规定应从父元素继承box-sizing属性的值。

6. css三大特性

优先级

  • 仅内联：后来居上
  • id >（类，属性，伪类）>元素> 通配符 > 浏览器默认样式 > 继承样式
  • 伪元素其实是在元素内容内虚拟创建了一个元素，且无法被其他选择器选取。对于伪元素的样式，不用考虑优先级
  • 社群关系、亲戚关系不会影响其本身的权重

7. 定位机制

  • 普通流、浮动、绝对定位
  • position
    • static 默认定位
    • relative 相对定位
    • absolute 绝对定位
    • fixed 固定定位（脱离文档流）

替换元素和非替换元素，块级元素和行内元素

替换元素

  • 浏览器会根据元素的标签和属性，来决定元素的具体显示内容
  • eg. img, input, textarea, select

非替换元素

块级元素和行内元素

定位与覆盖

  • 当元素脱离了文档流，位置上认为父元素中无此元素(有待商榷)

  • 多个float的时候，满行会自动换行

  • 相同定位（relative，absolute，fixed）之间按先后顺序后者覆盖前者。

  • 不同定位之间relative,absolute,fixed > float > static

  • z-index能影响relative，absolute，fixed的层级，越大越靠上，相同时按先后顺序后者覆盖前者。

  • 比较z-index时，兄弟之间直接比较大小，非兄弟比较其祖先元素

浮动与清除浮动