首页 > 其他 > 详细

绝定位和相对定位的理解

时间:2020-09-15 14:19:08      阅读:60      评论:0      收藏:0      [点我收藏+]

CSS中绝对定位和相对定位的理解:

 

1,relative 会相对于原来的位置偏移 元素设置此属性后仍然处在文档流中  不影响其他元素的布局   相对定位

 

2  绝对定位:  元素会脱离文档流 如果设置偏移量 会影响其他元素的位置定位  定位是相对于离元素最近的设置了绝对定位和相对定位的父元素绝对的,如果没有父元素设置或者没有相对定位和绝对定位。则元素相对于根元素html元素进行定位

 

包含块:离当前元素最近额祖先元素

 

绝对定位的包含块就是理他最近的开启了定位的祖先元素

 

绝对定位和相对定位会提升元素的层级

 

水平布局  会增加rigth 和 left

 

固定地位:也是一种绝对地位  大部分特点和绝对定位一样(fixed)   绝对定位相对包含块进行定位

唯一不同的是永远相对视口定位

 

粘滞定位:(兼容性差)

粘滞定位和相对定位的效果一致  但是会随着窗口固定在某个位置6

 

高度塌陷和BFC问题:块级格式化环境

高度塌陷问题:在浮动布局中,父元素的高度默认是被子元素撑开的

当子元素浮动后,其完全脱离文档流,无法撑起父元素的高度,导致父元素高度丢失

 

BFC:

BFC 是CSS的一个隐藏属性 

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

子父边距不会重叠

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

 

-可以通过一些特殊方式开启BFC

 

1.父元素 float   (缺点  脱离width)

2.将父元素作为行内块元素

3.将overflow 设置为非visible  可以保证它不被浮动的元素覆盖

 

 

clear 可以清除float元素对当前元素的影响

通过外边距实现

left right

both 清除较大一侧

 

使用伪元素解决高度塌陷问题:

同时解决了高度塌陷和外边距重叠的问题

  
.clearfix::before,
        .clearfix::after{
            content:‘‘;
            display: table;
            clear:both;
        }

垂直居中的方式  绝对定位的方式(1)

 

 

元素的层级:对于开启了定位的元素  可以设置z-index属性来设置层级,z-index需要一个整数作为参数,值越大,元素的层级越高。绝对定位按照执行顺序可以通过设置z-index的值变大使得元素浮动在下面元素之上。z-index需要整数显示  元素的层级越大  则优先显示靠下的层级。父类元素无法盖住后代元素。

 

字体相关的样式:

color  用来设置字体颜色

font-size 字体的大小

和font-size相关的单位

em 相当于当前元素的一个font-size

rem 相当于根元素的font-size

font-family 字体族  可以同时指定多个字体 字体之间用逗号隔开

  指定类别  浏览器会自动识别

  serif  衬线字体

  sans-serif 非衬线字体

  monospace 等宽字体

@font-face 可以将服务器中的字体直接提供给用户使用

  问题:加载速度

     版权问题

 

图表字体:

  fontawesome

  下载文件

  解压

  将CSS和webfonts放在同一个文件夹

  将all.css引入网页中

  使用方式:使用类名(i标签表示)

  一般是fas 和 fab

 

绝定位和相对定位的理解

原文:https://www.cnblogs.com/robingu/p/13672611.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!