css中高度塌陷介绍以及定位介绍

来源：互联网发布：by什么意思网络用语编辑：程序博客网时间：2024/06/06 04:20

浮动的问题——高度塌陷

高度塌陷的效果：定义两个元素是父子结构，为子元素设置浮动（父元素不设置高度）；
注意：高度塌陷的效果师傅和复制结构的浮现效果；但是在实际开发中，不希望出现这种效果。
解决方案——BFC
什么是bfc？
- 块级格式化环境
bfc的开启方式？
- 元素设置float浮动
- 元素的display设置inline-block；
- 元素设置绝对定位；
- overflow:hidden/auto（非默认值visible）;
- clear:both/left/right;——必须新增一个子元素（最后）
bfc的问题？

//开启BFC实验<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box1{            background-color: pink;            /*height: 200px;*/            width: 300px;            /*开启BFC的方法*/            /*一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流，            父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！*/            /*float: left;*/            /*二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。*/            /*position:absolute;*/            /*三、设置父级元素的display为incline-block，也就是将父级元素变成了行内块级元素？？？？？脱离文档流？？？            父元素下面的同级元素会在原本文档流中的位置下些许下移，考虑是由于变成了块级元素导致两个块级元素导致？？？            父级元素的高度被子级元素撑开了！            设置成：display:block;就不行！            */            /*display:inline-block;*/            /*四、设置父级元素的overflow非默认属性：           父级元素会被子元素撑开,高度就是子元素的高度;           父元素下面的同级元素不会上移。*/            /*overflow:hidden;*/            /*五（未开启BFC，但是解决了高度塌陷问题！）、设置父元素的高度，这种方法照成的结果和开启overflow的结果一致；但是本质应该是不相同的。*/            /*height: 100px;*/        }        /*六、给塌陷的父级元素的最后添加一个元素，使该元素清除浮动，呈现块级样式。也可解决高度塌陷问题！*/        /*.box1:after{*/            /*content: '';*/            /*display: table;*/            /*clear: both;*/        /*} */        .box2{            height: 300px;            width: 300px;            background-color: red;        }        .b1{            background-color: purple;            width: 100px;            height: 100px;            float: left;        }        .b2{            background-color: green;            width: 100px;            height: 100px;            float: left;        }    </style></head><body><div class="box1">    <div class="b1"></div>    <div class="b2"></div>    <div class="clearfix"></div></div><div class="box2"></div></body></html>

css的定位

概念：css定位——表示的是某个元素在当前页面中的位置。
定位一定会有坐标轴的概念出现：
一个元素在当前页面的位置，其实就是一个坐标轴（X,Y）
css定位就是将坐标值（x，y）转换成css中某个具体的属性使用。
定位的值：

static——默认值，表示静态定位；
- 注意——并没有坐标值的概念；
absolute——表示绝对定位
fixed——表示固定定位
relative——表示相对定位

偏移量：

偏移量——某个元素相对于初始位置的移动的距离；
一个元素在页面中只有两种移动效果
- 垂直方向
- 水平方向
提供四种偏移量
- top-表示距离顶部的空间
- right-表示距离右边的空间
- bottom-表示距离下边的空间
- left-表示距离左边的空间
偏移量的作用
- 同时使用top和left时——常用方式；
  - top和left就是坐标轴中的坐标值的概念-
  - 使用bottom和right时
  - 当前元素定位在页面底部时——bottom；
  - 当前元素定位在页面右边时——right（至少可以使用left进行替换）。

绝对定位：

开启方式——position：absolute;（非static即可，默认值：static）
特点：
- 绝对定位的元素脱离文档流；
- 绝对定位的元素呈现块级效果；
- 只是开启绝对定位，而不设置坐标值的话，位置不会发生变化。
定位效果：
- 绝对定位的元素的父元素是< body>，相对于页面定位；
- 绝对定位的元素不是父元素< body>时
  - 如果父元素开启定位，则相对于父元素；
  - 如果父元素不开启定位，则依旧相对于页面。

固定定位——fixed
固定定位时绝对定位的一种特殊定位；
固定定位值相对于浏览器窗口的定位

相对定位——relative

注意：

开启相对定位的元素没有脱离文档流；
开启相对定位的元素并不是相对于页面定位的，而是相对于当前元素在文档流中的位置的。当top和left的值为0时，相对定位元素并不会发生变化；
父元素是否开启定位，并不会影响子元素。

阅读全文

0 0