css3

css3

Vue通过axios获取数据,渲染的问题

jacsondct 回复了问题 • 3 人关注 • 2 个回复 • 131 次浏览 • 2017-08-21 11:33 html5

如何用正则匹配出标签中的值?

mercury74 回复了问题 • 4 人关注 • 3 个回复 • 124 次浏览 • 2017-08-21 10:55 html5

为什么我的定时器执行了里面的值不动?

xtbda 回复了问题 • 2 人关注 • 1 个回复 • 113 次浏览 • 2017-08-21 10:44 html5

有比较好用的自定义滚动条的插件吗

qweqwe 回复了问题 • 4 人关注 • 3 个回复 • 156 次浏览 • 2017-08-21 10:11 html5

Canvas怎么在路径上画文本

itmiyang 回复了问题 • 3 人关注 • 2 个回复 • 2461 次浏览 • 2017-08-21 09:55 html5

vue npm install 问题

illutomato 回复了问题 • 2 人关注 • 1 个回复 • 151 次浏览 • 2017-08-21 09:33 html5

H5中的audio标签播放音频时,过一段时间会自动停止。

commaskh5 回复了问题 • 2 人关注 • 1 个回复 • 113 次浏览 • 2017-08-21 09:22 html5

vue-cli的main.js怎么引入scss

richway 回复了问题 • 3 人关注 • 2 个回复 • 162 次浏览 • 2017-08-21 09:11 html5

响应式插件问题。

crokery321 回复了问题 • 2 人关注 • 1 个回复 • 105 次浏览 • 2017-08-20 21:55 html5

webstorm编辑器如何设置默认的node路径

njmarked 回复了问题 • 2 人关注 • 1 个回复 • 111 次浏览 • 2017-08-20 21:44 html5

如何将react的默认路径改成自己想要的

wyfwz888 回复了问题 • 3 人关注 • 2 个回复 • 118 次浏览 • 2017-08-20 21:33 html5

支付宝支付成功回调地址刷新当前页面?

tongshuo1990 回复了问题 • 4 人关注 • 3 个回复 • 117 次浏览 • 2017-08-20 21:22 html5

javascript求出最小的两位数

bigzerg 回复了问题 • 15 人关注 • 14 个回复 • 167 次浏览 • 2017-08-20 20:11 html5

iframe不能开卡xml文件?需求需要在一个div里面展示xml原文件;

justcby 回复了问题 • 2 人关注 • 1 个回复 • 136 次浏览 • 2017-08-20 19:55 html5

这种功能是怎么实现的,这是开源的模板吗?

amymengfan 回复了问题 • 4 人关注 • 3 个回复 • 119 次浏览 • 2017-08-20 19:44 html5

base64图片编码是将图片本身转换还是将图片url转换?

bb3994411 回复了问题 • 3 人关注 • 2 个回复 • 115 次浏览 • 2017-08-20 19:33 html5

关于前端跨域nginx配置反向代理的问题?

renxianpeng 回复了问题 • 3 人关注 • 2 个回复 • 119 次浏览 • 2017-08-20 19:11 html5

js如何将二进制流音频转为audio标签能播放的格式?

Skt9008 回复了问题 • 2 人关注 • 1 个回复 • 144 次浏览 • 2017-08-20 18:44 html5

vue非路由页面跳转到路由页面

lvzq2016 回复了问题 • 4 人关注 • 4 个回复 • 101 次浏览 • 2017-08-20 18:11 html5

trigger("change")的作用

TrueMemories 回复了问题 • 2 人关注 • 1 个回复 • 96 次浏览 • 2017-08-20 17:55 html5

条新动态, 点击查看

水平拆分方案A:百分比宽度+float



可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动。



在很多比例(1/3、2/3是最常见的情形)不能整除的情况下,在一些情形下出现1px的误... 显示全部 »

水平拆分方案A:百分比宽度+float



可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动。



在很多比例(1/3、2/3是最常见的情形)不能整除的情况下,在一些情形下出现1px的误差。



水平拆分方案B:百分比宽度+不带间隙的inline-box



缺点同上。hack量和方案A不相上下。



额外的好处是有很多vertical-align方式可以指定,额外的坏处是很多vertical-align的属性值对于各个浏览器来说都不一样。最常见的vertical-align还是middle和baseline,顶多再加个top和bottom。



水平拆分方案C:表格



用表格当然是全浏览器支持的选择。



水平拆分方案D:display属性代替表格



用display:table和display:table-cell等属性替代表格,以兼顾语义。IE8+和现代浏览器支持。



