Css(三)

最新推荐文章于 2024-05-17 16:16:33 发布

VIP文章番茄好困

最新推荐文章于 2024-05-17 16:16:33 发布

阅读量147

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/nanci9/article/details/122044198

版权

Css(三)

1.盒子模型

1.1盒子模型组成

边框border
内容content
内边距padding
外边距margin

1.2边框属性

p{
   
  border:5px solid red;
}

只设置其上边框

p{
   
  border-top: 5px solid red;
}

边框会影响盒子大小

1.3内边距

边框与内容之间的距离

div {
   
	padding: 5px 10px 15px 20px;
}

值的个数	描述
padding: 5px;	代表上下左右都是5px
padding: 5px 10px;	代表上下5px 左右10px
padding: 5px 10px 20px;	代表上5px 左右10px 下20px
padding: 5px 10px 20px 30px;	代表上右下左（顺时针）

内边距也会影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航案例</title>
    <style>
        .nav {
     
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edddf0;
            height: 41px;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        a {
     
            line-height: 41px;
            text-decoration: none;
            font-size: 12px;    
            color: #4c4c4c;
            display: inline-block;
            height: 41px;
            padding: 0 20px;
        }
        a:hover {
     
            color: sandybrown;
        }
    </style>
</head>
<body>
    <

最低0.47元/天解锁文章

番茄好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css(三)

Css(三)1.盒子模型1.1盒子模型组成边框border内容content内边距padding外边距margin1.2边框属性p{ border:5px solid red;}只设置其上边框p{ border-top: 5px solid red;}边框会影响盒子大小1.3内边距边框与内容之间的距离div { padding: 5px 10px 15px 20px;}值的个数描述padding: 5px;代表上下左右都是5px
复制链接

扫一扫