CSS浮动与定位逆战班

1.浮动（float）：属性值： left right float
是元素脱离文档流（文档流另有详解）后，方便进行布局，想左右排列的元素，例如：li设置浮动后，使其由垂直排列变成水平排列

此时，由于未清除浮动所以出现了父元素高度塌陷

元素浮动后除inline-table会转成table级元素外，其余元素都会转成display：block  但是这个块级元素并不是真正的块级元素，他只是具备块级元素某些特性，但同时他又具有内联元素的特性，比如不设置宽高时，由内容决定宽高，同样block元素，也会具有行内元素的某些特性，不设置宽高，宽高则有内容去决定

div未浮动之前是块级元素，独占一行

而设置浮动后，div虽然依旧是块元素，但是并不独占一行，如果没有设置宽高，则宽高有内容决定

    设置浮动的元素会脱离文档流，提升一个层级，元素会空出原位置，浮动元素不会影响前面的元素，但是会影响后面的元素，浮动并不会影响文本，文本并不会被浮动的元素覆盖，只会围绕在它的周围

浮动后：
可以看出文字并不会被红色方块覆盖，只会围绕在其周

元素浮动之后，并不会受margin垂直方向的层叠性的影响，也不会受垂直方向margin传递问题的影响，元素浮动后，如果父元素宽度不足，浮动元素会自动换行

未设置浮动时，会出现margin传递问题