更多前瞻属性……




  • 使用css3的新特性calc来计算值 + float/inline-box

  • 使用flexbox






下面介绍bootstrap的一套可复用的方案,这套方案是从方案A发展而来,主题思想是抽取出布局中可以复用的类。



一个常见的列拆分如下:



<div class="container">
<div class="row">
<div class="col-md-3"></div>
...
</div>
</div>


bootstrap的栅格系统的核心,即是使用这样的一个三层结构,最内层使用width来分配100%的父级宽度。



对于单列的类名规则是:col-[lg/md/sm/xs]-[1~12]。详情见 bootstrap栅格选项 。



中间的变量跟响应式media查询有关,这里不详细解释。最后一个值x,既等分父容器的1/12乘以x。如下:



.col-md-3 { float:left; }
@media (min-width: 992px) {
.col-md-3 { width: 25%; }
/* 父级容器的3/12 */
}


在bootstrap栅格系统中,每个col之间都有30px间隙,如何做到等分间隙呢?见如下CSS属性:



/* 列容器设置左右padding */
.col-md-3 {
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* 行容器设置负margin撑开 */
.row {
margin-right: -15px;
margin-left: -15px;
}
/* 行容器清理浮动 */
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
/* container再补完被row挖去的15px */
.container {
padding-right: 15px;
padding-left: 15px;
}


等等,是不是有哪里不对?计算一下宽度:



每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)


怎么会每个都1/4等分父容器呢?



还有这个属性在作用:



*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


bootstrap使用*来选取所有元素(这是我对bootstrap感到厌烦的原因,为了开发效率,牺牲选择器效率),并强制使用border-box计算宽度,因而达到了布局上的大和谐这样的计算公式:



父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)


这样做以后,可以很方便地拿出对应的类来使用,也可以级联,类似于row-col-row-col-row-col……



div.container
h1 test
div.row
div.col-sm-6
div.row
div.col-sm-6
img(data-src="holder.js/100%x180")
div.col-sm-6
img(data-src="holder.js/100%x180")
div.col-sm-6
div.row
div.col-sm-3
img(data-src="holder.js/100%x180")
div.col-sm-9
img(data-src="holder.js/100%x180")


(上面用了jade的语法展示层级,和bootstrap的holder.js来补充一个img元素以展示效果)。效果如下:





bootstrap方案的适用面是IE8+及其他现代浏览器,在这个方案中,主要的问题在于box-sizing属性的兼容性,小瑕疵是百分比宽度带来的±1px误差的问题。

qudanjiang

qudanjiang 回答了问题 • 2016-04-07 20:50 • 8 个回复 不感兴趣

css中两个基础问题想请教一下各位

赞同来自:

LZ的问题:




一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容... 显示全部 »

LZ的问题:




一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

——《 W3School:CSS 定位 》




块框和行内框有明确的包含关系:




  • 块框可以包含块框

  • 行内框可以包含行内框

  • 块框可以包含行内框

  • 行内框不应该包含块框(若违法这条规则,结果很复杂,但绝对难以达成想要的效果)


更多区别:




  • block元素默认宽度自适应于外层,而inline元素宽度自适应于内部

  • block元素默认从上往下铺排,inline元素默认从左往右铺排

  • block元素可以设置上下margin,inline元素不可以


至于float,它主要是为了满足环绕的效果,请阅读:CSS float浮动的深入研究、详解及拓展 (一) 、 (二) 。



由于LZ缺的知识点太多,这里实在是写不完。还是建议完成w3school的相关课程学习,和codecademy的CSS Positioning类目下的课程。



如果LZ有英文阅读能力,在实践后可以以这篇文章来指导知识的深化:《 【译】理解 CSS 规范 》





下面主要是反驳“块级元素前后会带有换行符”的误导性观点。



CSS的问题,越基础,就越容易出现误解。



“块级元素前后会带有换行符”这种说法应该是来自于实战,用类比的方式做了相应知识点的内化。读到这句话,大家也可以很轻松地联想起word之类的文本排版软件的操作:

Q: 如果我有文字段A和文字段B,我想让A和B左右不交叠,折开一行,我该怎么办?

A: 按回车。

Q: 如果我有文字段C和图片D,我想让D不出现在C中间,从C下延排起,我该怎么办?

A: 按回车。



是这样的吗?把word之类的文本排版软件的思维带到HTML里面来,下面的思维应该很常见:

- 在两个元素之间死命摁回车,想让两个元素上下隔得远一些

- <br>标签放在任意两个元素之间,想让两个元素上下隔得远一些。 http://jsfiddle.net/humphry/3Lk2Q/



