• 关于

    .块元素居中

    的搜索结果

问题

【精品问答】前端面试手册之CSS篇

前端问答 2019-12-01 22:04:46 42 浏览量 回答数 1

问题

在网页中加入一个瀑布流效果(jQuery)

小旋风柴进 2019-12-01 20:23:34 1091 浏览量 回答数 1

问题

【精品问答】前端开发必懂之CSS技术八十问

茶什i 2019-12-01 22:00:52 1642 浏览量 回答数 1

阿里云域名特惠专场,热门域名1元抢购!

全网低价特惠,顶级域名低至1元,更有96元/年服务器限时抢购!

问题

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

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

回答

LZ应该能注意到,如果第三个DIV的top值是其他单位的值,它的偏移是有效的吧?所以不是position不起作用,而是top不起作用。 第一,top、bottom、height属性的百分比值是相对于包含块的高度计算的。 第二,包含块判定方式,见W3help知识库:包含块或W3C。因此.three的包含块是.two的内容区域content-edge。 第三,position:absolute的元素有这样的特性: 高度塌陷:它对外层不占位,无法撑高或者撑宽父级元素默认包裹:除非限制position:absolute元素的高宽,它的默认值width:auto;height:auto将导致它自己适应于自己的内容区域。w3c: 10.6.7 'Auto' heights for block formatting context rootsIf it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.好的,我们可以画出依赖关系了: .two的高度——依赖于——>.three的高度(第3点,默认包裹).three的偏移量——依赖于——>.two的高度(第1、2点,包含块计算)这样看似可以得到一个.three的偏移量——依赖于——>.three的高度的结论。实现方式还是跟浏览器有关的,需要看浏览器允不允许这种递归式的计算,height:auto参与计算的具体实现方式是怎样的。 根据我的测试,IE7能算出来期望的top值,而IE8/9,chrome、safari、firefox则都算出来为0。考虑到IE7以后CSS2.1才正式提出,可能相应标准中已经有阐述了(只是我没有找到)。如果W3C标准中有相应内容的阐述,请不吝指出。 最后,这个是满足不了垂直居中的需求的。你可能需要的是在.two上面加上transform:translateY(-50%)等属性,让它偏移自身高度的一半(或者手动算出这个值,用负margin来做)。

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

问题

H5技术百问——不懂H5你就OUT啦

yq传送门 2019-12-01 20:27:41 42586 浏览量 回答数 47

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习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
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站