• 关于 单位元素问题怎么解决 的搜索结果

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。以下都是我自己所想,希望可以帮到和我一样的初学者。 为了彻底明白这个问题,必须先弄明白几个问题。 :第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。 第一,绝对定位与浮动的区别。 复制代码代码如下: <body> <div id="container"> <div id="A">你好</div> <div id="B"> 第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。 </div> </div> </body> 绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。例如,对于上面的html片段,如果将元素A定位到左上角的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。CSS代码和效果图如下。 复制代码代码如下: body { color:#FFF; } container { position:relative; width:500px; height:250px; background:#039; } A { position:absolute; top:0; left:0; width:200px; height:200px; background:#C00; } 代码如下: 而浮动,会以某种方式将浮动元素从文档的正常流中删除,并把浮动元素向左边和右边浮动,不过它还是会影响布局,关于浮动的有许多规则,读者可自行阅读《CSS权威指南》一书,介绍地很详细。采用CSS的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。如果将元素A向左浮动的话,CSS代码和效果图如下图所示。由此可见,浮动之后,文字跑到了元素A的右边,即实现了文字环绕浮动元素的功能(如果A不浮动的话,div是块级元素,不可能有两个div处在同一行)。 但是这儿有一小问题,如果你仔细观察CSS代码的话和效果图的话,会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流,是因为元素B确实占据了元素A之前的位置,好像元素A已经不存在了似的。只所以说会影响布局,是因为元素B里的文字并没有随之占据元素A的位置,而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了,这恰好就是浮动的目的! 复制代码代码如下: body { color:#FFF; } #container { width:500px; height:250px; background:#039; } #A { float:left; width:200px; height:200px; background:#C00; } #B { width:480px; height:230px; background:#000; CSS布局实例 大家感兴趣的内容1css控制UL LI 的样式详解(推荐)2HTML设置超链接字体颜色和点击后的字体颜色3div水平垂直居中的完美解决方案4CSS 漂亮搜索框美化代码5CSS 首行缩进两个文字6css 中的background:transparent到底是什么意思有什么7CSS自定义select下拉选择框的样式(不用其他标签模拟)8css textarea 高度自适应,无滚动条9css 设置全屏背景图片10CSS圆角效果 -webkit-border-radius(CSS3中border-rad 云服务器 . 最近更新的内容深入剖析z-index属性CSS中的content属性使用教程浅析CSS中calc()的使用CSS3定位和浮动详解CSS盒子模型是什么一些常被你忽略的CSS小知识【必看】CSS默认可继承样式详解知识普及之CSS: body{font-size: 62.5%;}这种写法的原知识普及:彻底搞懂CSS中单位px和em,rem的区别CSS教程之div垂直居中的多种方法.

杨冬芳 2019-12-02 02:40:29 0 浏览量 回答数 0

问题

在width值与浏览器宽度是固定比例的情况下,css怎么设置div的高恒等于宽?

杨冬芳 2019-12-01 19:55:52 1382 浏览量 回答数 1

回答

这个问题只能是泛泛而谈,具体到每一项在实际中都会有更深层次的细节问题需要考究。抛开具体的案例不说,我就谈谈我自己的一些做法。不过有一个前提:对我来说,我自己既是设计师也是前端,所以我做设计的时候会刻意忘记许多平面设计的原则,或者刻意考虑很多前端实践的原则,因此我写代码和我做设计这两件事情对我个人而言其实是一体的。之所以要先讲这个原则,是因为很多人强调“精确到像素的页面实现”,但如果前端工程师自己并不做 UI 设计,想达到这一目标可以说几乎不可能,而且我个人也觉得是没有必要的——如你题目所说,有那么多的变量影响(平台/设备等差异),强求所有的 outcome 都做到“像素级精确”真的有意义吗?倒是“渐进增强”或“平稳退化”更具实践价值。字体问题让不同的平台显示自身的最佳字体这在技术上是完全可行的,具体请见拙作:Web 中文字体应用指南(请不要在意文中对微软雅黑的评价,纯属个人偏好)排版问题你的问题描述的不是很清楚,我不太明白“当字体大小不一样时”这个条件和行高之间的对应关系对你来说困惑在哪里?仅就行距来说,遵循一个原则就可以:行高用相对单位不同的区域可能会显示不同尺寸的字体,但是不要用绝对尺寸来区隔它们,而是要学会使用 rem 和 em。有了这两个单位来控制字体大小,再加上 line-height 采用相对值,那么行高将始终保持在一个统一的,协调的比例。特定的地方如果要改变行高的比例,也不一定非要使用绝对值(绝对值的问题就是不能自适应),如果你使用 Sass/Less/Stylus 这样的预处理工具,可以利用一下各种函数计算出一个相对比例。详细参数?第三个问题也比较含糊,你所说的“详细参数”,具体是指?如果涉及到盒模型,别忘了调整 box-sizing,也别忘了重置各种元素的初始状态(比如用 Normalize),这样可以较好的应对跨平台的尺寸定义。尽量不要在具体的样式定义里写固定值,而是预先初始化一些值作为变量,然后在具体样式中依靠相互关系来写计算值——当然,前提是你可以用预处理器/CSS3 的 calc()(尚未标准化)。关于这一点,请参考一下 Bootstrap 的做法,很典型的范例。另外,使用框架(如 Bootstrap)可以在尺寸和布局定义上省下很大的功夫,但是框架在很多精细自定义布局的场景下显得冗余/死板。我倒是推荐使用像 Susy 这样的工具库,相当灵活强大,生成的 CSS 也非常漂亮。平台差异这是一个大坑,设备碎片化所带来的兼容性处理问题可能永远也无法完美解决。这个话题并不适合在这里铺开来谈,那得说多少啊……我觉得还是和设计师多多沟通才是王道,不要试图用技术来解决本来可以通过沟通而解决的问题。(我在最开始所说的前提主要就是为了表明这一点——我和“自己”沟通没有障碍)动态效果动态效果即使没有在设计图上呈现,也不代表设计师没有考虑过吧?这事儿你得和设计师沟通啊,确定了有哪些动态效果之后才能考虑工程上的实现以及跨平台的兼容性处理等问题,否则的话你甭做动态效果就好了呗。至于确定之后如何做具体的技术实现,我建议不要重复造轮子了,现成的效果库一堆一堆的,直接拿来用吧。当动态效果遇到兼容性问题的时候还可以直接救助于作者或社区。CSS 复用/模块化这事儿不是设计师需要考虑的,这可是开发者的职责范围。如果设计师在做设计稿的时候还要想办法把样式模块化给梳理出来,那他的负担也太大了点。复用/模块化这件事情,如果团队里没有使用框架系统需要从头做起,那我觉得还是不要过早优化为好,有很多抉择不到一定时候是很难明朗化的,所以开发届也一再强调不要过度/过早优化。然而很多时候由于项目时间紧压力大,如果没有章法的干活,等到想重构想模块化的时候,就发现代码已经乱的不可收拾了。可怎么办呢?重构本来就是一种无法速成并且迅速见效的技术,高质量的重构需要整个团队的共同努力。你问怎么疏离?这问题可太大了,你叫我怎么回答呢……(在这里,我真的歪着脖子想了半天该怎么回答)这样吧,分两个情况:倘若整个团队只有一个人(或极个别人)来负责复用/模块化,那么这个(些)人就尽可能不要去写具体的样式了,而是把精力集中在审核其他成员提交的代码上,严格控制代码提交的规范和粒度。通过代码审核来分析和设计样式模块化的方案,然后每隔一段时间召集其他成员一起进行一次重构(重构的具体方案取决于之前代码审核的结果)。不断重复这个过程(其实就是快速迭代的思想)。如果整个团队都有能力在自己负责的部分做复用/模块化设计,那么在项目开始前先一起讨论一下大致的规则约束。团队可以在一些比较成熟的方案里选择一个,比如 BEM/OOCSS/ACSS/SMACSS 等等,一起学习一下,达成共识。接下来照做就是了,定期的审核与讨论还是需要的,不过就不用太过频繁了(因为大家水平都够高呗)。我知道在这个问题上你期望更具体的技术/技巧,但实话说这个话题实在太宽泛了些,很难找个合适的切入点。建议题主还是少一些这样泛泛的问题吧,先挑个方向走进去,碰到具体问题再拿出来大家一起研究研究,这样才比较容易出干货——比如我上面提到的那几个模块化方案,不妨先挑一个试试看再说如何?

a123456678 2019-12-02 02:21:39 0 浏览量 回答数 0

新用户福利专场,云服务器ECS低至96.9元/年

新用户福利专场,云服务器ECS低至96.9元/年

问题

【精品问答】Python数据爬取面试题库100问

珍宝珠 2019-12-01 21:55:53 6502 浏览量 回答数 3

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1

问题

【精品问答】python技术1000问(1)

问问小秘 2019-12-01 21:57:48 448858 浏览量 回答数 12

问题

【今日算法】4月30日-回溯算法详解

游客ih62co2qqq5ww 2020-04-30 14:13:51 9 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 云栖号物联网 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播