我敢相信到现在都有人是用<br>(或者另外一个有高度的<div>标签)而非margin来做的垂直间隔。用Word的方式来理解HTML,用<br>来做间隔,等到试验出来用font-sizeline-height去控制<br>的高度,以调节两个div之间的垂直距离的时候,就彻彻底底被带到沟里去了。(《 你真的了解HTML吗 》)





“块级元素前后会带有换行符”的误导性大于它的帮助,LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗?”这样的问题。



换行符不是重点,重点是盒子。



要正确理解CSS排版中的这个基础部分,得先从文档流开始。



CSS为了达到日常排版的需求,给予了文档流以现实依据:我们的书写/阅读习惯:





(上面有个图,因为是GIF可能加载比较慢,注意看哟。)



文档流如同河流一般,将元素带向相应的屏幕位置。普通的,正常的,大众的文档流,就像是上面这个动画所示的,首要的铺排是:从左往右。次要的铺排是:从上到下。



为何我要强调普通的,正常的,大众的呢?因为有的语言是这样的:





这里就展现了从右向左,从上到到下的语言书写。因此跟这个世界的现象一致,文档流的顺序不总是从左往右从上到下,一系列属性可以改变它,不过我们这里不谈这个,我们只谈常规流。



CSS中的文档流中的两种元素,行内框的堆叠方向对应着我们的书写顺序,而块框则默认从上往下堆叠:




  • 行内框——inline——从左往右,从上往下

  • 块框——block——从上往下


换行在这个顺序中重不重要?不重要,这个过程中,重点是框往哪个方向堆叠。



更加深入的常规流介绍:《 w3help:常规流( Normal flow ) 》





前端是一个由实践发展起的方向,相关知识点的理解大家经常用的是类比,这很正常。盒子堆叠的机制用类比,说成是换行符,对不对呢?



对也不对。

说对,是因为,让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似;

说不对,是因为,如果理解到了盒子的层面,理解了块级元素和行内元素是如何按照文档流方向进行排版,理解了float元素是如何做到环绕,理解了浮动和清除浮动,就会明白,“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想,也很有误导性。



最好的理解CSS和HTML的办法,是用CSS和HTML的方式进行思考,而不是用其他的经验来套。这就像是英语口语,有英语思维,才能流利地表达。





更新:感谢P酱,这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关,标签无关的,“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说,破坏这两条规则很难达成想要的效果。

qweqwe

qweqwe 回答了问题 • 2016-04-09 14:50 • 1 个回复 不感兴趣

实现文本框差异化录入颜色

赞同来自:

Derek朕會功夫:如果用户是正常输入,你应该设置keypress。但我下面的代码中使用了blur,之所以没有使用keypress/keyup,是因为用户使用输入法输入会导致代码失效,而blur则不会。DEMO: http://jsfiddle.net/... 显示全部 »

Derek朕會功夫:如果用户是正常输入,你应该设置keypress。但我下面的代码中使用了blur,之所以没有使用keypress/keyup,是因为用户使用输入法输入会导致代码失效,而blur则不会。DEMO: http://jsfiddle.net/DerekL/Y8ySy/

