CSS简单入门（二）

最新推荐文章于 2024-08-16 20:24:29 发布

tylambition

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量128

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/tylambition/article/details/104271549

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

4.盒子模型

4.1什么是盒子模型

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2边框

边框的粗细
边框的样式

边框的颜色

       /*border：粗细 样式 颜色*/
        #login-box{
            width: 250px;
            height:150px;
            background: antiquewhite;
            border: 1px solid #a54e3e;
        }

在这里插入图片描述

4.3内外边距

 /*
        margin：0代表上下左右
        margin：0 1px代表上下，左右
        margin：0 0 0 0代表上-右-下-左 
		padding内边距使用一样
        */
        div:nth-of-type(1)>input {
            border: 2px solid black;
            padding:0 0 0 0;
            margin: 0 auto;
        }
        /*注意：margin顺序是顺时钟，上-右-下-左*/
        div:nth-of-type(2)>input {
            border: 2px dashed black;
            margin: 0 0 0 15px;
        }

        /*注意：margin顺序是顺时钟，上-右-下-左*/
        div:nth-of-type(3)>input {
            border: 2px solid black;
            margin: 0 0 0 15px;
        }

盒子的计算方法：你这个元素到底多大？

margin+border+padding+内容宽度

4.4边框圆角

4个角

  /*
        左上 右上 右下 左下 顺时钟
        2个：左上右下，右上左下
    
        圆圈：圆角=半径
        */
        div{
            width: 100px;
            height: 100px;
            border: 5px solid red;
            border-radius:100px;
        }

4.5盒子阴影

/*
 box-shadow：水平阴影位置 垂直阴影位置 模糊距离(可选) 颜色（可选）
*/
div{
    width: 100px;
    height: 100px;
    border: 5px solid red;
    box-shadow: 10px 10px 10px yellow;
}

在这里插入图片描述

https://www.layui.com/doc/element/anim.html Layui

https://element.eleme.cn/#/zh-CN/component/avatar vue

https://ice.work/component/icon 飞冰

5.浮动

5.1标准文档流

说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之，则不可以

5.1display

 /*
   block 块元素
   inline：行内元素
   inline-block：是块元素，但是可以内联，在一行！
   none
   */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }

        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }

这是一种实现行内元素排列的方式，但是很多情况都是用float

5.2float

左右浮动

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}

.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float:right;
}

.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float:right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float:right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float:right;
}

5.3父级边框塌陷问题

clear

/*
clear:right;右侧侧不允许有浮动元素
clear：left;左侧不允许有浮动元素
clear：both;两侧不允许有浮动元素
clear：none;
*/

解决方案：

1.增加父级元素的高度(不建议使用)

#father{
    border: 1px #000 solid;
    height: 300px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
   clear: both;
   margin: 0;
}

overflow

在父类元素中增加一个 overflow:hidden;

父类元素增加一个伪类：after

  #father:after{
   content: "";
   display: block;
   clear: both;
}

小结

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素高度

简单，元素假设有了固定的高度，就会被限制
overflow

简单，下拉的一些场景避免使用
父类元素增加一个伪类：after

推荐使用

5.5对比

display

方向不可控
float

浮动起来会脱离标准文档流，需解决父级框架塌陷问题

6定位

6.1相对定位

position：relative;

top:相对原来的位置上面距离；

left：相对原来的位置左边距离；

bottom：相对原来的位置下面距离；

right：相对原来的位置右边距离；

注：相对原来的位置，进行指定的偏移，相对定位它依旧在标准文档流中，原来的位置会被保留！

   #first {
            background-color: red;
            border: 1px dashed chartreuse;
            position: relative;/*相对定位 上下左右*/
            top: 20px;
            left: 10px;
        }

测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    相对定位
    相对于自己原来的位置进行偏移-->
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red ;
        }
        a{
            width: 100px;
            height: 100px;
            display: block;
            text-decoration: none;
            background-color: deeppink;
            line-height: 100px;
            text-align: center;
            color:white;
        }
        a:hover{
            background-color: chartreuse;
        }
        .a2,.a4{
            position: relative;
            left:200px;
            top:-100px
        }
        .a5{
            position: relative;
            left:100px;
            top:-300px
        }
    </style>
</head>
<body >
<div id="box">
    <a href="#" class="a1">第一个盒子</a>
    <a href="#" class="a2">第二个盒子</a>
    <a href="#" class="a3">第三个盒子</a>
    <a href="#" class="a4">第四个盒子</a>
    <a href="#" class="a5">第五个盒子</a>
</div>

</body>
</html>

在这里插入图片描述

6.2绝对定位

定位：基于XXX定位，上下左右

没有父级元素定位的前提下，相对浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

注:相对于父级或浏览器的位置，进行指定的偏移，绝对定位它不在标准文档流中，原来的位置不会被保留

position:absolute;

6.3固定定位fixed

 div:nth-of-type(2){/*fixed 固定定位*/
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            position: fixed;
            right: 0;
            bottom: 0;
        }

6.4 z-index

对比ps图层理解即可

图层

z-index:默认是0，最高无限;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/z.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="b.jpg"></li>
        <li class="textname">狗尾巴花</li>
        <li class="tipbg"></li>
        <li>时间：2020-01-01</li>
        <li>地点：火星</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 120px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 10px;
    line-height: 20px;
    border: 1px solid black;
}

ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

/*父类元素相对定位*/
#content ul{
    position: relative;
}
.textname,.tipbg{
    position: absolute;
    width: 120px;
    height: 20px;
    top:60px;
}
.textname{
    color: red;
    z-index:999;/*默认是0，最高无限*/
}
.tipbg{
    background: #000;
    opacity: 0.5;/*背景透明度*/
}

在这里插入图片描述

tylambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简单入门（二）

4.盒子模型4.1什么是盒子模型margin：外边距padding：内边距border：边框4.2边框边框的粗细边框的样式边框的颜色 /*border：粗细样式颜色*/ #login-box{ width: 250px; height:150px; backgro...
复制链接

扫一扫

专栏目录