请选择 进入手机版 | 继续访问电脑版

乐趣微盟

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 95|回复: 0

CSS中使用列布局是什么?

[复制链接]

331

主题

348

帖子

1321

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1321
发表于 2018-11-23 18:36:13 | 显示全部楼层 |阅读模式
CSS列布局帮助你分割文本变为列,例如考虑下面的杂志新闻在一个大的文本中,但是我们需要在他们之间使用边界划分为3列,这里HTML5的列布局就有所帮助了
为了实现列布局我们需要指定以下内容
  • 我们需要把text划分为多少列
指定列数我们需要使用column-count,对于Chrome和firefox分别需要”webkit”和“moz-column”
-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;
  • 两列之间我们想要多少差距
-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:20px;
· 你想在这些列之间画一条线么?如果是,那么多厚呢?
-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:6px outset #ff00ff;
以下是完整代码
<style>.magazine{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:20px;-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:6px outset #ff00ff;}</style>
你可以使用class属性来应用样式到文本
<div class="magazine">Your text goes here which you want to divide in to 3 columns.</div>
你能解释一下CSS的盒子模型么?
CSS和模型是围绕在HTML元素周围的定义Border(边界),padding(内边距)和margin(外边距)的矩形空间
Border(边界):定义了元素包含的最大区域,我们能够使边界可见,不可见,定义高度和宽度等;
Padding(内边距):定义了边界和内部元素的间距
Margin:定义了边界和任何相邻元素的间距
例如以下是简单的CSS代码定义了盒子的边界,内边距和外边距值
.box {    width: 200px;    border: 10px solid #99c;    padding: 20px;    margin: 50px;}
现在如果我们应用了以上的CSS到一个如下显示的DIV标签,你输出将会和下面图形中显示的那样。我已经创建两个测试“Some text”和“Some other text”,因此我们能看到多少margin(外边距)的属性功能
<div align="middle" class="box">Some text</div>Some other text

你能解释一些CSS3中的文本效果么?
这里面试官期待你回答两个Css的文本效果,以下是两种需要注意的效果
阴影文本效果
.specialtext{text-shadow: 5px 5px 5px #FF0000;}
文字包装效果
<style>.breakword{word-wrap:break-word;}</style>

什么是Web Workers?为什么我们需要他们?
考虑以下会执行上百万次的繁重的循环代码
function  SomeHeavyFunction(){for (i = 0; i < 10000000000000; i++){x = i + x;}}
比方说上面的循环代码在HTML按钮点击以后执行,现在这个方法执行是同步的,换句话说这个浏览器必须等到循环完成才能操作
<input type="button" />
这个会进一步导致浏览器冻结并且没有相应,屏幕还会显示如下的异常信息
如果你能移动这些繁重的循环到Javascript文件中,采用异步的方式运行,这意味着浏览器不需要等到循环接触,我们可以有更敏感的浏览器,这就是web worker的作用
Web worker帮助我们用异步执行Javascript文件

回复

使用道具 举报


QQ|Archiver|手机版|小黑屋|乐趣微盟 ( 青ICP备11000010号-2 )

GMT+8, 2018-12-15 06:22 , Processed in 0.129892 second(s), 24 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表