展开

关键词

CSS进阶04-块格式化文BFC

同一个块格式化文中的相邻块级盒的垂直外将折叠。 在一个块格式化文中,每个盒的左外紧贴包含块的左(从右到左的格式里,则为盒右外紧贴包含块右),即使有浮动参与也是如此(尽管盒里的行盒可能由于浮动而收缩),除非盒创建了一个新的块格式化文 3.2在一个块格式化文中,每个盒的左外紧贴包含块的左(从右到左的格式里,则为盒右外紧贴包含块右),即使有浮动参与也是如此(尽管盒里的行盒可能由于浮动而收缩),除非盒创建了一个新的块格式化文 如果该元素有块级子元素,其高度为最块级子盒的到最块级子盒的离。 绝对定位子元素会被忽略,相对定位盒不需要考虑其位移。注意子盒可能是匿名块盒。 此外,如果该元素有低于该元素内容的浮动子元素,那么高度将增大来包含那些。只有参与本块格式化文的浮动才考虑在内,比如,在绝对定位后代中的或者其他浮动中的浮动就不考虑。

22730

CSS进阶07-浮动Floats

左浮动盒的右外不可在其旁的右浮动盒的左外之右。右浮动元素亦是。 浮动盒的不可高于其包含块的顶部。当浮动出现两个折叠外时,浮动会如同它有一个参与标准流的空匿名父块一样来定位。 该父块的位置由关于外折叠那章的规则定义。 浮动盒的不可高于源文档中此前元素生成的块盒或浮动盒的。 元素的浮动盒的不可高于源文档中此前元素生成的盒所在的行盒的顶部。 空隙阻止外折叠并充当元素margin-top之的空。空隙被用于推动元素在垂直方向越过浮动。 如果元素的假定位置没有越过有关浮动,那么空隙就会产生,并且外折叠要根据8.3.1章规则计算。

说明:要是没有 clear ,首段和末段两个段落的将会折叠并且末段的将同浮动段落的顶部齐平。如: ? 但 clear 使得低于浮动,即降2em。

