常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div,p,h,form,li) 一行显示一个; 宽度默认为容器的100%; 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...(如div下可包含div) 行内元素(常见的行内元素a,span.img) 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素和行内元素的特征...auto //子元素内容大于父元素,显示滚动条,超出显示,不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...px和em的区别是什么 px和em都是长度单位,两者的区别是:px的值是固定的,指定为多少就是多少,计算比较容易;em的值不是固定的,是相对于容器字体的大小,并且em会继承父级元素的字体大小。
第二个div用margin-left设置,让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时,浮动元素没有覆盖文本,而是浮动在文本的左边 ... 解决办法1:子元素宽度不超过父级3px 1.9 父级包不住relative的子级 解决办法:针对IE6、7给父级加上...relative 1.10 IE6下绝对定位元素的父级宽度是奇数,则该子元素right和bottom有1px偏差 解决办法:避免父级宽度出现奇数...第二个div用margin-left设置,让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时,浮动元素没有覆盖文本,而是浮动在文本的左边 ...relative 1.10 IE6下绝对定位元素的父级宽度是奇数,则该子元素right和bottom有1px偏差 解决办法:避免父级宽度出现奇数
2.2.子元素宽度设为100%时的奇怪现象原理探究 父元素的宽度 = 图片宽度 + 文字内容宽度 浏览器渲染原理:先下载文档内容,加载头部样式资源,然后按从上到下、自外而内的顺序渲染dom内容。...本例的现象产生的原因就是:当渲染到父元素时,子元素的width:100%并没有渲染,宽度就是图片加文字内容的宽度;等渲染到文字这个子元素的时候,父元素的宽度已经固定,此时的width:100%就是以固定好的父元素的宽度...,宽度不够只能溢出。...常见的内联元素有:display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域:可以理解为文本选中的背景色区域(重点) 内联盒子:内联标签或者纯文本...解决方案: 父级设置为块级格式化上下文元素 父元素设置border-top/bottom值 父元素设置padding-top/bottom值 父元素设置高度 空块级元素margin合并 3.margin
本例的现象产生的原因就是:当渲染到父元素时,子元素的width:100%并没有渲染,宽度就是图片加文字内容的宽度;等渲染到文字这个子元素的时候,父元素的宽度已经固定,此时的width:100%就是以固定好的父元素的宽度...,宽度不够只能溢出。...常见的内联元素有:display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域:可以理解为文本选中的背景色区域(重点) 内联盒子:内联标签或者纯文本...对视觉层和布局层都会有影响,如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条,否则如果父元素不设置设置overflow,只会在垂直方向上发生重叠,不会影响布局...的值不为static或者relative 若元素具备BFC特性,则无需clear:both去清除浮动 display:table-cell的特性: 宽度设置的再大,也不会超过表格容器的宽度 overflow
容器定宽,文本不定宽 我们先假设一下,我们的容器的宽度如果是固定的,但是不确定每条文本的宽度。...那么很容易得到需要滚动的距离: 需要滚动的距离 S = 溢出的文本元素的宽度 - 父元素的宽度 这样,我们只需要找到一个可以表示并且当前文本宽度是变量值即可。即是 -- transoform。...不定宽文字跑马灯来回滚动展示 -- 父容器定宽,子元素不定宽 父容器不定宽度 当然,还没完。 如果父容器的宽度也是不固定的,或因为者 calc 兼容性问题无法使用上述方法。...那么,我们要做的就是,在一段固定的 CSS 代码中,既能运动当前元素的宽度,也能位移父容器的宽度。...这样,不论父容器宽度如何,文本元素宽度如何,都可以实现对溢出文本适配滚动展示。
CSS第五天-定位 静态定位:static 定位的默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来的位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动条的滚动而滚动 可以直接加宽高,默认宽度是内容宽度 脱离标准流,在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...、行内块元素 === 给其父元素添加text-align: center 块级元素 === 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流的父元素设置 宽度和margin...(-50%) 行内元素、行内块元素、并列关系的垂直居中对齐 设置vertical-align: middle ---- 垂直的用法: 文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框
瑕疵在于,当时的 CSS 技术,其实没法判断当前文本内容长度是否超过了其容器宽度,导致即便文本没有没有超长,Hover 上去也会进行一个来回滚动,像是这样: 容器查询 cqw 和 CSS 数学函数 max...首先,我们的问题其实可以抽象成: 判断文本宽度与容器宽度的大小差异,文本宽度是否大于容器宽度 如果超出,则设置来回位移动画,位移的幅度为容器宽度与文本宽度的差值 那么,我们一步一步来。... 其中,div 为容器,span 为文本内容。同时,我们利用容器查询,设置父容器 marquee 为容器查询的容器,并且将基于容器的inline-size 维度。...那么: width: 100% ,对于 span 行内元素而言,其文本长度就是其整个的宽度,100% 代表的就是文本内容的长度 width: 100cqw 表示的是设置了容器查询的 .marquee 的宽度...其实我们的关键不是谁大谁小,而是: 如果当前容器的宽度(也就是文本宽度)大于父容器宽度,需要得到一个动画位置值 如果当前容器的宽度(也就是文本宽度)小于父容器宽度,无需动画,也就是动画位移值为 0 那么
3.3 清除浮动的方法 方法1:给父级div定义 高度 原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。...在IE6中还需要触发 hasLayout(zoom:1) 优点:代码简介,不存在结构和语义化问题 缺点:无法显示需要溢出的元素(亦不太推荐使用) 方法六:父级div定义 伪类:after 和 zoom...em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置, 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。...8.流式布局与响应式布局的区别 流式布局 使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩,不受固定像素的限制,内容向两侧填充。...如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。
static的父级元素通过top, bottom, left, right 定位; fixed(固定定位):所固定的参照对像是可视窗口。...首先,需要把元素的宽度、高度设为0。然后设置边框样式。...当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom...等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。...参数是auto时候,子元素内容大于父元素时出现滚动条。 参数是visible时候,溢出的内容出现在父元素之外。 参数是hidden时候,溢出隐藏。
auto:文本溢出时,会根据元素的宽度和高度来决定是否显示滚动条。... 看看我的文本内容有没有溢出 看看我的文本内容有没有溢出 <p class="...用于<em>设置</em><em>文本</em>字体<em>的</em>大小。字体大小可以使用绝对值或相对值来指定。 使用绝对值时,字体大小<em>的</em>大小是<em>固定</em><em>的</em>,不会随着屏幕分辨率<em>的</em>变化而变化。...bolder: 相对于<em>父</em><em>元素</em>更粗<em>的</em>字体。 lighter: 相对于<em>父</em><em>元素</em>更细<em>的</em>字体。 数字值:使用数字值来<em>设置</em>字体<em>的</em>粗细,数字值范围通常从 100 到 900。...相对于<em>父</em><em>元素</em>更细<em>的</em>字体 效果: 样式 CSS 中字体样式可以使用 font-style 属性来<em>设置</em>。
将右边元素的margin-left设置为200px,宽度设置为auto(默认为auto,撑满整个父元素)。...将右边元素的 margin-left 设置为 200px,宽度设置为 auto(默认为 auto,撑满整个父元素)。...父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边...父级元素设置左右的padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。...: #97如何实现单行多行文本溢出的省略 [47] 98.常见的元素隐藏方式?: #98常见的元素隐藏方式 [48] 99.css 实现上下固定中间自适应布局?
浮动后的元素可以设置宽度和高度,也就是说内联元素浮动后会变成块级元素。...fixed 固定定位,固定定位和绝对定位相似,但它的偏移量固定的相对于浏览器窗口,它会脱离标准文档流,并且浏览器把他们一致视作块级元素。...如果定位元素的父元素也设置了 z-index 属性,那么子元素的 z-index 属性将失效,并且最终是根据父元素的 z-index 属性来判断覆盖关系。...; 当 IFC 中盒子的总宽度少于包含它们的行框时,其水平渲染规则由 text-align 属性值来决定; 当一个行内元素超过父元素的宽度时,它会被分割成多个盒子,这些盒子分布在多个行框中。...如果子元素未设置强制换行的情况下,行框将不可被分割,将会溢出父元素。
结果是元素宽度未超过其包含的块/父元素的50%。 height 属性 除了最小和最大宽度属性外,我们还具有与高度相同的属性。...注意,max-height的默认值是none。 考虑下面的示例,其中我为内容设置了max-height。 但是,因为它大于指定的空间,所以会发生溢出。 因此,文本超出了其父边界。 ?...结果min-height值被设置为与内容一样长。 考虑以下示例: ? 用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目,所以它的min-height与它的内容相等。...Hero 元素的最小高度 一般来说,我不喜欢给元素添加固定的高度。我觉得这样做,会破坏流式布局的结构。但有些情况设置固定高度却很有用。 考虑下面的例子,在这里我们有一个设置了固定高度的hero部分。...内容溢出的问题不仅在于内容是否大于固定的hero 高度。它可以发生在屏幕大小调整作为文本换行的结果。 ? 如果改用min-height,则上述情况根本不会发生。
解决办法:•设置块状格式化上下文元素(BFC) (2)父级和第一个/最后一个子元素的margin合并。...解决办法: 对于margin-top合并,可以进行如下操作(满足一个条件即可): •父元素设置为块状格式化上下文元素; •父元素设置border-top值; •父元素设置padding-top值; •...》 《CSS 多行文本溢出省略显示》 98.常见的元素隐藏方式?...以左边宽度固定为 200px 为例 -(1)利用浮动,将左边元素宽度设置为 200px,并且设置向左浮动。...这里以左边宽度固定为100px,右边宽度固定为200px为例。 (1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。... 效果如下: 一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。...white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)*/ } 效果如下: 二....overflow:hidden 清除浮动 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。...当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。
解决办法: •设置块状格式化上下文元素(BFC) (2)父级和第一个/最后一个子元素的margin合并。...解决办法: 对于margin-top合并,可以进行如下操作(满足一个条件即可): •父元素设置为块状格式化上下文元素; •父元素设置border-top值; •父元素设置padding-top值; •...》 《CSS 多行文本溢出省略显示》 98.常见的元素隐藏方式?...以左边宽度固定为 200px 为例 -(1)利用浮动,将左边元素宽度设置为 200px,并且设置向左浮动。...这里以左边宽度固定为100px,右边宽度固定为200px为例。 (1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。
/* 块级元素(新的布局方式,受高度宽度影响,宽度占位一整行) */ display: flex; /* 行内块级元素(受高度宽度影响,宽度占位根据内容决定) */ display...*/ vertical-align: baseline; /* 垂直对齐文本的下标 */ vertical-align: sub; /* 垂直对齐文本的上标 */...vertical-align: super; /* 把元素的顶端与行中最高元素的顶端对齐 */ vertical-align: top; /* 把元素的顶端与父元素字体的顶端对齐...*/ vertical-align: text-top; /* 把此元素放置在父元素的中部 */ vertical-align: middle; /* 使元素及其后代元素的底部与整行的底部对齐...*/ vertical-align: bottom; /* 把元素的底端与父元素字体的底端对齐 */ vertical-align: text-bottom; } 动画相关
领取专属 10元无门槛券
手把手带您无忧上云