前端学习之基础篇——盒模型
一、简介
概念、内容 content、内边距 padding、边框 border、外边距 margin
二、盒模型
1、概念
css盒模型本质是一个盒子,封装周围的html标签
2、内容 content
- width: 设置宽度
- height: 设置高度
3、内边距(填充区域)padding
- 单边内边距:padding-top padding-bottom padding-left padding-right
-
简写 :
-
一个值:表示四个方向的内边距值。
-
两个值:分别表示上下,左右的内边距值
-
三个值:分别表示上,左右,下的内边距值
-
四个值:分别表示上,右,下,左的内边距值
<head>
<style>
.box1{
/*
width和height,默认规定内容区域大小
内容区域放置所有文字或者子标签
*/
width: 200px;
height: 200px;
background-color: salmon;
/*
内边距 padding
内边距规定内容到边框的距离
一个值:四个边内边距
两个值:上下、左右
三个值:上、左右、下
四个值:上、右、下、左
设置单边内边距
padding 方向(left左 right右 top上 bottom下)
*/
/* padding:20px 30px 40px 50px; */
padding-top: 20px;
}
.box2{
width: 30%;
height: 40%;
background-color: sienna;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
4、边框 border
- border-width
- border-style
- none 定义无边框
- dotted 定义点状边框
- dashed 定义虚线边框
- solid 定义实现边框
- double 定义双线。双线的高度等于border-width的值
- border-color
- border-radius
- 圆角属性
- border-radius: 10px 20px 30px 40px (圆 50%)
<head>
<style>
.box1{
width: 300px;
height: 300px;
background-color: indigo;
/*
圆角属性
*/
/* border-radius:30px */
/* border-radius:10px 20px 30px 40px; */
/*
如果设置为50%,会变成一个圆形,椭圆还是正圆根据宽高来控制
*/
border-radius: 50%;
}
/* 半圆 */
.box2{
width: 400px;
height: 200px;
background-color: lawngreen;
border-radius: 200px 200px 0 0;
}
/* 四分之一圆 */
.box3{
width: 300px;
height: 300px;
background-color: lightcoral;
border-radius: 100% 0 0 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
5、外边距 margin
- 单边外边距 : margin-top margin-bottom margin-left margin-right
- 简写与内边距相同
- 外边距
<head> <style> *{ /* 去掉所有标签自带边距 */ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; background-color: rosybrown; /* 外边距可以设置负值 */ /* margin: 20px;*/ margin-left: -30px; } </style> </head> <body> <div class="box"> hello world </div> </body>
- 外边距实现盒子居中
<head> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background-color: skyblue; margin: 0 auto; margin: 30px; } </style> </head> <body> <div class="box"></div> <div class="wrap1"> <div class="box1"></div> </div> </body>
- 外边距塌陷问题
<head> <style> *{ padding: 0; margin: 0; } .wrap{ width: 300px; height: 300px; background-color: skyblue; /* 外边距塌陷问题: 解决: 1、给父标签加边框或者内边距 2、父标签加overflow:hidden;(溢出隐藏) */ /* border: 1px solid #000; */ /* padding:1px; */ overflow: hidden; } .box1{ width: 50%; height: 50%; background-color: slateblue; margin-top: 30px; } </style> </head> <body> <div class="wrap"> <div class="box1"></div> </div> </body>
6、盒子居中
<head>
<style>
.wrap{
width: 300px;
height: 300px;
background-color: cornflowerblue;
}
.box1{
width: 100px;
height: 100px;
background-color: cyan;
margin: 0 auto;
}
.wrap2{
width: 300px;
height: 300px;
background-color: darkblue;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 300px;
}
.box2{
background-color: darkgoldenrod;
}
.wrap3{
width: 300px;
height: 300px;
background-color: darksalmon;
/* text-align: center;
line-height: 300px; */
}
img{
width: 100px;
height: 100px;
/* vertical-align: middle; */
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 块级居中 margin:0 auto; -->
<div class="wrap">
<div class="box1"></div>
</div>
<!-- 行内居中:行内标签具有文字的对齐属性 -->
<div class="wrap2">
<span class="box2">hello world</span>
</div>
<!--
行内块居中:
1.父标签加text-align:center;
2.先display:block转换为块级,在加margin:0 auto;
-->
<div class="wrap3">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1282406071,187117223&fm=26&gp=0.jpg" alt="">
</div>
</body>