A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2021-7-21 15:55 编辑

HTML+CSS

1. CSS3 新特性有哪些
【参考答案】
    (1)新增实现圆角(border-radius) 阴影(box-shadow)
(2)背景的尺寸、位置、绘制区域(background-size,background-origin,background-clip)
(3)文字加特效(text-shadow)
(4)线性渐变和径向渐变(linear-gradient、radial-gradient)
(5)新增 2D 和 3D 转换(transform) 过渡(transition)
(6)动画(@keyframes+animation) 媒体查询
(7)多栏布局
(8)新增多种选择器(结构伪类选择器、属性选择器、)

2. 如何清除浮动
【参考答案】
    1. 给父容器加 overflow:hidden
    2. 空标签法: 在父容器的最后添加一个块级标签例如:div,并设置样式 :
     display:block; visibility:hidden; clear:both(一定要加);
    3. 给父元素添加高度,使其占据位置
     4. 使用单伪元素清除浮动(只使用::after或者::before)
   例如:
     .cleardix::after {
           content:‘’;
           display:block;
           height:0;
           visibility:hidden;
           clear:both;
           zoom:1;
      }


3. 实现div 垂直居中有几种方式,请列举
【参考答案】
    绝对定位实现垂直居中(可在 css 中使用 calc()自动计算中间值)
    定位+transform:
    translate(-50, -50)实现水平+垂直居中
    fixed 定位居中
    flex 弹性布局居中

4. 行内元素与块级元素有什么区别?
【参考答案】
     ① 排列方式:
      行内元素间会在同一行进行排列(水平方向); 块级元素独占一行,垂直向下排列(垂直方向)
     ②宽高和内外边距:
     行内元素设置宽高无效,宽高随文本内容的变化而变化,但可以设置行高;  行内元素设置内外边距(margin 和 padding)上下无效,左右有效。
     ③元素嵌套:
      块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不  能包含块级元素,只能容纳文本或者其他行内元素。

5. 谈谈你对css 浮动(float)与定位(position)的理解
【参考答案】
     关于浮动:默认为 none,对应标准流的情况。当 float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。
     关于定位:
     position 取值有 static absolute relative fixed;
     static 是默认的,即标准流排下来,就是 static 定位方式
     fixed 相对于浏览器窗口定位的,这个会脱离标准流,一般[回到顶部]这种按钮就是fixed 做的
    relative 照自己原有的文档流位置定位,不会脱离原有的文档流
    absolute 就是相对于父元素的非默认定位元素位置定位,这个会脱离标准流

6. 列举 5 种css 鼠标(hover)效果
【参考答案】
       hover 可以实现很多的 css 效果,
       例如:层叠与放大、跳跃、淡入淡出、旋转等

7. h5 自定义属性格式是什么,简单列举几种在日常项目中的用法
【参考答案】
     形式:html 标签中的 data-* 属性例如:
    <input type="text" name="username" data-id="101"> 用法:
    ① 请求后台接口需要携带上一个请求的返回值,可以使用该属性保存
    ② 保存在自定义属性,方便其他程序获取


8. 在项目中如何调用自定义字体
【参考答案】
     可以使用 CSS3 中的模块:@font-face 将自定义字体嵌入到网页中

9. margin 和padding 对元素会有什么影响?
【参考答案】
     行内元素设置内外边距(margin 和 padding)上下无效,左右有效
     块级元素可任意设置,但会影响盒子原有大小,可使用 box-sizing:border-box;自动计算大小

10. css 中哪些属性可以继承?
【参考答案】
     (1) 可继承的样式: font-size font-family color, text-indent;
     (2) 不可继承的样式:border padding margin width height;

11. 响应式页面中需要考虑是主要分辨率有哪些(需要兼容PC、平板、手机)
【参考答案】
      手机:max-width:600px
      平板:min-width:600px        max-width:960px PC 端:min-width:960px

12. 实现元素隐藏的方式
【参考答案】
        opacity:0;
        display:none;
        visibility:hidden;
         position:-2000px;

13. isibility: hidden 和 display: none 的区别
【参考答案】
          visibility: hidden:将元素隐藏,但是在网页中该占的位置还是占着
          display: none 将元素的显示设为无,即在网页中不占任何的位置

14. 列表单form 的属性列举 3 个?
【参考答案】
           methood=”get/post action=url
           target=”_blank/_parent“(前一个重新打开一个页面,后一个直接本页面跳转)
           H5 新增:autocomplete(规定输入字段是否应该启用自动完成功能)
           novalidate(规定当提交表单时不对其进行验证)

15. 怎么理解盒模型
【参考答案】
          标准盒模型:盒模型的宽高只是内容(content)的宽高,box-sizing:border-box; 转ie 盒模型;
          ie 怪异盒模型: 宽高是内容(content)+ 填充(padding)+ 边框(border) 的总宽高, box-sizing:content-box; 转标准盒模型


16. 说几个常用的flex(弹性布局)的属性
【参考答案】
     父盒子(flex 容器):
               display:flex; // 指定为 flex 布局
               just-content : flex-start( 默认)| flex-end | center | space-between | space-around;        // 设置子元素在主轴上的对齐方式
               flex-direction:row(默认)|row-reverse|column|column-reverse; // 设置主轴方向
               flex-wrap:nowrap(默认)|wrap|wrap-reverse; // 设置是否允许子元素换行

     子盒子(容器的子元素):
                order: 数值;        // 设置子元素的排列顺序,默认 0
                flex-grow:数值; // 设置子元素的放大比例,默认 0
                flex-shrink:数值; // 设置子元素的缩小比例,默认 1
                flex-basis:数值|auto(默认);        // 设置子元素所占据的主轴空间,例如:350px
               flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; // 该属性是上面 3 个属性的合写,默认值为:0 1 auto,后两个属性可选

1 个回复

倒序浏览
您需要登录后才可以回帖 登录 | 加入黑马