CSS（二）盒子模型、浮动、定位

于 2020-02-03 18:43:31 发布
阅读量308 收藏 2
点赞数
分类专栏： css 文章标签： css
只能看不能摸哟！
本文链接：https://blog.csdn.net/weixin_45677145/article/details/104158394
版权
四、盒子模型

4.1、什么是盒子模型？
这些属性令它像一个盒子一样，就叫做盒子模型。
在这里插入图片描述
margin:外边距
padding：内边距
border：边框

盒子的计算方式：你这个元素到底多大？
margin + border + padding + 内容宽度

4.2、边框
1、边框的粗细
2、边框的样式
3、边框的颜色
在这里插入图片描述
用红框框起来的部分就是用来设定边框的属性的。

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--外边距的妙用：居中元素
     margin: 0 auto;
    -->
    <style>
    	#box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        /*
        顺时针旋转
        margin:0
        margin:0 1px
        margin:0 1px  2px   3px
	*/
	 h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
            margin:0 1px 2px 3px;
        }
	 form{
            background: #3cbda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

结果：可以控制盒子的位置。在这里插入图片描述
4.4、圆角边框

<style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}
</style>

原来是正方形，现在就是四个角都变成圆角了

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- margin: 0 auto; 居中
要求： 块元素，块元素有固定的宽度
-->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
	<div style="width: 500px;display: block;text-align: center">
        <img src="images/tx.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述
图片周围有黄色的阴影。

五、浮动

5.1、标准文档流
块级元素：独占一行
例如h1~h6 p div 列表...
行内元素：不独占一行
例如span a img strong....
行内元素 可以被包含在 块级元素中，反之，则不可以~
在这里插入图片描述
5.2、display

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

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

5.3、float
1、左右浮动 float

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.4、父级边框塌陷的问题
clear

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

解决方案：
1、增加父级元素的高度~
简单，元素假设有了固定的高度，就会被限制

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

2、增加一个空的div标签，清除浮动
简单，代码中尽量避免空div

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

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

3、overflow
简单，下拉的一些场景避免使用

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

4、父类添加一个伪类：after
写法稍微复杂一点，但是没有副作用，推荐使用！

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

一般推荐使用伪类。

5.5、对比
display：方向不可以控制。
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

六、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	 <!-- 相对定位
    相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative; /*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述
相对定位：position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留！

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

练习题：链接卡
将五个链接按要求排列，并且鼠标放上去会变色

<!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;
            text-decoration: none;
            background: #ffa1f2;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #47a4ff;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
   </style>
</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>

</body>
</html>

结果：如图，鼠标放上去截图不好截，就没截到效果图，你们可以把代码拿去自己试验。
在这里插入图片描述
6.2、绝对定位
定位：基于xxx定位，上下左右~

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~

3、在父级元素范围内移动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
            position: absolute;
            left: 100px;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

在这里插入图片描述
6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

在这里插入图片描述
红色的块是可以随着浏览器旁边的拉动而发生位置变化的。鉴于我不会截动图，就放两张照片大家将就着看看吧。
在这里插入图片描述
6.4、堆叠顺序
图层~一层压着一层

z-index： 默认是0，最高无限~ 999
opacity: 0.5; /背景透明度/

拥有较高堆叠顺序的元素总是会处于堆叠顺序较低的元素之前在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
       img {
           position: absolute;
           left: 0px;
           top: 0px;
          z-index: -1; /*图片在文字下面*/
           opacity: 0.5;/*设置透明度*/
           background-color: #ff0c2c;
       }
    </style>
</head>
<body>
<h1>大标题</h1>
<img src="../1.模仿QQ登录界面/img/logo.png" alt="meile" />
</body>
</html>

没设置透明度之前在这里插入图片描述
设置了透明度之后
在这里插入图片描述这次的分享就到这里了，再见~

我是大肥鼠
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值