前端之HTML&CSS

我也不知道为什么，前端从入门才看了不到一个月，中间还忙其他事，项目也没做，代码也没敲多少，啥也不会就投了百度的前端实习生，大概看了一下网上的前端面经更是想哭，啥也不说了，我是练习时长一个月的前端小菜！下面是百度面经里常会问的一些HTMLcss问题，稍做整理：
1.HTML语义化
什么是HTML，HTML即超级文本标记语言，通过不同标记符号来标记网页不同部分。
HTML语义化，从字面上理解，就是让HTML中的标记符号具有语义。例如：<h1>表示标题且规定了标题字体大小。当然还有其他方式可以达到相同的效果：利用无语义标签，并用css设置响应的格式。两者都可以达到相同的效果，但是对于浏览器来讲前者是标题，后者只是被css渲染过的文本。
HTML语义化的作用就是去除css的渲染，对于浏览器而言，仍然具有相同的含义。HTML的语义化使得即便在没有css的渲染下，HTML仍然能够呈现出内容结构和代码结构，使HTML的结构变得更加清晰，也方便的代码的阅读和维护，此外使用语义化标签，代码少，页面加载快。
常见的无语义化的标签：<span>、<div>
常用的语义化的标签：<h1><p><img><form><ul><ol><li><a><label><strong><em>等
此外HTML5中还增加了一些语义化标签：（下面马上讲）
故：我们在写HTML代码的过程中应该注意：
①尽量少使用无语义标签
②当语义不明显时，尽量使用语义标签
③少使用纯文本样式标签<font><b><i>，<b>表示加粗<i>表示斜体，但是当我们需要强调文本内容时，最好使用语义标签<strong>表示加粗强调<em>表示斜体强调
提到这里再介绍一下表格和表单域的语义化封装：

• 表格
  标题用<caption> 表头用<thead> 表格主体部分用<tbody> 尾部（一般用来数据同居）<tfoot> 表头和主体部分的单元格也要进行区分，表头单元格用<th> 主体部分单元格用<td> 表格每行用<tr>
• 表单域：<fieldset>给表单分区块，并用<legend>指明该区块的含义用途

2.HTML5中新增常用的标签
<header> 页面页眉
<artical> 独立的内容
<section> 网页中的区块
<nav> 导航链接
<aside> 侧边栏
<footer> 页脚
<datalist> 输入选项列表（<option>），需要与input配合使用，在<input>中的list属性设置为datalist的ID
<audio> 音频
<vidio> 视频

