CSS样式——盒模型

最新推荐文章于 2022-05-12 11:21:03 发布

炽叶

最新推荐文章于 2022-05-12 11:21:03 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/Mon3tr/article/details/100593057

版权

盒模型：

width
height
border(边框)

border-top
border-right
border-bottom
border-left

margin(外边距，即盒子与盒子间的距离)

margin-top
margin-right
margin-bottom
margin-left

margin:20px auto 40px;
(第一个盒子与顶端相距20像素，左右居中，第二个盒子与第一个盒子相距40像素)

padding(内边距，即盒子边缘与内容之间的距离）
注意: padding是盒子四周都增加像素，所以设定盒子width和height时注意减去padding值的两倍。否则盒子变大。

padding:10px；                //四个方向一样
padding:20px 10px；           //上下 / 左右
padding:10px 20px 30px;       //上 / 左右 / 下
padding:10px 20px 30px 40px;  //上右下左

运用举例：

<!DOCTYPE>
<head>
<meta content="text/html;charset=gb2312"/>
<title>盒模型</title>
<style>
.box{
		width:100px;
		height:100px;
		border-bottom:2px solid red;    /*solid表示实线*/
		border-top:2px double black;	/*double表示双曲线*/
		border-left:2px dotted green;	/*dotted表示点线*/
		border-right:2px dashed yellow; /*dashed表示虚线*/
		padding:20px;
		margin:20px;
	}
</style>
</head>
<body>
	<div class="box">
		马上周末了，好开心！！！
	</div>
	<div class="box">
		马上周末了，好开心！！！
	</div>
</body>
</html>

效果图：
在这里插入图片描述
display:block/inline/inline-block/none;

block : 将元素转换成块级元素
inline : 将元素转换成行内元素
inline-block : 将元素转换成行内块元素
none : 元素不显示

inline-block和none的应用例子：
使用display:inline-block将box下的div转换为行内块元素；
使用display-none将.box .last的元素隐藏

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>display:inline-block</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
		/* * { margin: 0; padding: 0; } 主要用途是重置不同的浏览器默认样式,以达到不同浏览器显示网页的结果不会差太远的效果*/
        body{
            background-color: #ccc;
        }
        .box{
            width: 1160px;
            height: 60px;
            padding: 20px;
            font-size: 0px;
            background-color: #fff;
            margin: 100px auto;
        }
        .box div{
            width: 230px;
            height: 60px;
            display: inline-block;/*将元素转换成行内块元素*/
            background-color: #ccc;
            border-right:2px solid red;
        }
        .box .last{
            border-right: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>
</body>
</html>