学习web前端历程（十三）

最新推荐文章于 2024-08-02 11:13:55 发布

原创最新推荐文章于 2024-08-02 11:13:55 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS浮动与定位 #position定位 #display属性 #浏览器内核及其前缀 #z-index堆叠顺序

本文深入讲解CSS布局核心概念，包括浮动、定位、清除浮动、display属性、position定位、浏览器内核前缀、Z-index堆叠顺序及居中技巧。探讨不同定位方式的特点，如浮动定位、相对定位、绝对定位和固定定位，以及如何解决浮动带来的布局问题。

CSS浮动与定位、CSS清除浮动、display属性、position定位、浏览器内核及其前缀、Z-index堆叠顺序、居中总结

一、CSS浮动和定位

1.css浮动、定位
定义元素框相对于正常位置应该出现的位置（与原来无变化）
2.分类
普通流定位、浮动定位、相对定位、绝对定位、固定定位

3、浮动定位（浮动元素）
将元素排除在普通流之外，不在页面占据空间，将元素放在包含框的左边或者右边，元素依旧位于包含框内（可左右移动，直到碰到另一浮动框的边框或包含框为止）
且其不会重叠，不会上下浮动
一般浮动应用于文字的环绕

float: leftfloat: left/right/none;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css浮动和定位</title>
    <style>
        /*div{
            width: 200px;
            height: 200px;
        }*/
        .one{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            float: left;

        }
        .three{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
</body>
</html>

二、CSS清除浮动

清除浮动在使用浮动后是必不可少的

属性：
clear:left/right/both;

清除浮动的常用方式：
（1）结尾处加空的div标签 clear：both（或在下个元素加clear：both）

.clear{    方法一
            clear: both;
        }

（2）浮动元素父级div定义伪元素：：after

.parent::after{
            content: url("");
            display: block;  /*升级为块级元素   方法二
            clear:both;

（3）浮动元素父级div定义 overflow: hidden
（4）浮动元素父元素定高

 .parent{
            border: 1px solid red;
            /*overflow: hidden;   方法三*/
            /*height: 200px;       方法四 定高*/
        }

三、display属性

每个网页都有一个display元素，用于确定该元素的类型，每个元素都有默认的display属性值，例如div默认的是“block”块级元素，span默认为“inline”行内元素
（块元素与行内元素可以转换，display属性可以由我们改变）

display常见属性：

属性	描述
none	隐藏对象（但是还占据空间）
inline	指定对象为内联元素
block	指定对象为块级元素
inline-block	指定对象为内联块级元素（识别代码空间）
table-cell	指定对象为表格单元格
flex	弹性盒子

注意：
display：none、opacity：0、visbility：hidden的区别
（1）opacity：0和visbility：hidden会将元素隐藏，但是物理空间还在
（2）display：none隐藏元素，不保存物理空间

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        .box>div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*float: left;*/
            display: inline-block;
            /*display:inline;*/
            /*display: block;*/
            /*display: table-cell;*/
            /*vertical-align: middle; !*竖直居中*!*/
            /*display: none;*/
            /*opacity: 0;*/
            visibility: hidden;
        }

        .box>div:nth-child(2)
        {
            background-color: hotpink;
        }
        .box>div:last-child{
            background-color: deeppink;
        }
        span{
            width: 1200px;
            height: 700px;
            background-color: #cc0000;
            display: block;/*转换为块级元素*/
        }
    </style>
</head>
<body>
<!--
display属性：
inline-block    行内块元素  即在同一行显示，又可以设置宽高，margin和padding是可以设置四周
（注意：识别代码之间的空白）
block 指定对象为块元素
inline   指定对象为内联元素
none  隐藏对象
table-cell    设置为单元格
flex    弹性盒子
-->
<div class="box">
    <div>
        <div style="width: 100px;height: 100px;background-color:indianred;margin:0 auto"></div>
    </div>
    <div></div>
    <div></div>
</div>
<!--<span>leikuan</span>-->
<!--<span>leikuan</span>-->
<!--<span>leikuan</span>-->
<span>leikian</span>
</body>
</html>

四、position定位

position属性指定一个元素（静态、相对、绝对、固定）的定位方法类型
（偏移=定位模式+偏移量）

1、static 静态定位
对偏移量不起作用，一般应用于去除定位

2、relative 相对定位（自恋型）
（1）相对于自己来偏移，相对于原来左上角基点的偏移
（2）通过偏移来移动位置，但是原来的位置还存在
（3left、top、right、bottom

3、absolute 绝对定位
(1)相对于整个浏览器来偏移的
（2）如果发生偏移，那么它不在占有空间
（3）left、top、right、bottom

