前端面试会出现的基本知识点html

来源：互联网发布：艾弗森体测数据弹跳编辑：程序博客网时间：2024/06/03 13:41

HTML
1.session的专属性质，div artticle 特殊的session。

2.css reset
什么是 css reset：HTML都有默认样式，在不同的浏览器的默认样式也不一样，这样影响我们页面样式的统一性。并且有的默认样式在不同的浏览器是通过不同的样式生成，比如ul的缩进样式，在IE下是通过margin实现，但是在火狐里面是通过padding来实现的，所以这时候需要清除他们的默认样式，重新定义标签覆盖默认样式。
为什么要重置：不同的浏览器默认样式不同，这样就会影响我们页面样式的统一性。所以要重置。
css reset的内容：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}table {border-collapse: collapse;border-spacing: 0;}fieldset,img {border: 0;}address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}ol,ul {list-style: none;}caption,th {text-align: left;}h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}q:before,q:after {content:'';}abbr,acronym { border: 0;}

3.两栏布局
问题比如：页面由上下两部分组成，下面那部分为footer当页面足够高的时候footer在页面的底部，当页面没有屏幕高时，footer在屏幕的底部，用css来实现
解决思路：给body设一个最小高度100%，给footer一个绝地定位，bottom等于0.
代码实现如下：

<style type="text/css">  body{min-height: 100%; width: 100%; position: absolute;}  .top{height: 2300px; width: 100%;background-color: #008000;}  .footer{height: 20px; width: 100%; background-color: #FFA500; position: absolute;bottom: 0;}</style></head><body>    <div class="top"></div>    <div class="footer"></div></body>

4. 三栏布局：
比如：4个方块横向排列，有什么办法，有什么优缺点，

a.浮动：脱离文档流，需要清浮动。clear： both，

clear是规定清除那一侧的浮动，clear一共有五个值，
left ：在左侧不允许浮动元素。
right ：在右侧不允许浮动元素。
both ：在左右两侧均不允许浮动元素。
none ：默认值。允许浮动元素出现在两侧。
inherit ：规定应该从父元素继承 clear 属性的值。

<style type="text/css">            .clearfix:before,.clearfix:after{display:table;content:"";}            .clearfix:after{clear:both;}            .clearfix{*zoom:1}             div{background-color: #008000; width: 100px; height: 100px; float: left; margin-right: 10px;}        </style>    </head>    <body class="clearfix">        <div class="div1"></div>        <div class="div1"></div>        <div class="div1"></div>        <div class="div1"></div>    </body>

b,定位，定位没有扩展性，当页面大小出现变化时，定位元素，不能做出适应性变化，所以一般不用定位做排序这里也就不做例子了。c.flex，这是最近比较流行的布局方法，建议深钻。建议查看阮一峰写的关于这方面的知识http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

flex布局中在容器上有6个属性
flex-direction:决定主轴的方向

.div{    flex-direction:column//主轴的方向是从上到下    flex-direction:column-reverse//主轴的方向是从下到上    flex-direction:row//主轴的方向是从左到右    flex-direction:row-reverse//主轴的方向是从右到左}

flex-warp：当内容在一行中显示不下的时候的换行方式

    .box{      flex-wrap: nowrap; //不换行      flex-wrap:wrap ;//换行第一行在上面      flex-wrap: wrap-reverse;//换行第一行在下面    }

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box{    flex-flow:<flex-direction>||<flex-warp>;}

justify-content属性是对齐方式

.box{    justify-content:flex-start;//左对齐（默认）    justify-content:flex-end;//右对齐    justify-content:center;//居中    justify-content:space-between;//两端对其,项目之间的间隔都相等。    justfy-content:space-around;//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍;}

align-items项目对其方式

    .box {      align-items: flex-start;//交叉轴的起点对其       align-items:flex-end ;//交叉轴的终点对其       align-items:center;//交叉轴的中点对其        align-items:baseline;//如果项目没有设高度或者auto则把页面占满         align-items:stretch;//项目第一行字的基准线对其    }

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

    .box {      align-content: flex-star;//与交叉轴起点对其      align-content:flex-end; //与交叉轴终点对其      align-content:center ; //与交叉轴中点对其      align-content:space-around;//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。      align-content:stretch;//轴线占满整个交叉轴（默认值）    }

flex布局中项目上有6个属性；
order项目的顺序排列，值越小排列越靠前

.item{    order:<integer>;}

flex-grow是项目的放大比例，一般默认为0；如果所有的项目为1，其中有一个为2，那么为2 的所占剩余空间是1的两倍

.item{    flex-grow:num;//默认为0；}

flex-shrink项目的缩小比例，一般默认值为1；如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效；

.item{    flex-shrink:num;//默认是1}

flex-basis这个属性在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。设置值以后则项目占固定空间

    .item {      flex-basis: <length> | auto; //默认是auto，    }

flex是个符合属性，由flex-grow，flex-shrink和flex-basis三个属性组成，默认值为0,1，auto后面两个值可不写
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

.item{    flex:none;}

align-self这是给单个项目的属性，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

    .item {      align-self: auto ;      align-self:flex-start;      align-self:flex-end;      align-self:center;      align-self:baseline;      align-self:stretch;    }

d.inline-block把块状元素转换成内敛元素
它相对于margin：0 auto；的好处是它不用设置父元素的宽度

<style type="text/css">            .clearfix:before,.clearfix:after{display:table;content:"";}            .clearfix:after{clear:both;}            .clearfix{*zoom:1}             div{background-color: #008000; width: 100px; height: 100px; margin-right: 10px;display: inline-block;}        </style>    </head>    <body >        <div class="div1"></div>        <div class="div1"></div>        <div class="div1"></div>        <div class="div1"></div>    </body>

5移动端的viewport常用尺寸，基于iPhone几。

6伪类和伪元素的区别和用处

伪元素：当文档语言不能选择到特定的位置是，这个时候就需要用到伪元素，比如第一个字母或者第一行。

伪元素有： :first-line，:first-letter，:before，:after

:first-line伪元素的用法：p:first-line{color:#fff;}:first-letter伪元素的用法p:first-letter{color:#fff;}

还可以与css配合使

<p class="box"></p><style type="text/css">    p.box:first-letter{        color:#fff;    }</style>

:before在元素之前插入或者生成新的内容CSS2
：after在元素之后插入或者生成行的内容css2

h1:before  {  content:url(logo.gif);  } h1:after  {  content:url(logo.gif);  }

伪类：
css
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。(匹配的就是元素自身) 2
:lang 向带有指定 lang 属性的元素添加样式。 2

0 0