美文网首页
css元素背景小知识扩充

css元素背景小知识扩充

作者: shuffle笑 | 来源:发表于2018-07-10 23:27 被阅读0次

1,高度塌陷

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高

但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷

由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱

所以在开发中一定要避免出现高度塌陷的问题,

我们可以将父元素的高度写死,以避免塌陷的问题出现,

但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的

2,解决高度坍塌

根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块的格式化环境)简称BFC,该属性可以设置打开或者关闭,默认是关闭的

当开启元素的BFC以后,元素将会具有如下的特性:

a.父元素的垂直外边距不会和子元素重叠

b.开启BFC的元素不会被浮动元素所覆盖

c.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

aa.设置元素浮动

- 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致下边的元素上移,不能解决问题

bb.设置元素绝对定位

cc.设置元素为inline-block

- 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式

dd.将元素的overflow设置为一个非visible的值

zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍

zoom:1表示不放大元素,但是通过该样式可以开启hasLayout

zoom这个样式,只在IE中支持,其他浏览器都不支持

3,清除浮动

none,默认值,不清除浮动

left,清除左侧浮动元素对当前元素的影响

right,清除右侧浮动元素对当前元素的影响

both,清除两侧浮动元素对当前元素的影响

清除对他影响最大的那个元素的浮动

4,定位

(1)定位:

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值:

static:默认值,元素没有开启定位

relative:开启元素的相对定位

absolute:开启元素的绝对定位

fixed:开启元素的固定定位(也是绝对定位的一种)

(2)position: relative

当元素的position属性设置为relative时,则开启了元素的相对定位

当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化

相对定位是相对于元素在文档流中原来的位置进行定位

相对定位的元素不会脱离文档流

相对定位会使元素提升一个层级

相对定位不会改变元素的性质,块还是块,内联还是内联

(3)left:xxx px;

right:xxx px;

当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量

left:元素相对于其定位位置的左侧偏移量

right:元素相对于其定位位置的右侧偏移量

top:元素相对于其定位位置的上边的偏移量

bottom:元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位,

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

相关文章

  • css元素背景小知识扩充

    1,高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 但是当为子元素设置浮动...

  • css元素背景小知识

    1,内容区 content 通过width和height两个属性可以设置内容区的大 小。 width和hei...

  • Html-CSS 背景设置

    CSS 背景 CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果: background-col...

  • HTML与CSS的CSS常用属性

    CSS常用属性设置背景CSS 背景属性用于定义HTML元素的背景效果 background-color设置元素的背...

  • HTML与CSS之CSS的常用属性设置

    CSS常用属性设置 背景 ​ CSS 背景属性用于定义HTML元素的背景效果 background-color ​...

  • CSS background背景

    CSS背景属性 CSS背景属性用于设置HTML元素的背景(填充),复合属性 background 可以用来设置背景...

  • less 的 & 详解

    背景介绍 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等...

  • 十四、CSS的背景

    一、CSS的背景 通过CSS背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背...

  • CSS设置元素背景

    background-color 设置元素的背景颜色,如果不设置颜色,元素默认背景颜色为透明,实际上会显示父元素的...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

网友评论

      本文标题:css元素背景小知识扩充

      本文链接:https://www.haomeiwen.com/subject/ckhcpftx.html