CSS -盒子模型

最新推荐文章于 2024-07-16 17:16:30 发布

寇大大

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量57

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43322680/article/details/116484129

版权

前端基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

盒子模型

1、什么是盒子模型

2、边框

边框颜色 border-color

边框粗细 border-width

thin
medium
thick
像素值

border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

边框样式 border-style

none
hidden
dotted
dashed
solid
double

border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

border简写 同时设置边框的颜色、粗细和样式

border:1px solid #3a6587;
border: 1px dashed red;

3、内外边距

外边距 margin

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

margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

外边距的妙用：网页居中对齐

margin:0px auto;

网页居中对齐的必要条件

块元素
固定宽度

内边距 padding

padding-left
padding-right
padding-top
padding-bottom

padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;

4、盒子型模尺寸

box-sizing

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
div{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
box-sizing: border-box;
/*box-sizing: content-box; /!* 默认值*!/*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

5、圆角边框

四个属性值按顺时针排列

border-radius: 20px 10px 50px 30px;

border-radius制作圆形

元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作圆形</title>
<style>
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

border-radius制作半圆形

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作半圆形</title>
<style>
div{
background: red;
margin: 30px;
}
div:nth-of-type(1){
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
div:nth-of-type(2){
width: 100px;
height: 50px;
border-radius:0 0 50px 50px;
}
div:nth-of-type(3){
width: 50px;
height: 100px;
border-radius:0 50px 50px 0;
}
div:nth-of-type(4){
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

border-radius制作扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则

“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作扇形</title>
<style>
div{
background: red;
margin: 30px;
}
div:nth-of-type(1){
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
border-radius:0 50px 0 0;
}
div:nth-of-type(3){
width: 50px;
height: 50px;
border-radius:0 0 50px 0;
}
div:nth-of-type(4){
width: 50px;
height: 50px;
border-radius: 0 0 0 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

6、盒子阴影

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>box-shadow的使用</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 8px;
margin: 20px;
/*box-shadow: 20px 10px 10px #06c; /!*内阴影*!/*/
/*box-shadow: 0px 0px 20px #06c; /!*只设置模糊半径的阴影
*!/*/
box-shadow: inset 3px 3px 10px #06c; /*内阴影*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

7、小结

寇大大

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS -盒子模型

目录盒子模型1、什么是盒子模型2、边框边框颜色 border-color边框粗细 border-width边框样式 border-style3、内外边距外边距 margin内边距 padding4、盒子型模尺寸box-sizing5、圆角边框border-radius制作圆形border-radius制作半圆形border-radius制作扇形6、盒子阴影7、小结盒子模型1、什么是盒子模型2、边框边框颜色 .
复制链接

扫一扫