加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

HTMLamp;amp;css面试题

发布时间:2021-01-01 11:02:53 所属栏目:运营 来源:网络整理
导读:h1 id="htmlcss相关问题"HTMLcss相关问题 h3 id="xhtml和html有什么区别"1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XMl的置标语言 最主要的不同 XHTML元素必须被正确地嵌套。 XHTML元素必须被关闭 标签名必须用小写字母 XHT

1、iframe是用来在网页中插入第三方页面,早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分,这样在切换页面的时候避免重复下载。

  • 1、便于修改,模拟分离,像一些信息管理系统会用到。
  • 2、但现在基本不推荐使用。除非特殊需要,一般不推荐使用。

  • 1、iframe的创建比一般的DOM元素慢了1-2个数量级
  • 2、iframe标签会阻塞页面的的加载,如果页面的onload事件不能及时触发,会让用户觉得网页加载很慢,用户体验不好,在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。
  • 3、iframe对于SEO不友好,替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

    • 1、box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
    • 2、transition:当前元素只要有"属性"发生变化时,可以平滑的进行过渡。通过transition-propety设置过渡属性;transition-duration设置过渡时间;transition-timing-function设置过渡速度;transition-delay设置过渡延时。
    • 3、translate:通过移动改变元素的位置;有x,y,z三个属性

    • 1、!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
    • 2、权重算法:(0,0)==》第一个0对应的是important的个数,第二个0对应的是id选择器的个数,第三个0对应的类选择器的个数,第四个0对应的是标签选择器的个数,就是当前选择器的权重
    • 3、比较:先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重高,如果第一个相同,比较第二个,依次类推。

    • 用了display:flex属性,在IE10以下都是无效的。

    HTML结构:

    
    

    CSS:

    .wrapper{position:relative;}
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相对定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height,width
        margin-left: -100px;
    }

    方法二

    .content{
            position:absolute;
            left:50%;
            top:50%;
            width:200px;
            height:200px;
            background:red;
            -webkit-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            -o-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
        }

    • block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
    • none 缺省值。像行内元素类型一样显示。
    • inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
    • inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
    • list-item 像块类型元素一样显示,并添加样式列表标记。
    • table 此元素会作为块级表格来显示。
    • inherit 规定应该从父元素继承display属性的值。

    • 块级元素:div,p,h1,form,ul,li
    • 行内元素:span,a,label,input,img,strong,em;
    • css盒模型:内容,border,padding;

    • play()开始,pause()暂停

    • preload

    • 标签选择符;类选择符;id选择符
    • id>class>标签选择
    • important优先级高

    • 使用带clear属性的空标签;
    • 使用css的overflow属性;
    • 使用css的:after伪元素;
    • 同时为了兼容 IE6,7 同样需要配合zoom使用

           .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
           .clear{zoom:1;}
    • 使用邻接元素处理;
    • 父级设置成inline-block;
    • br清浮动
    • 以浮制浮(父级同时浮动)
    • 给浮动元素父级设置高度
    • 给父元素添加overflow:hidden 清除浮动方法;
    • (编辑:核心网)

      【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读