40340
  • 广告
    关闭

    腾讯云+社区系列公开课上线啦!

    Vite学习指南,基于腾讯云Webify部署项目。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web前端基础(03)

    auto; (注意这是让元素自身居中,text-align:center是让元素里面的文本在元素内部居中) 左赋值: margin:10px 20px 30px 40px; 顺时针 相邻两个元素的外取最大值 ,左右相邻求和 粘连问题: 当元素的级元素的重叠时,给元素添加会出现粘连显示异常,给级元素添加overflow:hidden解决,给级元素添加框也可以解决(修改了元素原来的样子 什么是内: 元素内容的离称为内. 20px; 左赋值: padding:10px 20px 30px 40px; 顺时针 修改元素的内会影响元素的宽高 如果需要移动元素内的子元素有两种方式: 给大元素添加内去移动里面的小元素 width:50px; height:50px; background-color: green; margin-left: 50px; /*粘连问题:当元素的级元素的重叠时

    13920

    HTML第五课——css盒子模型【2】

    ---- 继续讲我们的盒子模型 由于现在浏览器有可能会自动给你的代码加margin或者padding,我们经常在css文件中先设置一这两个属性值为0: html, body{ margin: 0px; padding: 0px; } 此时,我们再看一,样式(把次的代码再给大家粘贴一): lesson4.html <! 再来说一——margin,我们修改我们的代码为: lesson4.html <! 现在又出现了另一个问题,就是大家发现面两个盒子中多了一个空白的地方,而且空白地方无法选中,说实话如果你用inline-block那么中这个就是默认自带的了(如果非要去掉就要加float: left 现在我们盒子和浏览器是没有的,现在我们希望它离浏览器有一段离,我们加一个margin: 10px;属性,然后再看: ? 我们看到它和浏览器之有了,我们再来看一现在盒子的大小: ?

    51730

    三种方式实现轮播图功能

    ,对于特殊处理,将第一张轮播图追加到一行图片之后,当切换到最后一张轮播图时,一张即播放第一张图,当此图轮播完成后,将所有图片归位,提供两个DEMO,第一个是单纯的轮播不存在任何控制按钮,第二个则比较完善 0 if(++curIndex === imgArr.length){ // index加1,判断是否为最后一张来作处理 li.appendChild(img); // 追加

  • slideContainer.appendChild(li); // 将第一张图片追加到轮播图的最后,作处理 -- 加入控制按钮,一张与一张,直接切换按钮 将第一张图片的化进行处理 对浏览器页面显隐与鼠标移入移出事件的支持 --> <! targetIndex; // 设置当前index if(curIndex === imgArr.length){ // index加1,判断是否为最后一张来作处理

    39920
  • 一篇文章带你了解CSS基础知识和基本用法

    inset框 outset 3D outset框也有四面,所以也会有左右 所以有时候为了更精确定位并修改样式可以使用: border-top-style 框样式 border-right-style 如果定义一个length 参数,那么定义的是水平和垂直 如果定义两个length 参数,那么第一个设置水平,而第二个设置垂直 4)).表格标题的位置 caption { caption-side e-resize 指示矩形框的可被向右(东)移动 ne-resize 指示矩形框的可被向及向右移动(北/东) nw-resize 指示矩形框的可被向及向左移动(北/西) n-resize 指示矩形框的可被向(北)移动 se-resize 指示矩形框的可被向及向右移动(南/ 东) sw-resize 指示矩形框的可被向及向左移动(南/西) s-resize 指示矩形框的可被向移动(南) w-resize

    13520

    【CSS】410- 关于CSS盒子模型、BFC及其应用

    BFC 原理 BFC 即 Block Formatting Contexts, 翻成中文是 块级格式化文. 只要元素触发以任意一条, 便视其具有 BFC 特性(创建BFC的方式): html根元素 float浮动 绝对定位 overflow不为visible display为表格布局或者弹性布局 BFC 在BFC中,每一个盒子的左外(margin-left)会触碰到容器的左(border-left)(对于从右到左的格式来说,则触碰到右) 形成了BFC的区域不会与float box重叠 计算BFC BFC主要的作用: 清除浮动 防止同一BFC容器中的相邻元素垂直方向的外重叠问题 举例 1. 同一个 BFC 的两个块级元素之的外会发生折叠. ? 但它们之离却只有 100px, 并不是想象中的 (100 + 100)px. 这是因为它们之的外折叠了. 你可以这样理解, 只有一个外起作用了.

    23320

    border、margin、padding属性的区别

    可以先看这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml 本文参考:http://www.cnblogs.com/chinhr/archive /2008/06/20/1227084.html http://www.cnblogs.com/time-is-life/archive/2008/01/21/1046817.html http:/ /www.cnblogs.com/tianyue3107/archive/2009/04/22/1441358.html Margin 与 Padding 的区别 1.Margin 用来设置页面中一个元素所占空到相邻元素之离 . 2.Padding 用来设置元素内容到元素界的离。
    Div1这里 height:60px;需要用60px-10px(减除 padding-top的内离),才能高度和DIV2的60ox保持一致。

    26920

    原生JS实现移动端滑动反弹

    我们可以看面的图片,在 changedTouche[0]中,有些值: clientX:74    // 触摸点相对于浏览器的 viewport 左的 x 坐标,不会包括左的滚动离。 clientY:73    // 触摸点相对于浏览器的 viewport 的 Y 坐标,不会包括的滚动离。 screenX:2202  // 触摸点相对于屏幕左的 x 坐标。 screenY:327   // 触摸点相对于屏幕的 Y 坐标。 pageX:65      // 触摸点相对于 document 的左的 x 坐标,包括左的滚动离 pageY:18      // 触摸点相对于 document 的的 Y 坐标,包括的滚动离 限制向滑动最大区 设定向最大区的值比较简单,直接设定一个值,当一次滑动的离加本次滑动的离大于这个值的时候,就不让它再继续往滑了,让他直接等于这个设定的值。

    1.4K20

    网页布局基础

    由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面时,会自动换行)和行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。 CSS盒模型本质是一个盒子,封装周围的HTML元素,它包括:外(margin)、框(border)、内(padding)、盒子中的内容(content). 在三维空中,盒子模型由分为五层: 框(border)位于第一层; 内(padding)和盒子中的内容(content)位于第二层; 背景图像(background-image)位于第三层; 也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从一个接一个地排列,框之的垂直离是由框的垂直外计算出来。 行内框在一行中水平布置。 可以使用水平内框和外调整它们的。但是,垂直内框和外不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。

    89520

    css定位

    比如 p.inline { display:inline;//行内元素,block为块级元素,none不显示 } 块级框从一个接一个地排列,框之的垂直离是由框的垂直外计算出来。 可以使用水平内框和外调整它们的。但是,垂直内框和外不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。 #box_relative { position: absolute; left: 30px; top: 20px; } 这样元素就会出现在离页面的左框30px框20px的地方。 浮动 浮动的框可以向左或向右移动,直到它的外碰到包含框或另一个浮动框的框为止。 这个就很有意思,其实浮动感觉像是起了另一层的文档流。 w3school.com.cn w3school面讲得就很清楚,而且看到这三张图,真的有那种,浮动的感觉,水流流向左,树叶(块级元素)碰到了岸(页面),卡住,一片树叶流过去卡住,卡满了就被冲到

    15120

    Java学习笔记-全栈-web开发-02-css必备基础

    top:定义了定位元素的界与其包含块界之的偏移量 right: 定义了定位元素右外界与其包含块右界之的偏移 left: 定义了定位元素左外界与其包含块左界之的偏移 bottom : 定义了定位元素界与其包含块界之的偏移。 元素框的最内部分是实际的内容,直接包围内容的是内。内呈现了元素的背景。内框。 常用属性: margin:简写属性,在一个声明中设置所有外属性 margin-top:定义元素的 margin-right:定义元素的右外 margin-bottom:定义元素的 如果缺少左外的值,则使用右外的值。 如果缺少的值,则使用的值。 如果缺少右外的值,则使用的值。 6.3 外 元素的内框和内容区之

    7630

    CSS进阶05-行内格式文IFC

    在行内格式化文中,盒从包含块的顶部开始一个接一个地水平摆放。盒水平方向的外框和内在布局时都会考虑在内。盒的垂直对齐方式则不一:可能按底部或者顶部对齐,又或者按它们内容文本的基线对齐。 行盒的宽度 一般来说,行盒的左紧贴其包含块的左,其右紧贴包含块的右。然而,浮动盒可能被置于包含块和行盒。 因此,尽管在同一行内格式化文中的行盒是等宽的(包含块的宽度),由于浮动会造成可用的水平空减少,行盒的宽度仍可能变动。 当行内盒被分割,外框和内在任何断点处都不会产生视觉影响。 行内盒也可能由于双向文本处理而在一个行盒内被切割成多个盒。 为了包含行内格式化文中的行内级内容,行盒按需创建。 image.png 可以看到: 外插在了 emphasized 之前和 words 之后 内被插在了 emphasized 之前、, words 值后、

    25330

    什么是 CDN 服务器 - Edge Server

    CDN 服务器是存在于网络逻辑极端或“”的计算机。 服务器通常用作不同网络之的连接。 为了使连接在 Internet 移动,它通常会接触许多网络并跨越许多网络节点。一般来说,连接必须走得越远,必须穿过的网络数量就越多。 如果没有 CDN,传输可能会在源和目的地之采用更慢和/或更复杂的路线。 在最坏的情况,流量将“长号”远离; 当连接到街对面的另一台设备时,连接可能会在全国范围内移动并再次返回。 这会增加加载时,这会增加服务器与发出请求的客户端机器的离。 CDN 服务器在战略位置存储(缓存)内容,以便减轻一个或多个源服务器的负载。 通过将图像、HTML 和 JavaScript 文件(以及可能的其他内容)等静态资产尽可能靠近发出请求的客户端机器,服务器缓存能够减少加载 Web 资源所需的时

    28110

    前端基础:CSS

    派生选择器允许根据文档的文关系来确定某个标签的样式。通过合理地使用派生选择器可以使 HTML 代码变得更加整洁。 同样,还允许增加行。 元素的水平方向浮动,意味着元素只能左右移动而不能移动。 一个浮动元素会尽量向左或向右移动,直到它的外碰到包含框或另一个浮动框的框为止。浮动元素之后的元素将围绕它。 轮廓和框的区别:框 (border) 可以是围绕元素内容和内的一条或多条线;轮廓(outline)是绘制于元素周围的一条线,位于的外围,可起到突出元素的作用。 盒子模型 CSS盒子模型本质是一个盒子,封装周围的 HTML 元素,它包括:框,填充,和实际内容。

    16620

    理解CSS布局和块格式化

    [image.png] 在进行html布局及css编写的时候,你是否遇到过这样的问题: 子元素设置浮动脱离文档流后,父元素无法将其完全包裹 子元素浮动实现两栏布局时,另一个子元素与浮动子元素重叠 垂直方向的外 FC(formatting context)直译过来是格式化文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之的关系和作用。 [image] 但事实,float中的文字已经脱离文档,如果文档流文字过少,浮动元素就会溢出父元素。 外折叠的规则是:当两个块级元素相邻并且在同一个块级格式化文时,它们垂直方向的外会产生重叠 html

    Android入门教程(三)-安卓UI文档教程

    ”android:layout_below 在某元素的方android:layout_above 在某元素的的方android:layout_toLeftOf 在某元素的左android:layout_toRightOf 在某元素的右android:layout_alignTop 本元素的和某元素的的对齐android:layout_alignLeft 本元素的左和某元素的的左对齐android :layout_alignBottom 本元素的和某元素的的对齐android:layout_alignRight 本元素的右和某元素的的右对齐第三类:属性值为具体的像素值,如30dip ,40pxandroid:layout_marginBottom 离某元素底离android:layout_marginLeft 离某元素左离android:layout_marginRight 离某元素右离android:layout_marginTop 离某元素离代码例子可以参考github链接: https://github.com/huangguangda/RelativeLayoutTableLayout

    5820

    相关产品

    • 云服务器

      云服务器

      云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。 腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券