前端工作面试问题(上)(11)

      2、通过对象盒子设置缩进样式(text-indent:-9999px)方法可以隐藏超链接文本内容
      同样道理,可以用来隐藏图片上方文字。此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用。图片作为背景而html代码内看不到图片,但文字也存在,却是文字隐藏图片显示出,鼠标也能点击指向。

    3、overflow: hidden 隐藏溢出DIV内容或图片

    4、css隐藏滚动条

使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。

你用过栅格系统吗?如果使用过,你最喜欢哪种?

    “网格系统”,运用固定的格子设计版面布局,其风格工整简洁。

    “使用栅格系统的网页设计,非常的有条理性;看上去也很舒服。最重要的是,它给整个网站的页面结构定义了一个标准。对于视觉设计师来说,他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说,页面的布局设计将完全是规范的和可重用的,这将大大节约了开发成本。对于内 容编辑或广告销售来说,所有的广告都是规则的,通用的,他们再也不用做出一套N张不同尺寸的广告图了”

    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

你用过媒体查询,或针对移动端的布局/CSS 吗?

    针对细说

    设备宽度(device-width)未必是布局宽度(width),为了让非适应性布局与手机相适应,我们跟关心视图宽度,因此需要一种方式来设定宽度,这样可以使用媒体查询检测。

    让视图的宽度和设备宽度一致

<meta element = "viewport" content = "width=device initial-scale = 1" >

    每种布局,都应该根据目标设备指定固定宽度设计

@media screen and (max-width:320px){}

    为移动设备调整网页图像。在最基本的页面,一个移动优化的网站就是其布局、内容、互动都经过调整,以适应移动环境。最常见的做法是使用css媒体查询的功能为不同大小的屏幕提供不同的风格;为较小的屏幕优化布局,可以通过针对移动设备的模块服务。

不同设备的分离设计->根据监视屏幕大小进行设计->(媒体查询,灵活排版,图像结合)

如何优化网页的打印样式?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/1287c5e455583263de605555e03a89e2.html