文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。...在设置width:100%后，子元素“溢出”了父元素 【注意】宽度默认为width:auto，但高度默认height:0 二.浮动/定位对width:auto和width:100%的影响 1.浮动/定位对...-100percent的宽度变成了body也就是全屏的宽度 ?...“标准流”，那么： 1.浮动流顺序排列，这个顺序是和HTML中元素的顺序一致的,HTMl中先浮动的元素排在前面，这个“前面”指的是靠近屏幕边缘的一端，“后面指的是远离屏幕的一端” 以上面的例子为基础 ....其他元素的只能跟在“领头浮动元素”的后面 但即使其他元素的没有跟在“领头元素”的后面，而是向相反方向浮动，也始终不能高于“领头浮动元素” .div2,.div3{ float: left; }

2.8K110

django 之菜鸟学习CSS与html.

二、自动居中一列布局 关键词：标准文档流，块级元素，margin属性 自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。   ...auto会根据浏览器的宽度自动地设置两边的外边距 如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性 代码示例： 一列布局固定： html> ...；仍处于标准文档流中；随即拥有偏移属性和Z-index属性 absolute（绝对定位）——特点：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性 ( 1）未设置偏移量...注：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节   fixed（固定定位） 使用absolute实现横向两列布局——常用于一列固定宽度，另一列宽度自适应的情况 主要应用技能....right{ width:80%; height:600px;background:#FCC; float:right}/*宽度设置为百分数，以实现自适应*/ </

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

    Rem布局的原理解析

    和1x就等价了 html {fons-size: width / 100} p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */ 如何让html字体大小一直等于屏幕宽度的百分之一呢...图标类的，图片类的，比如淘宝，活动页面，比较适合使用rem，因为调大字体时并不能调大图标的大小 rem可以做到100%的还原度，但同事rem的制作成本也更大，同时使用rem还有一些问题，下面我们一一列举下...： 首先是字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小...我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小 html {fons-size...clientWidth : 780; document.documentElement.style.fontSize = clientWidth / 100 + 'px'; 设置body的宽度为100rem

    1.6K20

    【小程序_02】布局方式

    我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 ?...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...”即可 ​ ④ 检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可 3.3 less 变量 @变量名:值; 必须有@为前缀 不能包含特殊字符 不能以数字开头 大小写敏感 @color...: pink; div { color: @color; } 3.4 less 编译 HTML 不能直接使用 less 文件，需要将其编译生成 css 文件后 HTML 页面才能使用 3.5

    1.8K20

    网页布局基础

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 元素的宽度和高度： 重要: 当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。...为一个定值，子层设置width为100%（以父包含块宽度为准自适应）。...原理：（浏览器宽度-外包层宽度）／2 = 外边距 如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性 。...6.清除浮动的常用方法 1.为受到浮动影响的元素设置clear属性 - clear：both； 2.为受到浮动影响的元素同时设置width：100%（或固定宽度）+overflow：hidden； 3、...2.完全脱离了标准文档流，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

    2.3K20

    CSS基础

    1.要给居中的元素一个宽度，否者无效。 2.该元素一定不能浮动，否者无效。 3 在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。...定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...div> body> html> 由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。  ...同样， 如果只设置width，那么height也会等比例改变。   如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了。...而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。 后台管理布局 <!

    2.8K70

    02 . 前端之CSS

    属性和属性值必须完全匹配 根据部分属性值选择 突出效果文字 body> html> 自适应/改变大小 # 左右滚动条的出现 # 宽度，百分比 # 页面最外层: 像素的宽度=>最外层设置绝对宽度，里面设置百分比...一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置 2 . absolute（绝对定位） 　　定义：设置为绝对定位的元素框从文档流完全删除...> body> html> opcity属性 用来定义透明效果,取值范围是0-1,0是完全透明,1是完全不透明 和rgba区别 # rgba是针对背景颜色或者字体颜色单独的透明度 # opacity

    1.9K60

    Web程序员们，你准备好迎接HTML5了吗？

    (右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。...这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。   ...“600px”: “auto” );}    第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。...div>   div>   再嵌入一个float left而宽度是100%的DIV解决之  ④万能float 闭合(非常重要!)   ...,并使用前面定义的css的样式：    div id=”item”>some text herediv>     在body表现这里加入lang属性,中文为zh：    body lang=”en

    1.2K20

    网页设计中另人头疼的浏览器兼容问题

    (右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。...这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。   ...“600px”: “auto” );}    第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。...div>   div>   再嵌入一个float left而宽度是100%的DIV解决之  ④万能float 闭合(非常重要!)   ...,并使用前面定义的css的样式：    div id=”item”>some text herediv>     在body表现这里加入lang属性,中文为zh：    body lang=”en

    1.8K20

    【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 cover contain 值 )

    : 只设置宽度像素值 : 宽度设置为 500 像素 , 高度根据该宽度等比例缩放 ; background-size: 500px; 只设置宽度百分比值 : 宽度占父容器的 100% , 高度根据该宽度等比例缩放...> div>div> body> html> 显示结果 : 2、宽高不等比例拉伸 - 同时设置 宽度 / 高度 的 像素值 / 百分比值 如果为盒子模型 同时设置了 宽度...: 400px 400px; 或 /* 宽高不等比例拉伸 */ background-size: 100% 100%; 代码示例 : 设置 宽度 和 高度...> div>div> body> html> 设置 宽度 和 高度 的百分比值 : 100%; } body> div>div> body> html> 显示效果 : 3、宽高等比例拉伸 -

    1.6K20

    scrollWidth,clientWidth,offsetWidth的区别

    :silver; position:absolute; top:-5px;”>测试top div> 上面是一个段落P包含在一个DIV内，可以看到P的top设置为-5px后，它的上边距超过了容器...需要注意的是，DIV和P这一对包含元素，都需要设置position为absolute才能得到想要的结果，假如父元素不设置，则子元素的参照将是更上层定义过position的元素，直到整个文档； 2. posTop...posTop的数值其实和top是一样的，但区别在于，top固定了元素单位为px，而posTop只是一个数值(这一点可以通过alert(“top=”+id.style.top)和alert(“posTop...> container.scrollTop = 12; 这一段文本在这个100*100的DIV内无法完全显示，所以设置了overflow为auto，它会出现一个上下方向的滑动框...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度

    2.9K20

    10 个你需要熟悉的 CSS3 属性

    您所要做的就是将半径设置为元素宽度或高度的一半。 border-radius: 50px; 而且，如果我们想找点乐子，我们还可以利用灵活框模型（在#8 中详细介绍）将文本在圆圈内垂直和水平居中。...body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100%...尽管需要花费一些精力来了解新属性，但一旦您这样做了，这一切都应该是完全合理的。 让我们构建一个快速演示，并创建一个简单的两列布局。...水平和垂直居中 接下来，我希望我们的卡片在屏幕上完全居中。为此，我们将利用灵活盒模型。 由于我们的页面将只包含这张卡片，我们可以有效地使用该 body 元素作为我们的包装器。...body, html { height: 100%; width: 100%; } body { display: flex

    3K00

    CSS

    CSS 什么是CSS CSS全称Cascading Style Sheet层叠样式表 用来调整美化网页（对不同的模块去调整宽度高度背景字体大小等） HTML用来填入基本网页整体内容和结构划分，而CSS...} body> div id="a"> div> body> html> 类选择器：找到所有此类的标签（....--没有class属性所以未被修饰 --> body> html> 并集选择器：使用多个选择器逗号隔开（#id，.class,[属性]，标签名...:hover：设置链接的鼠标激活状态 边框属性 有上下左右和颜色样式宽度各种搭配 border：没有设定方向和修饰属性就是四边加设置颜色宽度样式 border-color：就是全部四边加只设置颜色...可再自定义宽高 常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div 内联元素：不会独占一行，不能设置宽高还有边距这些，范围只是仅仅包裹内容。

    1.3K20

    万字总结 CSS 布局

    > 夏 安 body> html> 效果如下： 但当我们代码里不换行时： <!...下面我们列举一下它们各自的特点： 「块级元素：」 霸占一行，不能与其他任何元素并列 能接受宽、高 如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽 「行内元素：」 与其他元素并排 不能设置宽...此时div和span没有什么区别，此时的div不能设置宽度和高度（即使设置了也并不显示出来，不信你去用代码验证一下呀），此时div可以和别人并排。...无异；此时的span能够设置高度和宽度；并且霸占一行，别人不能与之并排；如果不设置宽度，那么将撑满父亲。...grid-template-columns: repeat(2, 100px 20px 80px); 上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px

    6.9K20

    CSS 基础

    ; } body> div>html5div> body> html> 和 类选择器，需要注意的是，ID 选择器以 # 号开头，id 值在同一个 HTML 页面是唯一的，不能重复，相当于元素的身份标识，id 属性的设置，不能以数字开头，中间不要出现空格...设置背景图像的高度和宽度，如果只设置一个值，则第二个值会被设置为 "auto" percentage 以父元素的百分比来设置背景图像的宽度和高度，如果只设置一个值，则第二个值会被设置为 "auto"...cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中 contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 div {...border-color:red green blue pink; //上边框是红色，右边框是绿色，下边框是蓝色，左边框是粉色 border-width 属性，为元素的所有边框设置宽度，或者单独地为各边边框设置宽度

    3.8K40

    【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

    ; 绝对定位 和 固定定位 都可以到达 将 元素转为 行内块显示模式 的效果 ; 行内盒子 , 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性...; 浮动元素 和 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边距塌陷 问题 , 为 盒子设置 浮动 / 定位 , 就不用考虑 外边距塌陷的问题 ; 二、块元素示例 ---- div...div> body> html> 显示效果 : 三、inline-block 改元素为行内块元素示例 ---- 将块级元素 转为 行内块元素 , 行内块元素 如果不设置宽度 , 默认宽度与元素内容宽度一致...div> body> html> 展示效果 : 四、为块元素设置浮动 ---- 将块级元素 设置为 浮动元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : div> body> html> 显示效果 : 五、为块元素设置定位 ---- 将块级元素 设置为 绝对定位元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : <!

    2.3K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券