1.1 如何理解html语义化?
1.1.1 为什么需要html语义化
html语义化是html5之后提出来的,在之前的html版本中,页面是通过一大堆的div+css堆砌起来的。当css加载失败后,页面非常丑陋,而且没有所谓的权重。比如文字强调,css加载失败后,和一般的文字没有任何区别,而且对于搜索引擎也不友好,搜索引擎无法得知页面的具体什么内容是重要的,等等。
1.1.2 那什么才是html语义化
主要是针对两方面,内容语义化,代码语义化。
主要围绕几个主要的标签,比如说 p(代表段落) li(代表列表) h1-h6(标题,搜索引擎会以这些标题对页面进行建议的分析) strong em(强调) header footer aside article(这写html5新增标签,可帮助我们代码更加语义化)
1.13 语义化的好处?
- 在css加载失败,页面可以呈现更好的内容结构(比如li strong h1等标签的使用,可帮助更好的理解页面结构)
- 用户体验(比如title alt 用于解释名词和当图片加载失败后显示的文字,label可帮助聚集焦点)
- seo(搜索引擎可以更好的抓取重要有用的信息)
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)意义的方式来渲染网页;
- 便于开发团队的维护
1.2 如何理解viewport?
1.3 盒模型
1.3.1 标准模型‘
标准模型实际盒子宽 = css盒子宽度+padding-left+padding-right+border-left-width+border-right-width
标准模型实际盒子高 = css盒子高度+padding-top+padding-bottom+border-top-width+border-bottom-width
说白了,盒子是在固有宽度的范围内往外撑
1.3.2 ie模型
ie模型真实盒子宽 = css盒子宽度- padding-left - padding-right - border-left-width - border-right-width
ie模型真实盒子高 = css盒子高度 - padding-top - padding-bottom - border-top-width - border-bottom-width
说白了,盒子是在固有宽度的范围内往内缩
1.3.3 应用场景
一般而言,pc页面用标准模型比较合适,移动端页面受制于屏幕,用ie模型更加合适
box-sizing:border-box :将盒子模型转化为ie模型
box-sizing:content-box :将盒子模型转化为标准模型
这两个css属性都在ie9以上才可支持
1.4 如何居中?
1.5 Flex和bfc
1.6 选择器优先级
如果有很多css用于同一个元素上面,选择器的优先级就会很重要。如果存在相同的css属性,优先级高的会覆盖掉之前的css属性。
那选择器的优先级如何计算呢?
只要记住一下几点:
- !important : 无敌!!(不用考虑后面了)
- 行内样式:1000
- id :100
- 属性选择器 class : 10
- 元素名:1
如果存在多个css应用在同一个元素,就使用上面的规则。
比如 #app .content p{} 它的权重:100+10 +1 = 111
1.7 vertical-align如何理解?
1.8 左边固定宽度,右边自适应布局
1.8.1 flex
如果没有兼容要求,尽情使用flex吧。习惯了flex,就会发现float什么的都是浮云。
// 代码示意
// html
<div id="app">
<div id="left"><?div>
<div id="right"></div>
</div>
// css
#app{
width:100%;
display:flex;
}
#left{
width:100px
}
#right{
flex:1
}复制代码
看一下flex的兼容性
1.8.2 float+margin(左侧设置固定宽并且左浮动,右侧加个margin-left)
// 代码示意
// html
<div id="app">
<div id="left"><?div>
<div id="right"></div>
</div>
// css
#app{
width:100%;
}
#left{
width:100px;
float: left;
}
#right{
margin-left: 100px
}复制代码
1.8.3 absolute+margin(左侧设置固定宽并且绝对定位,右侧加margin-left)
// 代码示意
// html
<div id="app">
<div id="left"><?div>
<div id="right"></div>
</div>
// css
#app{
width:100%;
position:relative;
}
#left{
width:100px;
position: absolute;
}
#right{
margin-left: 100px
}复制代码
1.8.4 overflow(左侧设置固定宽并且左浮动,右侧加overflow:hidden)
// html
<div id="app">
<div id="left"><?div>
<div id="right"></div>
</div>
// css
#app{
width:100%;
}
#left{
width:100px;
float:left
}
#right{
overflow: hidden;
}复制代码
1.8.5.calc()计算属性(设置固定宽并且左浮动,右侧宽度为calc(100% - 宽度px)且float)
// html
<div id="app">
<div id="left"><?div>
<div id="right"></div>
</div>
// css
#app{
width:100%;
}
#left{
width:100px;
float:left
}
#right{
float:left;
width: calc(100% - 100px);
}复制代码
calc的兼容性:
1.8.6 总结
其实1.8.2 1.8.3 1.8.4 都是使用bfc特性。