设置后

    1.如果是上下排列的元素，如果不给设置浮动元素的后面的兄弟元素设置clear：both，用来隔离与浮动元素之间的距离，该兄弟元素就会收到受浮动元素的影响，为填补浮动元素留下的空位置，因此可能会整个页面的布局2.如果是嵌套情况下，并且父元素为以后扩充做考虑并未设置高度，这种情况下，就会产生父元素的高度塌陷，会影响父元素后面的兄弟元素，从而对整个页面的布局产生影响1.给父元素设置一个高度可以让父元素保持一定高度，从而不会产生浮动塌陷2.给父元素设置overflow：hidden；（触发BFC机制，BFC在此不进行解释，另有详解）给父元素添加overflow：hidden，可以清除父元素高度塌陷，也不会影响后面的元素，（使父元素包裹住浮动的元素，用浮动的元素去撑开父元素，用这种方法来解决浮动塌陷）(https://img-blog.csdnimg.cn/20200223212142142.png)（主要是应用于溢出隐藏，也可以清除浮动，父元素高度他先问题）但是，如果有浮动的子元素想溢出，那么就会受影响例如：子导航栏的显示隐藏，就不能使用overflow：hidden；来清除浮动，如果使用overflow，会把下面隐藏的子元素给隐藏掉，所以不会出现鼠标移入显示，移除隐藏的效果3.让父元素也一同进行浮动，但是会影响后面的元素，从而影响整个页面的布局4.将父元素设置成inline-block，有缺陷，此时，父元素的宽高完全有子元素的多少来决定，可能会影响布局5.在子元素的最后添加一个空标签，利用上下排列的情形，使用clear：noth；使空标签不受浮动元素的影响，从而撑开父元素，这种方法，不利用后期维护，添加的空标签过多6.使用伪类在元素清除浮动，因为：：after等伪类元素默认为内联元素，所以需要先将其转为块级元素再使用clear进行清除clear::after{content:""display:block;clear:both;}使用伪元素清除高度塌陷，不会对整个布局产生影响，而且可以它是以类的形式，可以重复使用，可以清除多个浮动，而不用重复添加

2.定位（position）：属性值 static（默认值） absolute（绝对定位） relative（相对定位） fixed（固定定位） sticky（粘性定位）
使用position来确定元素的定位方式，任何元素都可以使用定位，但在使用绝对定位和固定定位之后，会改变元素原有的的类型。
1.绝对定位 absolute 设置该值后，会是元素脱离文档流，会使元素的类型进行转换，与float是相同的。同时绝对定位是相对于离其自身最近且定位方式不为static的祖先元素进行定位的。如果祖先元素没有设置定位方式，则其相对于根进行定位
如果设置偏移量后，会对其他元素产生影响，如果不给使用absolute元素的父元素，添加高度，会造成高度塌陷
使设置绝对定位的元素，在父元素中居中，
1） .element{
width:100px;
height:100px;
position:absolute;
left:0;right:0;
top:0;
bottom:0;
margin:0 auto;
}
2).element{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

2.relative  相对定位  相对对位是相对与元素本身进行定位，并且不会脱离文档流（文档流同上），相对定位的基点，是自身的左上角相对定位跟margin很像，但是使用margin的元素会影响到会面的兄弟元素，而使用，相对定位则不会出现这样的问题。相对定位与绝对定位ablsolute在偏移量上也是有区别的，在同一方向的偏移量上只有一个能够生效，因为文档流默认的是自上而下，自左往右，所以在同时使用top/bottom是，top会生效，left会生效。但是在使用百分比作为偏移量的时候需要注意，百分比是根据父元素的值来计算的，如果父元素是atuo则该百分比是不生效的，相当于值为零但在使用定位时，尽量不要使用relative相对定位来对像素进行定位，一般主要应用于对ablsolute来进行包裹性和定位性的限制3.fixed  固定定位固定定位也会使元素脱离文档流，也会对元素的类型进行转换，但是，固定定位只会相对于根进行定位，不会受到祖先元素和滚动条的影响可以应用于网页中的蒙层弹窗4.粘性定位  sticky使元素滚动一定距离后，变成固定定位，定在该位置某一元素设置了粘性定位，设置了一个top：xx，随着页面的滚动，当页面滚动到该元素，距离顶端，xx距离后，该元素，便不再随着页面的滚动，而变成了固定定位固定在那里

CSS浮动与定位逆战班相关推荐

前端学习（2846）：css浮动和定位布局
<< 我们一起来做秒杀 >>一.css浮动 float none left rightclearnone both left right二.css定位#div_test{pos ...
CSS浮动、定位及显示隐藏元素
一.CSS浮动 1.标准流(普通流/文档流:即标签按规定默认排列方式) 块级元素独占一行,从上到下排列. 行内元素会按顺序,从左至右排列,碰到父级元素边缘则自动转行. 2.为什么浮动? (1)多个块级 ...
CSS浮动、定位总结
一.CSS 浮动 1. CSS 浮动属性简介 CSS float 属性是一个定位属性,用于使元素脱离正常的文档流,并浮动在它的父容器的左侧或右侧 float 设置元素在水平方向浮动,意味着元素只能 ...
前端学习记录(三) CSS浮动、定位与居中
目录浮动清除浮动方法1: 清除浮动方法2: CSS定位 relative定位 absolute定位 fixed定位居中水平居中垂直居中水平垂直居中浮动现在我们想在页面中 ...
DIV+CSS浮动和定位
浮动 DIV的浮动是指float属性,起初只用于图文排列,但是现在已成为网页上创建多列并排布局的常用工具之一. 下面看几个简单的例子图文排列 <h1>浮动:图文排列</h1> ...
CSS的浮动与定位手把手教学
目录前言一,浮动 1.1 传统网页布局的三种方式 1.2 初步了解浮动 1.3 浮动float 1.4 浮动特性(重难点) 1.4.1 性质1: 脱标,不占位 1.4.3 性质2: 浮动元素之间的 ...
CSS基础学习——定位
目录 1. 定位 1.1 为什么需要定位 1.2 定位组成 1.2.1 定位模式 1.2.2 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
CSS框模型，浮动，定位以及其他属性
CSS框模型,浮动,定位以及其他属性 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式 element : 元素. padding : 内边距,也 ...

CSS浮动与定位逆战班

CSS浮动与定位逆战班相关推荐

最新文章

热门文章

CSS浮动与定位 逆战班

CSS浮动与定位 逆战班相关推荐

最新文章

热门文章

CSS浮动与定位逆战班

CSS浮动与定位逆战班相关推荐