展开

关键词

CSS——

定义 包括外(Margin)属性和内(Padding)属性,外属性定义了元素间的间隔,内属性定义了元素框与内容区域之间的空白区域。 外(margin)表示从一个元素的到相邻元素(或者文档界)之间的离,而内(padding)则定义了元素内部从到内容的间隔。 列表 元素 描述 margin margin规定元素中四个方向的外属性。 margin-bottom 设置元素的下外。 margin-left 设置元素的左外。 margin-right 设置元素的右外。 margin-top 设置元素的上外。 padding padding规定元素的内,该属性不可为负值,其简写形式可一次性设置四个的内。 padding-bottom 设置元素的下内。 padding-left 设置元素的左内。 padding-right 设置元素的右内。 padding-top 设置元素的上内

31430

关于元素间的问题与BFC

一、常见情况 1、垂直方向上相邻元素的 (水平方向上不会发生) ? 2、 垂直方向上父子元素间的 ? relative 以外的值(例如 absolute、fixed) (4)设置 display 属性,可以是 flex、inline-block、table-cell... 3、BFC 的使用场景 (1)解决元素间的问题 overflow: hidden; } div { width: 100px; height: 100px; background: #7b81ca; margin: 30px; } (2)解决浮动问题

36320
  • 广告
    关闭

    腾讯云618采购季来袭!

    一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…

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

    CSS】309- 复习 CSS盒模型

    点击上方“前端自习课”关注,学习起来~ 一、概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外(margin)、框(border)、内(padding)、实际内容(content 2.4 实例题(根据盒模型解释) 例:父元素里面嵌套了一个子元素,已知子元素的高度是 100px,子元素与父元素的上是 10px,计算父元素的实际高度。 ? 2.5 BFC(解决方案) 2.5.1 BFC基本概念 BFC: 块级格式化上下文 BFC基本概念:BFC 是 CSS 布局的一个概念,是一块独立的渲染区域,是一个环境,里面的元素不会影响到外部的元素 父子元素和兄弟元素原则取最大值。空元素的是取 margin 与 padding 的最大值。 Box 的 margin 会发生; (3)每个元素的 margin Box 的左, 与包含块 border Box 的左相接触,(对于从左到右的格式化,否则相反)。

    29830

    (Margin collapsing)笔记?

    定义 外是指有时候上与下坍缩成较大的那一个的行为。它只会发生在同一BFC的块级元素间,并且永远不会发生在浮动元素或绝对定位元素间。 可能的情况 毗邻的兄弟元素 相邻的兄弟元素垂直会发生折,但最后一个元素需要清除浮动时例外。 父元素和第一个/最后一个子元素 父元素与第一个子元素的margin-top可能合,与最后一个子元素的margin-bottom可能合。 如果要在这种情况下避免外,请将两者的margin区分开。区分margin-top的方法有设置border、padding、inline content、清除浮动、避免创建BFC区域。 ">上面的间隙是10px

    企业微信截图_15578078547043.png MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS

    35330

    Day4:html和css

    #da input {} .shu .coding {} 行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上离-内容高度-下离. css三大特性是层,继承,优先级. } css样式表 css的优先级 使用! 在css中的样式继承权值是为0的,不管父元素权多大,被子元素继承时,它的权都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级 优先级 // CSS特殊性(Specificity) 权是优先级的算法,层是优先级的表现 css背景 背景图片(image) 背景平铺(repeat) 背景位置(position) // 背景图片 :上外 margin-right:右外 margin-bottom:下外 margin-left:上外 margin:上外 右外 下外 左外 文字水平居中是 text-align

    38720

    CSS margin合并问题

    CSS合并问题 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外可以结合成一个单独的外。这种合并外的方式被称为折,并且因而所结合成的外称为折。 折的结果 两个相邻的外都是正数时,折结果是它们两者之间较大的值。 两个相邻的外都是负数时,折结果是两者绝对值的较大值。 两个外一正一负时,折结果是两者的相加的和。 2. 浮动元素不与任何元素的外产生折(包括其父元素和子元素) 绝对定位元素不与任何元素的外产生折 inline-block元素不与任何元素的外产生折 一个常规文档流元素的margin-bottom 如何解决 使用BFC解决margin合并问题可以参考这篇文章:CSS要的BFC 3.1 自身margin合并的情况 加个padding或者border-top/border-bottom 3.2 外合并的问题 深入理解css中的margin属性 深入理解BFC和Margin Collapse

    60830

    CSS---网络编程

    CSS概述 CSS是层样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。 框(border)—这个元素内容的封闭图形的界 内补丁(Paddings):内—自己这个元素离自己内容文字的离 外补丁(Margins):外—自己这个元素的离另一个元素的界 (框)的离 ☆CSS布局——漂浮 ◇ float : none | left | right none : 默认值。 ,则这个对象移动,给那个漂浮过来的对象让出一行位置,让他们不会) ☆CSS布局——定位 ◇ position : static | absolute | fixed | relative static 如果某个对象用了相对定位,也相当于这个对象漂浮在另一个层面(),但是原来层面上自己占的位置不会被其他模块覆盖。

    13820

    《精通CSS》第3章 可见格式化模型

    内外的值可以说任意的长度单位,但是当使用百分比时,有一点需要记住,四个方位的内、外都是基于包含块的宽度来计算的 。 划点,这个点时很常见的面试点哟。 所谓外,即垂直方向上的两个外相遇时,会折成一个外,折后外的高度等于两者中较大的那个高度。 外的折有以下几种情况(很要!)。 甚至同一个元素的外也会折,如果存在一个空元素,只有外没有框和内,此时自身的上下接触,发生折。 折后的外又接触其他元素的外,还会继续折。 而有了外就不会这样了。所以外是为了排版而生的。 最后,外只会发生在常规文档流中块级盒子的垂直方向上。行内盒子、浮动盒子或绝对定位盒子的外都不会折。 3.2.3 格式化上下文 CSS 中有一个很要的概念,叫做格式化上下文(formatting context)。其中行级格式化上下文前面略有提及,如垂直外对于行内盒子无效。

    28320

    CSS(三)

    CSS(三) 發佈於 2018-06-28 本篇将讲解盒模型以及外的相关知识。 “CSS 盒模型”是一组规则,用于定义如何呈现 Internet 上的每个网页。 本章介绍了 CSS 框模型的核心组件: 填充,框,,Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图,因为它定义了框的个别行为。 strong { margin: 50px; } 如果我们将更改为填充,它会显示背景。但是,它不会影响周围盒子的垂直布局。 垂直 盒子模型的另一个怪癖是”垂直”。 当你有两个垂直彼此相邻的盒子时,它们会折。不是将加到一起,而是仅显示最大的。 垂直外最可能发生的两种简单情况: 两个紧邻的兄弟元素的外发生折 父子元素的外发生折 首子元素与父元素的上外发生折 尾子元素与父元素的下外发生折 预防 有时我们确实希望防止

    14620

    揭示不为人知的CSS

    在这种情况下,它似乎可以感觉到在内容上田间的填充和,但实际上,是新计算宽度以确保一切都适合。 通过比较,设置宽度为“100%”时,不管、填充和框的大小是多少,内容区域都将填充可用空间。 意外当时候,真的令人很困惑,因为你不知道发生了什么。当两个或多个相邻的垂直接触时,有时会发生,并且不会用填充或框分隔。 如果子元素的缘扩展到父元素的缘,并且不会被填充分隔开,那么就会出现的现象。 如果元素采用的是绝对定位、浮动定位或者有一个不一样的 格式化上下文时,不会发生现象,以及在其他一些不太可能的情况下。 如果你感到困惑,没关系。不会发生的规则是复杂的。 您需要知道的主要事情是当元素没有填充或框时,垂直可能会。 如果你想了解的更详细, CSS Tricks 有一篇很好的 释义的文章推荐你看一下。

    23230

    知识整理之CSS

    此样式表被下载和解析后,将新渲染页面,也就出现了短暂的花屏现象。 解决方法: 使用link标签将样式表放在文档head中 什么是外的结果是什么? 什么是外: margin-collapse 垂直相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外可以结合成一个单独的外。 这种合并外的方式被称为折,结合而成的外称为折。更详细介绍可移步至:CSS 框模型( Box module ) 折后margin的计算 1. 示意图: image.png 外的意义 外只产生在普通流文档的垂直外之间,避免块级元素之间产生双倍的问题。 外解决方案 1. 譬如外(margin)的,浮动清除,触发ie的haslayout属性等。

    29320

    css之详解

    正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。 Dreamweaver不理解它 负不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢? 与其共事 负如果可以正确的使用的话它的功能是很强大的。有两种场景负是很要的。 使用负会比使用相对定位好很多,因为你只需要给新的一列的第一个元素添加负即可。酷吧,哈哈哈 来强调 ? 故意元素也是一种很好地设计隐喻。效果可以增强深度感从而为突出特定元素。 一个很好地例子就像上图一样,通过来吸引注意力。只需要使用z-index属性和一点小创意你就可以做到。 惊艳的3D文本效果 ? 这是一个精致的技巧。 然后通过负来把其中一个加到另一个上面,保持1到2像素的偏移。这样你就可以二道可选的,机器友好的倾斜字体。

    49380

    css之详解

    正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。 Dreamweaver不理解它 负不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢? 与其共事 负如果可以正确的使用的话它的功能是很强大的。有两种场景负是很要的。 使用负会比使用相对定位好很多,因为你只需要给新的一列的第一个元素添加负即可。酷吧,哈哈哈 来强调 ? 故意元素也是一种很好地设计隐喻。效果可以增强深度感从而为突出特定元素。 一个很好地例子就像上图一样,通过来吸引注意力。只需要使用z-index属性和一点小创意你就可以做到。 惊艳的3D文本效果 ? 这是一个精致的技巧。 然后通过负来把其中一个加到另一个上面,保持1到2像素的偏移。这样你就可以二道可选的,机器友好的倾斜字体。

    73940

    CSS盒模型及问题

    盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外框,内,内容组成, ? 在CSS中,width和height的值指的是内容的宽高,增加外框,内并不会对内容造成影响,但是会增加整体的元素框的尺寸,假设10元素的外,5元素的内,那么要使框达到100元素,就需要给定 外加: 当一个元素出现在另一个元素的上面时,第一个元素的底框会和第二个元素的顶框发生合(取两者的较大者)。 ? 当元素为空时,他本身的上下也会发生合。 ? 诸如,以一个典型的几个段落组成的文章为例,如果没有加,那么段落之间的就会是段落的顶外的两倍,但加之后,就会有着一样的高度,如图: ?

    21320

    复盘1

    cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; } } 5、什么是外 的结果是什么? 外就是margin-collapse。 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外可以结合成一个单独的外。 这种合并外的方式被称为折,并且因而所结合成的外称为折。 折结果遵循下列计算规则: 两个相邻的外都是正数时,折结果是它们两者之间较大的值。 两个相邻的外都是负数时,折结果是两者绝对值的较大值。 两个外一正一负时,折结果是两者的相加的和。 ? 示例 6.rgba()和opacity的透明效果有什么不同? 8、CSS 选择符有哪些?哪些属性可以继承? CSS3新增伪类有那些?

    17820

    CSS基础知识巩固你的前端基础

    CSS基础知识 css,英文 Cascading Style Sheets,中文名:级联样式表。层样式表。 css是一种表现语言,是对网页语言的补充。 背景 css背景属性如下: 属性 说明 background-color 定义背景颜色 background-image 定义背景图片 background-repeat 定义背景图片是否复以及其复方式 css属性,元素的内框和内容之间。 css的属性: 属性 说明 padding-top 元素的上内 padding-right 元素的右内 padding-bottom 元素的下内 padding-left 元素的左内 元素的左外 z-index 元素的堆顺序 z-index用于设置目标对象的定位层序,数值越大,所在层级越高。

    6110

    相关产品

    • 云直播

      云直播

      云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券