前端面试题

1、简述以下常见标签的语义以及默认的display值：p, li, ul, form, b，img，这几个dispaly值的区别是什么？

p 段落 display: block;

li 列表 display: block;

ul 列表 display: block;

form 表单 display: block;

?b 粗体 display: inline;

img 图片 display: inline-block;

 

区别：

block元素

 1、如果没有设置宽度会自动填满父容器

 2、可以应用margin/padding

 3、如果没有设置高度会拓展高度，包含常规流子元素

 4、处于常规流前后元素独占水平空间

 5、忽略vertical-align

inline元素

 1、水平方向从左到右依次布局

 2、margin/padding 在垂直方向无效，在水平方向有效

 3、不会再元素前后换行

 4、浮动或绝对定位自动转换成 block

 5、vertical-align属性无效

 6、元素宽度由元素内容决定

inline-block 元素

 1、可以设置宽高

 2、其他基本同 inline元素属性

2、写一个布局：要求：整体尺寸等于浏览器窗口的尺寸，设置最小高度和最小宽度，

顶栏高度固定50px, 侧栏宽度固定200px, 内容部分占据剩余的空间，

如图：






 



    

    index





 



    


    


        


            
    

                
  • caidan1
    • 

                
  • caidan2
    •

3、有哪些方法可以隐藏元素？

 1、display:none;

 2、visibility: hidden;

 3、opacity: 0;

4、什么是跨域？都有哪些方式可以进行跨域？

 跨域就是不同域名下的通信来往。

 跨域方式：

  1、jsonp 请求

  2、 HTML5新规范的CORS功能,只要目标服务器返回请求头部**Access-Control-Allow-Origin: *** 即可

  3、通过内部服务器代理，实现跨域

  4、,