1.24CSS3盒子和浮动了解

最新推荐文章于 2024-08-14 09:51:23 发布

Bug制造者_moyi

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量88

点赞数

分类专栏：学习笔记 CSS3 文章标签： css

本文链接：https://blog.csdn.net/saber_Q7/article/details/113104103

版权

CSS3 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

学习笔记

2 篇文章 0 订阅

订阅专栏

CSS3

1.盒子的使用

margin：外边距
margin：0，居中的意思，但是元素需要有固定宽度
padding：内边距
border：边框（粗细、虚实（dashed/solid）、颜色）
尺寸判定：margin+border+padding+内容（并非单指内容大小）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style>
        #xiNei{
            margin:0 400px;
        }
    body{
        text-align: center;
        margin: 0px;
    }
    h3{
        color: white;
        background-color: green;
    }
    div{
        background-color: pink;
    }
    div:nth-of-type(1) input{
        border: 1px solid red;
        height: 15px;
    }
    </style>
</head>
<body>
<div id="xiNei">
<h3>京东登录</h3>
<form action="#">
    <div>
        <span>账户：</span>
        <input type="text" value="">
    </div>
    <div>
        <span>密码：</span>
        <input type="text" value="">
    </div>
    <div>
        <span>邮箱：</span>
        <input type="text" value="">
    </div>
</form>
</div>
</body>
</html>

结果如图所示：

2.圆角边框

圆角=半径+边框
border-radius:
- 后面一个值，表示上下左右四个角都为这个值
- 四个值，顺序为顺时针，上、右、下、左

代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            border: 5px solid pink;
            border-radius: 60px;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

效果图：

3.dsiplay和浮动

display:block：块元素
display:inline：行内元素
display:inline-block：行内块元素，shi

display:none：消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            width: 50px;
            border: 2px solid red;
            /*div块转换为行内元素*/
            display: inline;
        }
        span{
            height: 50px;
            width: 50px;
            border: 2px solid red;
            /*将span转换为行内块元素*/
           display: inline-block;
        }
    </style>
</head>
<body>
<span>阿西小巴</span>
<div>阿西大巴</div>

</body>
</html>

效果为：

在这里插入图片描述

float：浮动
float：left/right，左右浮动

clear：定义的元素周围不能有浮动,如果有，自己跳到下一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #fa{
            height: 50px;
            border: 1px solid green;
        }
        div{
            border: 5px solid green;
        }
        .xi1{
            float: left;
        }
        .xi2{
            float: right;
        }
        .xi3{
            float: right;
            clear: both;
        }
    </style>
</head>
<body>
<div id="fa">
<div>??????????????????????????????????????????????????????????????</div>
<div class="xi1"><img src="image/13.jpg" alt=""></div>
<div class="xi2"><img src="image/14.jpg" alt=""></div>
<div class="xi3"><img src="image/15.jpg" alt=""></div>
</div>
</body>
</html>

效果为：

4.overflow和父级边框塌陷

解决塌陷的常见办法（在3.的代码上修改）

增加父级元素的高度

#fa{
            height: 700px;
            border: 1px solid green;
        }

增加一个空的div

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

父级元素增加overflow

#fa{
            border: 1px solid green;
            overflow: hidden;
        }

父级元素添加伪类：after

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

Bug制造者_moyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.24CSS3盒子和浮动了解

CSS31.盒子的使用margin：外边距margin：0，居中的意思，但是元素需要有固定宽度padding：内边距border：边框（粗细、虚实（dashed/solid）、颜色）尺寸判定：margin+border+padding+内容（并非单指内容大小）代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl
复制链接

扫一扫

专栏目录