\n\n $(\"body\").prop(\"contentEditable\", true).blur(function(){\n var chars = $(this).text().split(\"\");\n this.innerHTML = \"\";\n $.each(chars, function(){\n $(\"<span>\").text(this).css({\n color: \"#\"+(Math.random()*16777215|0).toString(16) //just some random color\n }).appendTo(\"body\");\n });\n});\n \n\n

此外,还有一种不能随机改变颜色的效果: http://jsfiddle.net/DerekL/A7gL2/

chenfulai

chenfulai 回答了问题 • 2016-07-27 14:00 • 1 个回复 不感兴趣

A:hover触发B元素的动画

赞同来自:

.button:hover .line这样写是后代选择器,你的子孙元素有这个类吗?

\n\n

解决方案:

\n\n

使用相邻兄弟选择器:.button:hover + .line显示全部 »

.button:hover .line这样写是后代选择器,你的子孙元素有这个类吗?

\n\n

解决方案:

\n\n

使用相邻兄弟选择器:.button:hover + .line

映客、花椒的h5直播播放页面技术选择

zjq19921101 回复了问题 • 2 人关注 • 1 个回复 • 508 次浏览 • 2016-12-27 11:22 html5

让 HTML5 来为你定位

amymengfan 发表了文章 • 0 个评论 • 574 次浏览 • 2016-12-07 19:26 html5

JS开发HTML5游戏《悠悠考拉》(一)

brainr 发表了文章 • 0 个评论 • 278 次浏览 • 2016-11-18 12:26 html5

【CSON原创】A*算法+HTML5实现游戏寻路

giszx 发表了文章 • 0 个评论 • 642 次浏览 • 2016-08-03 18:00 html5游戏 javascript html5

HTML5 + Canvas 画可爱的“小猫咪”

cc25937795 发表了文章 • 0 个评论 • 453 次浏览 • 2016-07-27 21:36 html5 Canvas javascript

CSS3入门教程 - CSS3 多列

css3 发表了文章 • 0 个评论 • 441 次浏览 • 2016-07-13 23:01 css3

移动前端不得不了解的html5 head 头标签

lvzq2016 发表了文章 • 0 个评论 • 558 次浏览 • 2016-06-04 21:44 css3 css html5

如何在PC上使用firebug那样,调试手机端浏览器?

bb3994411 回复了问题 • 4 人关注 • 3 个回复 • 1467 次浏览 • 2016-04-10 11:50 html5 css javascript

请问在html中如何点击某元素.而展开一个select

mstar 回复了问题 • 3 人关注 • 2 个回复 • 999 次浏览 • 2016-04-09 11:00 html5 css css3 javascript jquery

如何在JavaScript对象中添加函数?

njmarked 回复了问题 • 2 人关注 • 1 个回复 • 1053 次浏览 • 2016-04-06 20:50 html5 javascript

使用CSS修改HTML5 input placeholder颜色

giszx 回复了问题 • 5 人关注 • 4 个回复 • 1329 次浏览 • 2016-04-06 20:00 html5 css

如何快速清除Canvas图形组合模式?

weixiaozhuo123 回复了问题 • 2 人关注 • 1 个回复 • 898 次浏览 • 2016-04-06 12:50 html5 Canvas

border 0.5px solid #000 在x5内核的浏览器不显示

回复

xianjijida7218 回复了问题 • 1 人关注 • 1 个回复 • 221 次浏览 • 2017-03-15 08:35 html5 css3

html5有一点经验,各位大神有什么好的书推荐一下

回复

hh337 回复了问题 • 3 人关注 • 3 个回复 • 308 次浏览 • 2016-09-11 15:50 html5 css3

HTML5里面的header/aside/article/section等标签有必要用吗

回复

lisilzb 回复了问题 • 8 人关注 • 7 个回复 • 429 次浏览 • 2016-09-10 16:00 html5 css css3

网页开发里如何让图片只显示中间部分的内容

回复

liugaode 回复了问题 • 5 人关注 • 4 个回复 • 317 次浏览 • 2016-09-09 20:00 html5 css3

select中option悬停的时候是系统的默认蓝底白字.能干掉默认的样式吗?

回复

miccan123 回复了问题 • 2 人关注 • 1 个回复 • 574 次浏览 • 2016-09-07 20:50 html5 css css3

关于css动画. 走3秒。停3秒。再走三秒。

回复

moonzhel 回复了问题 • 5 人关注 • 4 个回复 • 320 次浏览 • 2016-09-07 20:00 html5 css css3 javascript

这些网页用到了哪些前端技术?

回复

ziyiyeqing 回复了问题 • 4 人关注 • 4 个回复 • 355 次浏览 • 2016-09-03 21:50 html5 javascript css3 Canvas

CSS3动画切换背景图的过度幻影如何解决?

回复

jacsondct 回复了问题 • 2 人关注 • 1 个回复 • 342 次浏览 • 2016-08-31 18:50 html5 css3

网页界面有哪些字体是值得尝试的?

回复

weixiaozhuo123 回复了问题 • 5 人关注 • 4 个回复 • 441 次浏览 • 2016-08-29 13:00 html5 css3 css

h5响应式问题

回复

dddjg 回复了问题 • 8 人关注 • 8 个回复 • 320 次浏览 • 2016-08-29 12:50 html5 css3

css3如何实现这种弯曲箭头的渐变显示?

回复

ooxx1457 回复了问题 • 4 人关注 • 3 个回复 • 403 次浏览 • 2016-08-29 10:00 html5 css3

前端大神们更倾向于使用哪个工具,才会让自己显得牛兼顾效率?sublime?

回复

justcby 回复了问题 • 27 人关注 • 33 个回复 • 338 次浏览 • 2016-08-25 21:50 html5 javascript css3 css

ios css3阴影用不起来

回复

royt123 回复了问题 • 2 人关注 • 1 个回复 • 361 次浏览 • 2016-08-23 21:50 html5 css3

关于HTML5的布局问题!

回复

qweqwe 回复了问题 • 7 人关注 • 7 个回复 • 377 次浏览 • 2016-08-20 09:50 html5 css css3

提供css兼容性语法的网站

回复

hh337 回复了问题 • 4 人关注 • 3 个回复 • 304 次浏览 • 2016-08-19 13:50 html5 css css3

移动端开发 解决特殊字体

回复

cgj1024 回复了问题 • 6 人关注 • 5 个回复 • 394 次浏览 • 2016-08-17 17:50 html5 css3

css如何实现播放和暂停图标的无缝切换

回复

jacsondct 回复了问题 • 2 人关注 • 1 个回复 • 457 次浏览 • 2016-08-13 14:50 html5 css css3 javascript

html5手机页面如何禁止长按保存图片?

回复

abc21243183 回复了问题 • 3 人关注 • 2 个回复 • 839 次浏览 • 2016-08-12 22:12 html5 css css3

移动端前端开发面试主要问哪些问题?

回复

hongboict 回复了问题 • 2 人关注 • 1 个回复 • 320 次浏览 • 2016-08-06 18:50 html5 css3 javascript

第22章 CSS渐变效果

supergaryli 发表了文章 • 0 个评论 • 141 次浏览 • 2016-09-16 14:51 html5 css3

HTML5实践 -- 如何使用css3丰富我们的图片样式 - part2

lisilzb 发表了文章 • 0 个评论 • 145 次浏览 • 2016-09-15 12:00 html5 css3

使用 HTML5 Pack for Dreamweaver CS5

jackch1886 发表了文章 • 0 个评论 • 144 次浏览 • 2016-09-11 16:00 html5 css3

HTML5和CSS3参考资源与教程

sxzhustar 发表了文章 • 0 个评论 • 206 次浏览 • 2016-09-11 14:00 html5 css3

几个 HTML5 动画效果

zzkzhou521 发表了文章 • 0 个评论 • 148 次浏览 • 2016-09-08 18:00 html5 3D css3

HTML5 and CSS3

royt123 发表了文章 • 0 个评论 • 100 次浏览 • 2016-09-07 10:00 html5 css3

HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

jingxing231 发表了文章 • 0 个评论 • 188 次浏览 • 2016-09-06 14:00 html5 css3 css

那些不错的 [ Html5 + CSS3 + Canvas ] 效果!

bigzerg 发表了文章 • 0 个评论 • 247 次浏览 • 2016-09-06 10:00 html5 css3 Canvas

15个好用的CSS3和HTML5模板框架

chenfulai 发表了文章 • 0 个评论 • 252 次浏览 • 2016-09-04 20:00 html5 css3

Web前端开发人员和设计师必读文章推荐【系列七】

heartche 发表了文章 • 0 个评论 • 116 次浏览 • 2016-09-04 12:00 html5 css3

14款超时尚的HTML5时钟动画

shiskype 发表了文章 • 0 个评论 • 431 次浏览 • 2016-09-03 16:00 html5 css3 jquery javascript

8个超炫酷仿苹果应用的HTML5动画

arslxy111 发表了文章 • 0 个评论 • 288 次浏览 • 2016-09-02 10:00 html5 jquery css3 3D

30个HTML5学习资源

bookseto 发表了文章 • 0 个评论 • 175 次浏览 • 2016-08-28 20:00 html5 css3 javascript

7 款华丽的 HTML5 Loading 动画特效

xtbda 发表了文章 • 0 个评论 • 99 次浏览 • 2016-08-28 16:00 html5 css3 javascript

HTML5+CSS3 W3C规范中文版参考手册(提供下载)

lybkf 发表了文章 • 0 个评论 • 207 次浏览 • 2016-08-27 14:00 html5 css3

50 个最佳 CSS3 教程大放送

Kevinmajh1 发表了文章 • 0 个评论 • 130 次浏览 • 2016-08-27 12:00 html5 css3

10款很酷的HTML5动画和实用的HTML5应用

qishiwotinghao 发表了文章 • 0 个评论 • 265 次浏览 • 2016-08-26 18:00 html5 3D css3

谈HTML5和CSS3的国际化支持

mercury74 发表了文章 • 0 个评论 • 333 次浏览 • 2016-08-26 10:00 html5 css3

解决跨浏览器问题网站收集

lisilzb 发表了文章 • 0 个评论 • 298 次浏览 • 2016-08-25 14:00 html5 javascript css3

HTML5高防win8风格

hongboict 发表了文章 • 0 个评论 • 130 次浏览 • 2016-08-23 10:00 html5 css3

CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。