3.CSS3中新添加的属性：
4.内联元素、块级元素、空元素
内联元素：以<p>为例，内联元素排列时会排在一行，知道这一行排不下，其宽度随内容变化，不能设置height和weight属性（如果需要设置width和height，需将元素的display：inline-block（行内块元素，在行内显示但又有width和height）或者block），内联元素起边距作用的只有margin-left和margin-right，对应布局为display：inline
块级元素：以<div>为例，块级元素独占一行，宽度默认填满父元素的宽度，可以为其设置weight和height属性，也可以设置margin和padding属性，对应的布局为display：block
空元素：没有内容的元素，所有的元素都应该关闭，空元素是在开始标签中关闭的，开始标签中添加斜杠来关闭元素，常用的空元素：<br/><img/><hr/><link/><input/><meta/>
5.data-属性：作用是使HTML中所有元素都都能够嵌入自定义data属性，data-*中属性名的要求，data-后必须至少有一个字母，不能包含大写字母。
6.img标签中的title和alt区别：img中title是鼠标悬停在图片上方时显示的内容，而alt是是图片无法加载时显示的内容
7.设置大小是时不同单位的区别
在设置大小例如宽度和高度时常用到em，px，%，rem这四种，这四种单位又都有哪些区别：
px：像素，绝对单位，显示屏上显示的每个小点，为显示的最小单位；
em：相对单位，相对于当前元素的字体尺寸，一般浏览器默认尺寸为16px；
%：相对尺寸，相对于父元素的大小；
rem：root em 也是相对元素，与em不同的在于rem是相对的是HTML根元素的大小，该元素的好处在于，可以通过修改HTML根元素大小，就可以成比例的修改网页中的内容。
8.HTML和XHTML区别：HTML文本表示语言，对各大浏览器兼容性差，XHTML可扩展表示语言，对各大浏览器有较好的兼容性；后者比前者更严谨，前者不区分大小写，对标签顺序没有要求，允许标签只有一个，而后者所有标签必须小写，对标签顺序要求严格，后打开的标签先关闭，标签必须成对出现。
9.css选择器
何为选择器：就是使css中的样式与HTML元素相对应的方法，通俗讲就是选中你想要的标签的方式
常用的选择器包括（按优先级）：内联式的选择器>id选择器>类选择器>标签选择器
内联选择器包括：属性选择器（可有多个属性值，多个[]）（标签[属性值]，若要选中全部属性为给定值的元素用*[属性值]），后代选择器（标签 后代标签），子元素浏览器（父元素>子元素），相邻兄弟选择器（两个元素拥有相同的父元素，且两个元素紧挨）（元素+紧跟着的元素）
10.css伪类：css伪类用来给选择符添加特殊效果，或者说用来指定选择符的状态，选择符+:+伪类。
常用的伪类：用在链接上的伪类：link（链接未访问），visited（链接已访问），hover（鼠标悬停），active（获得焦点，如被点击）
11.id&class
从名称上来看：id是元素的唯一标识，class则表示类，id一个界面只能使用一次，class可以多次使用，故可以在大范围使用id，小范围使用class，此外方便css样式设置，具有相同样式的部分，可以设置成相同的class。在css中id前面加#，class前面加.(点)
12.理解css盒模型
HTML中所有的元素都可以看做是一个盒子，通过一定模型来占用空间，该模型成为盒模型。一个盒模型从里到外包括content，padding，border，margin，其实根据他们的命名就能理解他们的含义：我们将HTML中的一个元素看做一个盒子，content是盒子的内容，padding（有衬垫的意思）为content与边框border之间的距离，border边框，margin（有留边的意思）为边框与其他元素之间的间距。
标准模型中只有content，IE模型中包括content和padding
13.css中的position属性：
position属性用来指定定位元素位置的方式：absolute–绝对定位，是相对于第一个父元素进行定位，fixed–绝对定位，相对于浏览器窗口，relative–相对定位，相对于正常位置，static–默认位置
定义position后，元素的位置则是由left，right，top，bottom来确定
14.css中的float：用来定义元素浮动的方向，例如常见的图片浮动使文字围绕在图片周围，在css中任何元素都可以浮动。可能的值：left，right，none
15.常见布局：
（1）单列布局：两种情况
①header，content，footer等宽
给三者设置相同宽度（width，或者max-width前者当宽度大于浏览器的宽度时会出现滚动条，后者不会），后设置：margin：0 auto（auto表示水平居中）
②header和footer等宽，content略窄
设置方式同上，只是这个部分设置的宽度不相同
（2）两列布局：就是布局只有两列，左侧位置固定，宽度固定，右侧内容栏，宽度自适应
①浮动布局：左侧给定宽度，设置float：left，右侧设置margin-left：固定值（内容栏与左侧栏的间隔），右侧宽度auto
②浮动布局+负外边距：左侧栏给定宽度，浮动在左侧，margin-right：-100%(这个百分比是相对于侧边栏的宽度)，content部分，外面嵌套一个div，content父元素的宽度为100%（屏幕宽度），另外再设置content的margin-left = 侧边栏的宽度
③绝对定位：侧边栏设置position：absolute，给定宽度，设置位置：left：0
④flex布局：给侧边栏和content加一个父元素，布局设置为flex，display：flex，则侧边栏和content都为flex项目，侧边栏：设置：flex：0,0，给定宽度（三个参数分别为放大属性，缩小属性，项目宽度），在content设置：flex：1,1（宽度不用设置，浏览器分配）
（3）三栏布局：级布局分为三列，两边定宽，中间自适应
①绝对定位：用绝对定位先（left，right）固定左右侧的位置，中间部分用margin-right和margin-left来设置
②flex布局：给定三栏一个父元素，设置布局方式为display：flex，之后分别给左中右三部分设置flex属性，最左和最右部分属性可以设置为：flex：0 0 给定长度，中间部分为flex：1 1 ，如此设置当界面大小改变时，左右两部分的宽度是不变的，中间部分宽度随界面宽度变化而变化，此外可以给三个部分分别设置order（指定布局顺序）
③圣杯布局和双飞翼布局
16.CSS中的负外边距：
margin-left，margin-right，margin-top，margin-bottom
外边距margin是指元素与相邻元素之间的距离，当margin为正时，可以拉开元素之间的间距，这是我们熟知的，当margin为负时：我们可以与正外边距对比来理解负外边距
margin-left和margin-right当元素未指定宽度时：负外边距会拉长元素的宽度（相当于外边距为正时，且子元素宽度没有设置时，子元素的左右边框间隔父元素左右边框一定的值，这里的间隔是朝内的间隔，而外边距为负时，与之相反，间隔是朝外间隔，故就拉长了元素的宽度）。而当本身设置了宽度时，元素的宽度不变，则就会产生位移的效果。
margin-top和margin-bottom也可以相似理解
17.flex布局
flex布局-弹性布局，为盒子模型提供最大的灵活性，任何一个容器都可以设置为flex布局，其中的子元素自动成为容器成员，成为flex项目（flex item）。
容器默认存在两根轴，水平主轴main axis和垂直交叉轴cross axis，水平主轴开始地方叫main start，交叉轴开始地方叫cross start，结束的地方分别叫做main end，cross end
容器的属性：
flex-direction：决定主轴方向（即项目排列方向）：row（水平，起点在容器的左端），row-reverse（水平，起点在右侧），column（主轴在垂直方向，起点在上沿），column-reverse（垂直方向，起点在下沿）
flex-wrap：是否换行：nowrap（不换行），wrap（换行，第一行在上方），wrap-reverse（换行，第一行在下方）
flex-flow：flex-direction和flex-wrap的简写
justify-content：项目在主轴方向的对齐方式：flex-start（向主轴开始的方向对齐），flex-end（向主轴结束的方向对齐），center（居中），space-between（主轴开始结束位置各一个项目，中间项目均匀排列），space-around（每个项目两侧间隔相等，项目之间的间距是项目与边框间距的二倍）
align-items：项目在交叉轴上的对其方式（属性与上面justify-content相同）
align-content：多行/多列项目的对其方式（只有一排或一列不起作用）：stretch（默认）（从顶部开始排列，拉伸每个项目，使排满交叉轴，拉伸方式为在每个项目下方添加空白），flex-start（交叉轴起点对齐），flex-end（交叉轴终点对齐），center，space-between，space-around（与上面相似）
项目属性：
order：定义项目的排列顺序，值越小，排列越靠前
flex-grow：放大flex项目，默认为0，若所有项目flex都为0，等比例放大填满主轴，若不相同则按比例分配主轴上的宽度
flex-shrink：缩小，默认为1，当空间不足时，等比例缩小，若设置flex-wrap换行，则不起作用。若有项目的flex-shrink为1，则缩小时不缩小该项目，等比例缩小其他项目
18.设置水平/垂直居中的方式：
水平居中：①text-align：如果元素是块级元素直接设置text-align：center，如果不是，给元素添加一个块级父元素再设置text-align：center（目的是让元素独占一行，当然如果给元素设置宽度，则文本在该区域内居中）②块级元素：提前指定父元素和子元素的width，设置子元素的margin：0 auto ③父元素子元素不设置宽度，默认父元素宽度等于子元素宽度，设置父元素text-align：center，设置子元素display：inline ④定位：设置父元素的width，height，position：relative，设置子元素的width和height，position：absolute，left：50%（水平居中），top：50%（垂直居中）此时子元素并不完全居中，只是子元素的元素框左边沿和上边沿在父元素的中心位置，故还需设置：margin-left：-子元素width/2，margin-top：-子元素height/2 此刻子元素才完全居中，子元素的中心点与父元素中心点重合 ⑤利用css3的新属性transform，这里主要用到的是transform的移动（translate）属性，设置父元素子元素width，height，父position：relative，子元素position：absolute，子元素：left：50%（水平）transform：translateX（-50%），top：50%（垂直） transform：translateY（-50%），或者同时设置X，Y方向上的translate，transform：translate（-50%，-50%）⑥弹性布局：设置父元素display：flex，justify-content：center。
垂直居中：①表格布局：设置父元素display：table-cell，vertical-align：middle②③使用定位，css3中新增属性transform（方法同水平布局）④弹性布局：父元素：display：flex，align-items：center。
19.css中设置width和height的不同方式区别：
先指出：HTML中每个元素都可以看做一个盒子模型，每个元素都有一个元素框，元素框的宽度包括content，padding，border，margin四部分，而我们常说的width，并不是指元素框的宽度，而是指的content的宽度（而我们用background填充颜色填充的部分不同浏览器情况不同：IE浏览器填充的包括content+padding，谷歌浏览器包括content+padding+border）。
而我们在设计网页的时候设置width和height的值时通常用到的：①给定固定值：这种方法一般不推荐使用，不利于响应式开发，且在移动端看到的布局会不美观；②不设置时默认为auto：整个div的content+padding+border+margin=父元素的width（content），改变子元素的margin，padding会改变子元素的width和height，浮动时可能导致不显示，position不同时可能显示不同；③%：width：100%，height：100%，子元素的width、height为父元素的weight、height，该情况下，改变子元素的margin，padding不会改变子元素的width，height，而是会造成父元素的溢出。
20.如何取消a元素中链接的默认跳转：给绑定时间添加return false或者用event的方法，点击绑定时事件里：function（e）{e.preventDefault();}