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

最新推荐文章于 2021-11-02 11:33:42 发布

chenjieone

最新推荐文章于 2021-11-02 11:33:42 发布

阅读量656

点赞数

分类专栏：面试文章标签：面试

本文链接：https://blog.csdn.net/chenjieone/article/details/55062778

版权

面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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