CSS盒子模型

最新推荐文章于 2022-04-23 11:28:25 发布

「已注销」

最新推荐文章于 2022-04-23 11:28:25 发布

阅读量550

点赞数

分类专栏：前端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/m0_62786471/article/details/120939540

版权

本文详细介绍了CSS中的盒子模型，包括盒子模型概述、边框样式、边框宽度、边框颜色、综合设置边框、圆角边框、图片边框、内边距、外边距、box-shadow属性和box-sizing属性，以及背景颜色、背景图像和透明度设置。通过实例展示了如何应用这些属性来实现各种视觉效果。

摘要由CSDN通过智能技术生成

一、盒子模型概述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

让我们自己算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

二、盒子模型相关属性

1.边框样式

边框样式(border-style)

border-style: 上边[右边  下边  左边]

solid 边框为单实线 dashed 边框为虚线

dotted 边框为点线 double 边框为双实线

写法:

p{border-style:dashed  solid  solid  solid  solid;}

综合例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">

h2{
	border:double;/*只有一个属性值  表示四边为改样式*/
}

p:nth-of-type(1){  /*两个属性值  上下一组  左右一组*/
	border-top-style:dotted;
	border-bottom-style:dotted;
	border-left-style:solid;
	border-right-style:solid;	
}

p:nth-child(3){/*三个属性值，上 左右  下*/
	border-style:solid dotted dashed;
}

div:nth-last-of-type(1){
	border-style: dashed double solie dotted;/*四个属性值按照顺时针   上 右 下 左*/
	                                         
}
</style>

</head>

<body>   	
<h2>边框样式双实double线</h2>
<p  id="one"> 边框样式，上下为点线，左右为单实线</p>
<p  id="two"> 边框样式，上边框单实线，左右点线，下虚实线</p>
<div>上虚线，下单实线，左点线，右双实线。</div>
</body>

</html>

2.边框宽度

border-width: 上边[右边  下边  左边]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>