css3

css3

js的阻止默认事件e.preventDefault();要写在函数第一行吗?为什么呢?

shuishou125 回复了问题 • 3 人关注 • 2 个回复 • 23 次浏览 • 7 小时前 html5

纯CSS可否实现如下表格的阴影效果?

abc21243183 回复了问题 • 3 人关注 • 2 个回复 • 23 次浏览 • 7 小时前 html5

对布局没影响的浮动,不清除,有关系吗?

mercury74 回复了问题 • 2 人关注 • 1 个回复 • 22 次浏览 • 8 小时前 html5

clipboard.js复制列表中的数据的时候,总是复制第一列的数据

supergaryli 回复了问题 • 2 人关注 • 1 个回复 • 23 次浏览 • 8 小时前 html5

h5页面js如何实现每人每天投三票?

chinaray2010 回复了问题 • 4 人关注 • 3 个回复 • 29 次浏览 • 9 小时前 html5

前端CORS跨域怎么兼容IE9

gongjizhu 回复了问题 • 2 人关注 • 1 个回复 • 25 次浏览 • 9 小时前 html5

element-ui的tree组件节点过多时如何进行优化。

wangxinghai 回复了问题 • 2 人关注 • 1 个回复 • 27 次浏览 • 10 小时前 html5

知道别人网站登录账号和密码 ,前端或者后台怎么设置可以不用登录直接成为已登录状态?

bigzerg 回复了问题 • 7 人关注 • 6 个回复 • 41 次浏览 • 10 小时前 html5

vue 内嵌 app 多次点击后 事件机制 失效

promise1986 回复了问题 • 3 人关注 • 2 个回复 • 32 次浏览 • 11 小时前 html5

git 项目输出日志

zzkzhou521 回复了问题 • 2 人关注 • 1 个回复 • 31 次浏览 • 12 小时前 html5

select样式出不来

hh337 回复了问题 • 3 人关注 • 2 个回复 • 36 次浏览 • 12 小时前 html5

flexible.js移动端适配字体大小设置

lvzq2016 回复了问题 • 2 人关注 • 1 个回复 • 35 次浏览 • 13 小时前 html5

WebSocket connection 报错

cc25937795 回复了问题 • 3 人关注 • 2 个回复 • 35 次浏览 • 13 小时前 html5

使用vue 文件上传 后进行跨域,本地可以 但是打包到服务器上出现了问题

lvqiang123 回复了问题 • 2 人关注 • 1 个回复 • 36 次浏览 • 14 小时前 html5

jquery的append()移动元素的问题

fengsuiyingdong 回复了问题 • 6 人关注 • 5 个回复 • 48 次浏览 • 14 小时前 html5

用elementui给的脚手架生成的vendor.js是干什么用的?

yanchangshan 回复了问题 • 4 人关注 • 3 个回复 • 42 次浏览 • 14 小时前 html5

请问火狐浏览器如何用纯css修改其滚动条呢。

yanchangshan 回复了问题 • 2 人关注 • 1 个回复 • 35 次浏览 • 15 小时前 html5

angular4.0 导航到一个页面后,浏览器scroll 不是从顶部来开始的!

tongshuo1990 回复了问题 • 2 人关注 • 1 个回复 • 41 次浏览 • 16 小时前 html5

ECharts图中,Y轴上,数据几等分的规律是什么

xiangkun404gg 回复了问题 • 3 人关注 • 2 个回复 • 45 次浏览 • 16 小时前 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 个回复 • 403 次浏览 • 2016-12-27 11:22 html5

让 HTML5 来为你定位

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

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

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

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

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

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

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

CSS3入门教程 - CSS3 多列

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

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

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

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

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

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

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

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

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

使用CSS修改HTML5 input placeholder颜色

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

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

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

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

回复

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

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

回复

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

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

回复

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

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

回复

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

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

回复

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

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

回复

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

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

回复

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

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

回复

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

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

回复

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

h5响应式问题

回复

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

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

回复

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

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

回复

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

ios css3阴影用不起来

回复

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

关于HTML5的布局问题!

回复

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

提供css兼容性语法的网站

回复

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

移动端开发 解决特殊字体

回复

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

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

回复

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

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

回复

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

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

回复

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

第22章 CSS渐变效果

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

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

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

使用 HTML5 Pack for Dreamweaver CS5

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

HTML5和CSS3参考资源与教程

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

几个 HTML5 动画效果

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

HTML5 and CSS3

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

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

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

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

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

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

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

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

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

14款超时尚的HTML5时钟动画

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

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

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

30个HTML5学习资源

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

7 款华丽的 HTML5 Loading 动画特效

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

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

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

50 个最佳 CSS3 教程大放送

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

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

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

谈HTML5和CSS3的国际化支持

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

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

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

HTML5高防win8风格

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

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