lesson04 盒子模型

最新推荐文章于 2024-07-16 17:18:30 发布

汤三石

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量51

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45437848/article/details/121989020

版权

4、盒子模型

4.1 什么是盒子

在这里插入图片描述
margin：外边距
padding：内边距
border：边框

4.2 边框

1.边框粗细
2.样式
3.颜色

4.3 外边距内边距

<style>
        body{
            /*body总有一个默认的外边距margin*/
            margin: 0;
        }
        #box{
            width:300px;
            /*border: 粗细，样式，颜色;*/
            border: 1px solid red;
            margin: 0 auto;
        }
        input{
            border:1px solid black;
        }
    </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>

4.4圆角边框

在这里插入图片描述

4.5 盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border-radius: 514px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div>
  <img src="imag/头像.png" alt="">
</div>
</body>
</html>

在这里插入图片描述

5、浮动

5.1 标准文档流

在这里插入图片描述
块级元素：独占一行
h1-6 p div 列表
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素中，反之，则不可以。

5.2 display

也是一种实现行内元素排列元素的方式，但是更多使用float。

5.3 float

左右浮动

5.4 父级边框塌陷问题(CSS 笔试必考）

clear：right；右侧不允许有浮动元素
clear：both；两侧不允许有浮动元素
解决方案：
1、增加父级元素的高度
2、增加一个空的div

<div class="clear"></div>
.clear{
			clear: both;
			margin: 0;
			padding: 0;
			}

3、overflow
在父级元素中增加一个overflow

overflow： hidden；

4、父类添加一个伪类：after

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

5.5 对比

6 定位

6.1 相对定位

position：relative；
相对于原来的位置，进行指定的偏移。
在这里插入图片描述

6.2 绝对定位

定位：基于XXX定位，上下左右~
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置会被保留。

6.3 Z-index

层级。

汤三石

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
lesson04 盒子模型

4、盒子模型4.1 什么是盒子margin：外边距padding：内边距border：边框4.2 边框1.边框粗细2.样式3.颜色4.3 外边距内边距<style> body{ /*body总有一个默认的外边距margin*/ margin: 0; } #box{ width:300px; /*border: 粗细，样式，颜色;*/
复制链接

扫一扫