前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

web前端基础之盒子模型的组成

#是什么决定了一个人的前途和命运#

盒子模型:

把HTML页面中的布局元素看作是一个矩形盒子,即一个盛装内容的容器。它包括:边框border、外边距margin、内边距padding和内容content。

padding:内边距

padding:20px 10px 40px 10px;

四个值:上 右 下 左:顺时针

padding:20px 10px 40px;

三个值:上 左/右 下

padding:20px 10px;

两个值:上/下 左/右

padding:20px;

一个值:上/下/左/右

border:边框:边框的粗细边框的颜色边框的样式;

solind:实线 dashed:虚线 dotted:点


代码部分:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>盒子模型</title>

<style>

.box{

width:100px;

height:100px;

background:green;

/*边框:border:边框的粗细 边框的颜色 边框的样式;

solind:实线

dashed:虚线

dotted:点线*/

border:10px pink solid;

}

.box1{width:100px;

height:100px;

background:green;

border:10px greenyellow dashed;

}

.box2{width:100px;

height:100px;

background:green;

border:10px palevioletred dotted;}

.ys{

width:200px;

height:200px;

background:red;

border:20px solid green;

color:white;

/*padding-left:10px;

padding-top:20px;

padding-right;10px;

padding-bottom:40px;*/

/*padding内边距:四个值:上/右/下/左:顺时针*/

/*padding:20px 10px 40px 10px;*/

/*三个值:上 左/右 下*/

padding:20px 10px 40px ;*/

/*两个值:上/下 右/下*/

/*padding:20px 10px ;*/

/*一个值:上/下/左/右 */

/*padding:20px ;*/

}

</style>

</head>

<body>

<div class="box"></div><br>

<div class="box1"></div><br>

<div class="box2"></div><br>

<div class="ys">学无止境</div>

</body>

</html>

最后有什么学习编程的心得和感想,欢迎在评论区下方留言交流!

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言