Web网页设计-盒子模型

最新推荐文章于 2024-03-03 21:20:09 发布

馥滢（＇▿ ＇）

最新推荐文章于 2024-03-03 21:20:09 发布

阅读量4.1k

点赞数 3

文章标签： html css 前端 web

本文链接：https://blog.csdn.net/qq_55439444/article/details/127556118

版权

盒子模型就是把页面中的HTML元素看作一个方形的盒子，也可以理解为一个盛装内容的容器。
每个盒子都由元素的内容、内边距(padding)、边框(border)和外边框(margin)组成。

边框属性
上边框：border-top-style样式
border-top-width宽度
border-top-color颜色（默认为字体颜色）
右边框：border-right-style样式
左边框：border-left-style样式
none：没有边框
solid：单线
double：双线
dashed:虚线
dotted:点线

内边距属性
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上右下左

外边框属性
margin #0px浏览器默认0px
可以为负值

背景属性
background-color:背景颜色
background-image: url(img/he.png);背景图片
background-position:指定背景图片出现的元素中的位置
background-attachment:可以将背景图像固定
scroll:滚动
fixed:固定

宽高
width: 100px;
height: 100px;
宽度属性和高度属性仅适用于块级元素，对行内元素无效。
特殊的行内元素img和input除外。

透明度
颜色透明度
rgb
rgba
opacity:使任意颜色呈现透明

圆角
border-radius:水平半径参数/垂直半径参数，将矩形边框四角圆角化，实现圆角效果。
overflow: hidden;溢出

图片边框
border-image-source:指定图片的路径
border-image-slice:指定边框图像顶部、右侧、底部、左侧向内偏移量
border-image-width:指定边框宽度
border-image-outset:指定边框背景向盒子外部延伸的距离
border-image-repeat:重复出现

阴影
box-shadow:h-shadow v-shadow blur spread color outset(默认);

渐变
background-image:linear-gradient(参数值);样式可以实现线性渐变效果。
像素值/百分比：用于定义形状的水平和垂直半径。
circle:指定圆形的径向渐变。
ellipse:指定椭圆形的径向渐变。

径向渐变
background-image: radial-gradient(circle at center,red,#fff,green);
像素值/百分比：用于定义圆心的水平和垂直半径。
circle at center/left/right/bottom

多背景图像
background-image

修剪背景图像
设置背景图像的大小
background-size：属性值1 属性值2；
像素值：设置一个值，第二个值默认为audo。
百分比：按比例缩放（宽的百分比高的百分比）。
cover：按图片最大值全部填充覆盖，全部可视化区域填充满，未必显示全。
contain：显示满，未必填充全。
背景图片起始显示位置
background-origin: border-box;
background-clip: content-box;

元素的类型
块元素：每个块元素都会单独占据一行或多行
特点：不会独自占据一行，不可以设置宽度、高度、对齐等属性
作用：用于控制页面中文本样式
常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<il>等

行内元素中有几个特殊的标签。例如：<img>、<strong>、<b>、<em>、<div>、<span>

<div>标记是一个块容器标记
<span>

p*6+Tab键
快速生成6个<p></p>
p.box.box${hhhh$}*4+Tab键
快速生成4个<p class="box box1">hhhh1</p>
.box.box${h$}*4
快速生成4个<div class="box box1">h1</div>
span{行内$}*4
<span>行内1</span><span>行内2</span><span>行内3</span><span>行内4</span>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				text-align: center;
				/* display: inline; */
			}
			.box{
				width: 200px;
				height: 100px;
			}
			.box2,.box3{
				display: inline-block;
			}
			.span{
				width: 100px;
				height: 100px;
			}
			.span1{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box box1">1</div>
		<div class="box box2">2</div>
		<div class="box box3">3</div>
		<div class="box box4">4</div>
		<span class="span span1">行内1</span>
		<span class="span span2">行内2</span>
		<span class="span span3">行内3</span>
		<span class="span span4">行内4</span>
	</body>
</html>

相邻块元素垂直外边距的合并（外边距塌陷）
margin-bottom下外边距
margisn-top上外边距

设计一个三角形：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				width: 0px;
				height: 0px;
				/* padding: 20px; */
				/* background-color: red; */
				border: 50px solid transparent;
				border-bottom-color: red;
			}
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>