html、css基础考察

标签：

• doctype是什么，它是干啥用的 
• • DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档
    
    

     
• ul、ol、dl都适合用在什么地方
• • ul 无序列表 与li一起用，强调同级，内容不大强调先后
  • ol 有序列表 与li一起用，强调同级，内容分点有先后
  • dl 定义列表 与dt、dd一起使用。作为外层包裹。
• 能够娓娓道来你是怎么理解HTML语义化的
• • 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
• CSS选择器都有哪些
• • css1/2-----通配符＊，标签选择器 ，class，id，伪类（:link, :visited, :active, :hover, :focus, :first-XX , :before, :after, :lang(language)），组合（逗号，空格，>,+）,[attribute],[attribute=value],[attribute~=value](选择属性attribute中包含value的所有元素),［attribute|=value](选择属性attribute 中以value开头的所有元素)
  • css3——
  • • ele1~ele2   p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 
    • [attribute$*^=value] a[src^="https"] 选择其 src 属性值以 "https" 结尾／包含／开头的每个 <a> 元素。
    • :nth-last-child(n)   p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。(最后一个开始计数)
    • :only/first/last-of-type 选择属于其父元素 唯一／首个／最后的 <p> 元素的每个 <p> 元素
    • :only-child p:only-child  选择属于其父元素的唯一子元素的每个 <p> 元素。
    • :root  选择文档的根元素。
    • :empty  p:empty  选择没有子元素的每个 <p> 元素（包括文本节点）
    • :target   #news:target   选择当前活动的 #news 元素
    • :enabled  input:enabled 选择每个启用的 <input> 元素。
    • :disabled  input:disabled 选择每个禁用的 <input> 元素
    • :checked   input:checked 选择每个被选中的 <input> 元素。
    • :not(selector)  :not(p)  选择非 <p> 元素的每个元素。
    • ::selection  选择被用户选取的元素部分。
• position都有什么值，区别是什么
• • absolute  相对于除static的祖先元素定位
  • relative  对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过     z-index 进行层次分级。在相对定位中，通过移动使表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的占用。
  • fixed 相对于窗口定位，脱离文档流。
  • static 默认
  • inherit  继承自父元素
• 经典的清除浮动代码中每一行语句都是干什么用的，为什么少了它不行
• • 清除浮动 还是 闭合浮动。
  • • 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。 
    • 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
    • 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 
    • 其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。
  • 为什么要清除浮动？
  • • 1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流 （normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流）
    • 2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
    • 正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 
  • 清除浮动的原理——了解 hasLayout 和 Block formatting contexts 
  • • has layout是IE特有的一个属性。很多ie下的css bug都与其相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父级元素。当一个元素的haslayout属性为ture时，它负责对自己和可能的子孙元素进行尺寸计算和定位。
    • 默认为true的标签  table  td  body  omg  hr  input select  textarea button  iframe  embed  object applet  marquee
    • • 触发hasLayout属性：display：inline－block   width/height : 除了auto   position: absolute  float: left/right  
      • • （IE专有－－－－zoom: 有值    writing-mode:tb-rl   )
        •    ie7   min/max-height/width  overflow: 除了visible  position：fixed
    • 块格式化上下文block formatting context 是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响范围的一个区域。块格式化上下文包括了创建该上下文的元素的所有子元素，但不包括创建了新的块格式化上下文的子元素。块格式化上下文对定位 与清除浮动 很重要。定位和清除浮动的样式规则只适用于同一块格式化上下文中的元素。浮动不会影响其它块格式化上下文中元素的布局，清除浮动只清除同一块格式化上下文中，在它前面的元素的浮动。
    • • 根元素或其它包含它的元素
      • 浮动 (元素的 float 不为 none)
      • 绝对定位元素 (元素的 position 为 absolute 或 fixed)
      • 行内块 inline-blocks (元素的 display: inline-block)
      • 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
      • 表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
      •  overflow 的值不为 visible的元素
      • 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
  • 所以每一行语句
  • • .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；
    • content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
    • display: block; <----加入的这个元素转换为块级元素。
    • clear: both; <----清除左右两边浮动。
    • visibility: hidden; <----注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；
    • line-height: 0; <----行高为0；
    • height: 0; <----高度为0；
    • font-size:0; <----字体大小为0；
    • }
    • .clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，zoom:1触发IE6的hasLayout属性。height:1%效果也是一样。
• 让一个HTML节点居中的各种实现方式
• • 太多，直接链接http://www.cnblogs.com/jingwhale/p/4753686.html
• 神马圣杯布局、双飞翼布局都是些什么东西 
• • 圣杯：通过简单的浮动和相对定位实现左右固定宽 中间自适应 大概的思想是让中间width100%，再调整左右的位置。
  • 双飞翼：为布局考虑，中间层多包裹一个div，不用相对定位。浮动＋负边距＋margin-left+margin-right
• 强大的负外边距都能干嘛
• • 当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
  • 当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移
  • 应用
  • • 块级元素垂直居中
    • 浮动元素使用负边距，使得浮动元素能强制排列在一行，圣杯和双飞翼等多列布局有用到此原理
    • 内层的div设置了水平的负边距可以变大，前提是元素的宽度不能设置为auto以外的值
    • 浮动后左右边距需要为0，一般是单独设置，其实也可以考虑用负边距。
• 不小心提起文档流的时候还能接着解释到底啥是文档流
  • 文档流，或者叫正常流。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.

html、css基础考察

标签：

原文地址：http://www.cnblogs.com/songjum/p/5466862.html