4、fixed 固定定位（不动）
不随着内容的滚动而动（利于桌面旁边出现的新闻条）
（3）left、top、right、bottom

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:pink;
            /*left: 20px;
            top: 30px;
            position: static;*/
        }
        div:nth-child(1)
        {
            left: 20px;
            top: 30px;
            position: absolute;
        }
        div:nth-child(2){
            background-color: hotpink;
            width: 300px;
            height: 300px;
            /*left: 30px;
            top: 30px;
            position: relative;*/
        }
        /*div:nth-child(3){
            background-color: deeppink;
        }*/
    </style>
</head>
<body>
<div>
    <div></div>
    <div></div>
<!--    <div></div>-->
</div>
</body>
</html>

不占文档流的空间
浮动 float、绝对定位 absolute、固定定位 fixed 、元素不显示 display：none

五、浏览器内核及其前缀

根据不同的浏览器内核，css前缀会有不同，以下四种基本浏览器

                           前缀
1、Gecko内核               -moz-          火狐浏览器
2、webkit内核              -webkit-       谷歌内核（chrome最先开发使用、
Safari、360、猎豹浏览器、世界之窗都在用）
3、Trident内核             -ms-           IE内核
4、presto内核              -o-            目前只有opera使用

背景切割

-webkit-background-clip:content-box;
属性值 ：
1.text               从文本区域开始实现背景（切割文字）
2.border-box         从边框开始实现背景
3.padding-box        从padding区域开始实现背景
4.content-box        从内容区域开始实现背景

缓慢移动：
           -webkit-transition: 1s;         谷歌
            -moz-transition: 1s;           火狐
            -ms-transition:1s;             IE
            -o-transition: 1s;             opera
            transition: 1s;                W3c标准模式

背景切割代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器内核及其前缀</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border: 30px solid rgba(255,255,255,.5);
            background: url("images/lixian.jpg") no-repeat;
            margin: 30px auto;
            padding: 120px;
            font-size: 200px;
            font-weight: bolder;
            color:rgba(255,255,255,.5) ;
        /* 背景切割*/
          -webkit-background-clip:content-box;
        }
    </style>
</head>
<body>
<div>
    李现李现
</div>
</body>
</html>

显示页面：
在这里插入图片描述
浏览器内核的例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器内核的例子</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            -webkit-transition: 1s;/*谷歌*/
            -moz-transition: 1s; /*火狐*/
            -ms-transition:1s;/*IE*/
            -o-transition: 1s;/*opera*/
            transition: 1s; /*W3c标准模式*/
        }
        div:hover{
            width: 500px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

六、Z-index堆叠顺序（要先有定位元素才可以使用）

（1）一旦修改元素定位方式，则元素可能会发生堆叠
（2）使用Z-index元素来控制元素出现的重叠顺序
（3）Z-index仅能在定位的元素上生效

Z-index的属性：
（1）值为数值，数值越大表示堆叠顺序越高，离用户越近
（2）也可为负值，表示离用户远（一般不设置）
（3）Z-index只在定位元素上生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆叠顺序</title>
    <style>
        div{
            width: 200px;
            height:200px;
            background: pink;
            position: absolute;/*决对定位*/
        }
        div:nth-child(1)
        {
         z-index: 1;
        }
        div:nth-child(2){
            background-color: hotpink;
            left: 30px;
            top: 30px;
            z-index: 5;
        }
        div:nth-child(3){
            background-color: deeppink;
            left: 60px;
            top: 60px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

七、居中总结

1.内容水平居中 text-align
2.一行文字水平居中 line-height=height
3.盒子居中例子：

div{
            width: 200px;
            height: 200px;
            background-color: #cc0000;
            margin: 0px auto;

        }

4.子元素在父元素里边

（1）弹性盒子

            display: flex;  
            align-items: center;
            justify-content: center;

（2）table-cell

            display: table-cell; 
            vertical-align: middle;（父元素里边）
            margin: 0 auto; （子元素里边）

(3）绝对定位

  position: relative;（父元素里边）
  position: absolute;(子元素里边)
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中总结</title>
    <style>
       /* div{
            width: 200px;
            height: 200px;
            background-color: #cc0000;
            margin: 0px auto;

        }*/
        .parent{
            width: 400px;
            height: 400px;
            background-color: deeppink;
            /*display: flex;  弹性盒子
            align-items: center;
            justify-content: center;*/
            /*display: table-cell; table-cell
            vertical-align: middle;*/
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
           /* margin: 0 auto;*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>