一张网页可以理解为多个div盒子组成。让我们先了解CSS 的框模型 (Box Model)
框模型:元素框处理元素内容、内边距、边框 和 外边距 的方式
参考下图
边框:
border:1px solid red;
1px 是边框的粗细,red是边框的颜色,solid是边框的样式
border-width 边框宽度:一般用像素表示
border-color 颜色有:可以是英文单词;也可以是16进制(记得有#号)
border-style 样式有:
dashed虚线/
dotted点线/
solid实线/
double双线(像素跳高才明显)/
hidden隐藏
/
groove3D 凹槽边框/
ridge:3D垄状边框/
inset:3D朝内边框/
outset:3D朝外边框
边框的四边:
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格
填充:
内容与边框之间是可以设置距离,称之为填充。其顺序为上 右 下 左
padding:10px 20px 30px 40px;
也可以分开写
padding-top:
10px
;
padding-right:
10px
;
padding-bottom:
10px
;
padding-left:
10px
;
如果上 右 下 左 的值是一样的;可以直接写成一个
padding:10px;
如果上 下;右 左一样;可以写成两个
padding:10px 20px;
边界:
margin和padding用法一样
宽度:
一个元素的实际宽度是要计算边框的宽度的
div代码演示:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>名字</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
div{width:240px;height:240px;border:1px solid red;}
.box{float:left;margin:100px 100px 0 100px;}
.box_padding{float:left;padding:50px 50px 0 50px;}
</style>
</head>
<body>
<div class="box">我是一个有margin的div盒子</div>
<div class="box_padding">我是一个有padding的div盒子</div>
</body>
</html>
border代码演示:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>border</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
.demo_border{width:400px;height:300px;margin:50px auto;border:1px solid red;border-radius:8px;}
.demo_border .one{width:300px;height:200px;margin:50px auto;
border-right: dashed red;
border-bottom: dotted red;
border-left: double red;
border-top: hidden red;}
.demo_border .one .two{width:200px;height:100px;margin:50px auto;
border-right:6px groove red;
border-bottom:6px ridge red;
border-left:6px inset red;
border-top:6px outset red;}
</style>
</head>
<body>
<div class="demo_border">
<div class="one">
<div class="two"></div>
</div>
</div>
</body>
</html>
圆:
其实就是把圆角设置和div的宽度一样就可以了
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圆</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
.circle{width:200px;height:200px;border:1px solid green;border-radius:200px;
margin:100px auto;background:green;}
.circle .small{width:180px;height:180px;border:1px solid green;
border-radius:180px;background:#fff;margin:10px auto;}
</style>
</head>
<body>
<div class="circle">
<div class="small"></div>
</div>
</body>
</html>
一点点进步,一点点成长,如有有问题可以留言给我,我会及时更正
更多干货等你来拿 http://www.itit123.cn/