css基础知识汇总

CSS基础知识

1、Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

  • <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
  • 行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  • 知名的空元素： <br> <hr> <img> <input> <link> <meta>
  • 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

3、CSS的盒子模型

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

（1）、link属于XHTML标签，而@import是CSS提供的;

（2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（4）、link方式的样式的权重 高于@import的权重.

5、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

（1）css选择符

  • id选择器（ # myid）
  • 类选择器（.myclassname）
  • 标签选择器（div, h1, p）
  • 相邻选择器（h1 + p）
  • 子选择器（ul < li）
  • 后代选择器（li a）
  • 通配符选择器（ * ）
  • 属性选择器（a[rel = “external”]）
  • 伪类选择器（a: hover, li: nth - child）

（2）继承：

  • 可继承： font-size font-family color, UL LI DL DD DT;

    • 不可继承 ：border padding margin width height ;

（3）优先级

  • 优先级就近原则，样式定义最近者为准;
    • 载入样式以最后载入的定位为准;
    • 优先级为：!important > id > class > tag ， important 比 内联优先级高。

（4）css3新增伪类

  • p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
  • p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :enabled、:disabled 控制表单控件的禁用状态。
  • :checked，单选框或复选框被选中。

6、如何居中div水平垂直居中？

具体见【div水平垂直居中】【demo】

以上文章来自：黄卉 ， https://huanghui8030.github.io/css/jczshz.html