前端基础-html+css

对HTML语义化标签的理解

• 便于开发人员阅读，便于理解，增强可读性
• 比如nav一般用于导航条，header表示头部，article表示文章等

meta viewport 是做什么用的，怎么写？

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

• 声明html文档类型，告诉浏览器以何种方式来渲染页面
• 严格模式:以该浏览器支持的最高标准运行
• 混杂模式:模拟老式浏览器，防止浏览器无法兼容页面

如何画一个三角形

div{
	width:0px;
	height:0px;
	border-top:10px solid red;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid transparent;
}

html5和css3中新增属性

HTML:

• 语义化标签（header、section、footer、article、main等）
• 表单控件（calander date time email url search）
• canvas绘图
• 多媒体audio video
• web存储：localStroage、sessionStroage

CSS:

• css边框
  • border-radius
  • box-shadow
  • border-image
• css背景
  • background-size
  • background-origin
• css文字效果
  • text-shadow
  • word-wrap
• animation动画
• 2d转换
• 3d转换

link标签和import标签的区别

• link属于html标签，@import是css提供的
• link会在页面加载时同时加载，@import会等页面加载结束后加载
• link样式权重高于@import
• link没有兼容性，@import只支持IE5以上

块元素和行元素

• 块元素：独占一行，可以设置margin、padding、width、height
• 行元素：不会独占一行，width、height会失效，并且垂直方向marin、padding会失效

BFC

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

• 是一个独立的渲染区域，他规定了内部元素如何布局，并且这个区域的子元素不会影响到外面的元素

• 触发bfc的规则有

  • 根元素
  • 浮动元素
  • position为absolute或fixed的元素
  • display为inline-block，table-cell,flex,table-caption
  • overflow不为visible的元素

• 比如子级设置了浮动，在父级使用overflow:hidden就形成了一个bfc,让浮动内容和周围的内容等高

visibility=hidden, opacity=0，display:none

• visibility=hidden:隐藏元素，不会改变页面布局，会触发绑定的事件
• opacity=0:隐藏元素，不会改变页面布局，不会触发绑定的事件
• display:none:隐藏元素，会改变页面布局，不会触发绑定的事件

双边距重叠问题（外边距折叠）

多个相邻普通块元素垂直方向margin会重叠

• 两个相邻元素外边距都为正数，结果为两者之间的最大值
• 两个相邻元素外边距都为负数，结果为两者之间绝对值的最大值
• 两个相邻元素外边距为一正一负，结果为两者之间相加的和

css reset 和 normalize.css 有什么区别？

• reset:重置默认样式，例如a标签默认有下划线，字体颜色为蓝色，li小圆点等
• normalize:使所有浏览器的标签都跟标准规定的默认样式一致

如何清除浮动？

• overflow:hidden
• 给父级加高度
• clear:both/left/right
• 结合伪元素:after，清除前面的元素
• .clearfix 清除浮动（写在父级上）

.clearfix:after{
	display:block;
	content:'';
	clear:both
}
/*兼容IE*/
.clearfix{
	zoom:1
}