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

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 父容器 的定位...边偏移 移动位置 ; 如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ; 绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标...class="one">div> div class="two">div> div class="three">div> 显示效果 : 12、z-index...; 如果想要 显示该对象 , 为该元素设置 display: block 即可 ; 设置 display: block 可以显示元素 , 同时该样式还可以将元素转为块元素 ; 使用 display 隐藏元素...: 不管子元素是否超出父容器 , 都显示滚动条 ; auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ; 效果参考 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置

2.8K10

web前端页面布局学习

p=2 默认未设置定位 父元素 宽度最大填充父元素，高度正好容纳子元素。...如果子元素左浮动，则宽度仍在容纳子元素的基础上最大填充父元素，高度正好容纳子元素 如果子元素右浮动，则宽度正好容纳子元素，高度正好容纳子元素 这是因为子元素默认就是独占一行，向左对齐的。...子元素的浮动是基于父元素框体的 浮动可以通过CSS clear清除 Display属性 none,inline,block,inline-block,table-cell,flex 每个元素都有一个display属性，如div...的display属性为block(块元素)，而span元素的display属性为inline(行内元素) 行内元素（inline）： 1.没有宽高属性，不会独占一行 如span,设置宽高均无用 2.行内元素一旦设置了...隐藏元素 display:none;隐藏元素，不保留物理空间 visibility:hidden;隐藏元素，保留物理空间 定位 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

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

    css(2)

    使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素的特点 display的none和visibility的hidden的区别：两者都可以隐藏元素，但是display将元素隐藏之后...（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）...浮动的应用场景： 浮动多用于页面的功能块的搭建，如小米商城的页面，就大量使用了浮动。...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响 会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线...id="d1" class="c2 clearfix"> div class="c1">div>div> div id="d2">div2div> p>pp> 1.9overflow

    1.9K20

    CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    黄色块div元素 使用 opacity:0; 时 ? 黄色块div元素 使用 visibility:hidden; 时 ? 黄色块div元素 使用 display:none; 时 ?...对子元素的影响 如果子元素什么都不设置的话，都会受父元素的影响，和父元素的显示效果一样，我们就来举例看看，如果子元素设置的值 和 父元素设置的值不同会有什么效果。 例子 （opacity属性） div class='yellow'>div> div> p class='blue' alert(0)>p>...黄色块div元素设置 opacity:0;，通过定位，遮挡住了 蓝色的p元素，当鼠标移到蓝色p元素上时，并没有触发蓝色p元素的事件。 例子（visibility属性） 块div元素设置 visibility:hidden;，通过定位，虽然遮挡住了 蓝色的p元素，但是当鼠标移到蓝色p元素上时，还是触发了蓝色p元素绑定的事件。

    2.2K10

    【万字长文】TypeScript入门指南

    如果参数类型不同，则参数类型应设置为 any。参数数量不同你可以将不同的参数设置为可选。为了让编译器能够选择正确的检查类型，它与 JavaScript 里的处理流程相似。...');//读取div 这种需要类型断言 或者加个判断应为读不到返回nulllet div:HTMLElement = document.querySelector('div') as HTMLDivElementdocument.addEventListener...，子类可以继承并重写父类的非静态方法对于静态属性，子类可以继承父类的静态属性，但是如何和非静态属性一样时，会被隐藏对于静态方法，子类可以继承父类的静态方法，但是不能重写静态方法，同名时会隐藏父类的 注...：静态属性、静态方法、非静态属性都可以被继承和隐藏，但是不可以被重写，非静态方法可以被重写和继承静态代码块的作用：一般情况下，有些代码需要在项目启动的时候就执行，这时候就需要静态代码块，比如一个项目启动需要加载配置文件...:string){//construct：构造器 this.name = name } //abstract getName(){//方法getName不能具有实现，因为它标记为抽象

    1.5K42

    CSS 浮动 （二）

    块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。...如何让多个块级盒子(div)水平排列成一行？ 比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。\ 如何实现两个盒子的左右对齐？...因为浮动可以改变元素标 签默认的排列方式 浮动最典型的应用：可以让多个块级元素一行内排列显示。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 3 什么是浮动？...浮动元素会脱离标准流(脱标) 浮动的元素会一行内显示并且元素顶部对齐 浮动的元素会具有行内块元素的特性. 5 浮动的使用 浮动元素经常和标准流父级搭配使用 为了约束浮动元素位置, 我们网页布局一般采取的策略是...例如 ，或者其他标签如 优点： 通俗易懂，书写方便 缺点： 添加许多无意义的标签，结构化较差 注意： 要求这个新的空标签必须是块级元素 代码 > 父级添加 overflow 可以给父级添加

    50010

    前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…

    absolute 绝对定位有两个重要的概念 1、完全脱标 —-完全不占位 2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置 div> 复制代码 固定定位 固定定位 1、完全脱标 — 完全不占位 2、只认浏览器的可视窗口,就是人看见的浏览器的地方 3、不随着滚动条滚动 div> div class="mid ">div> div class="bot">div> 复制代码 行内块元素特性 特性...-- 如果里面没有内容就是空的一行是0 --> p>浮动脱离p> 复制代码 综合定位Demo < 左箭头 >右箭头 复制代码 <!...显示 display:none 隐藏对象与它相反的是display:block除了转换为块元素之外，同时还有显示元素的意思 特点：隐藏之后，不在保留位置 visibility 可见性 设置或检索是否显示对象

    3.9K20

    前端之HTML和CSS

    p>　　 3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式 div>这是一个div元素div> div>这是第二个div元素div> div> <h3...带语义的标签  1、h1~h6：表示标题 2、p：表示段落 3、img：表示图片 4、a：表示链接 不带语义的标签  1、div：表示一块内容 2、span：表示行内的一块内容 所以我们要根据网页上显示的内容...text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px display属性 display属性是用来设置元素的类型及隐藏的，常用的属性有： 1、none...元素隐藏且不占位置 2、block 元素以块元素显示 css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...外间距居中技巧  　　如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素 /* 子元素上下外边距设为0，左右设置为auto */ margin:0px auto 盒子的真实尺寸

    5.3K30

    深入理解和应用Float属性

    创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度、高度自适应，但可以设置其值。...p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容p> div>Div标签文件内容文件内容文件内容文件内容文件内容文件内容div> 文件内容文件内容文件内容文件件内容文件内容文件内容...100px; height: 200px; background: gray;float: none;" >p>002p>div> 001浮动，002没有浮动，但002元素本身被001盖住...规则如下： 2.1 不能指定宽高 2.2 Margin、Padding、border垂直方向的无效 2.3 行框的左边紧贴包含块的左边，而行框的右边紧贴其包含框的右边，而浮动块可以插入在包含块边缘与行框之间...但是存在以下局限性，要适环境而用：     a) Overflow方式：滚动条会被隐藏，如果子内容超高则存在显示不全的问题；     b) Float方式：让父容器浮动，那么就存在对父容器同辈元素的影响

    1.4K100

    「学习笔记」CSS基础

    /* 推荐 */ .jdc {} li {} p{} /* 不推荐 */ *{} #jdc {} div{} 因为div 没有语义，我们尽量少用 CSS复合选择器 复合选择器是由两个或多个基础选择器...宽度默认是容器(父级宽度)的100% 是一个容器及盒子，里面可以放行内或者块级元素 注意：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。...普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行...什么是浮动」元素的浮动是指设置了浮动属性的元素会 脱离标准普通流的控制,不占位置，脱标 移动到指定位置。 作用 让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。...定位小结 定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况 静态static 不脱标，正常模式 正常模式 不能 几乎不用 相对定位relative 不脱标，占有位置 相对自身位置移动

    4.2K30

    CSS入门？一篇就够了！

    常见的块元素有~、p>、div>、、、等， 其中div>标签是最典型的块元素。...（a特殊） 注意： 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。...相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom...（相对定位不脱标） 如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。...display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： 隐藏之后，不再保留位置。

    6.3K20

    前端学习(14)~css学习(八)：定位属性

    绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。...但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。 工程应用： “子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。...（3）绝对定位的儿子，无视参考的那个盒子的padding： 下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。...此时，如果div相对定位，p绝对定位，那么， p将无视父亲的padding，在border内侧为参考点，进行定位： ?...可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做： div { width: 600px; height: 60px;

    1.3K20

    【CSS3】css开篇基础（4）

    块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。...浮动元素会脱离标准流（脱标） 浮动的元素会一行内显示并且元素顶部对齐 浮动的元素会具有行内块元素的特性 浮动元素会脱离标准流（脱标） 脱离标准普通流的控制（浮） 移动到指定位置（动），（俗称脱标） 浮动的盒子不再保留原先的位置...class="box1">浮动的盒子div> div class="box2">标准流的盒子div> 浮动的元素会一行内显示并且元素顶部对齐 如果多个盒子都设置了浮动...，则它们会按照属性值一行内显示并且顶端对齐排列。...5.显示和隐藏元素 display 属性可以用于设置一个元素应如何显示, display:none;隐藏对象 display:block;除了转换为块级元素之外，同时还有显示元素的意思 display

    93110

    CSS技巧（一）：清除浮动

    { float: right; } div class="news"> p>some textp> div> ?...清除浮动方法 方法一：使用带clear属性的空元素 在浮动元素后使用一个空元素如div class="clear">div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动...textp> div class="clear">div> div> 优点：简单，代码少，浏览器兼容性好。...总结 通过上面的例子，我们不难发现清除浮动的方法可以分成两类： 一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after...推荐 在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动

    1K11

    前端成神之路-浮动

    CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1...~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示...俗称 “脱标” ?...体验案例——div 水平排列 div { width: 200px; height: 200px; background-color: pink; /* 转换为行内块元素...优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

    1.6K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券