蓝鸥零基础学习HTML5第五讲 CSS的基础样式

来源：互联网发布：织梦小说源码编辑：程序博客网时间：2024/06/05 20:19

1.border

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:0px;

height:0px;

/*background: url("img/1.jpg") no-repeat;*/

/*border:10px solid yellow;*/

/*border-top-width:100px;

border-right-width:120px;

border-bottom-width:140px;

border-left-width:150px;

border-style:solid;

border-color: green;*/

/*border: 10px dotted #A100F9;*/

/*border-top:100px solid red;

border-right:100px solid yellow;

border-bottom: 100px solid green;

border-left:100px solid transparent;

border-radius: 10px;*/

border-top:100px solid #ccc;

border-right:100px solid transparent;

border-bottom:100px solid #ccc;

border-left:100px solid #ccc;

border-radius: 50%;

}

</style>

</head>

<body>

<!--

border 边框

复合写法

border: border-width border-style border-color;

border-width 边框宽度

border-style 边框样式 solid 实线 dashed 虚线 dotted 点线（点线IE6不认）

border-color 边框颜色英文单词十六进制 rgb

border-radius 圆角

透明 transparent

-->

</body>

</html>

2.padding

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:100px;

border:1px solid red;

/*padding-top:20px;

padding-right:40px;

padding-bottom: 60px;

padding-left:80px;*/

padding:10px 20px 40px 80px;

}

</style>

</head>

<body>

<!--

padding 内边距内填充

padding-top 上内边距

padding-right 右内边距

padding-bottom 下内边距

padding-left 左内边距

padding的复合写法

padding:10px; 一个值代表上右下左都是10px

padding:10px 20px; 两个值第一个值代表上下第二个值代表左右

padding:10px 20px 40px; 三个值第一个值代表上第二个值代表左右第三个值代表下

padding:10px 20px 40px 80px; 4个值第一个值代表上第二个值代表右第三个值代表下第四个值代表左

-->

</body>

</html>

3.padding的效果

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:466px;

height:383px;

border:10px solid #C6D8F0;

border-radius: 10px;

padding:10px 40px 80px 160px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

4.空间大小的问题

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:100px;

height:100px;

background: red;

border:10px solid blue;

padding:33px;

}

</style>

</head>

<body>

</body>

</html>

5.margin

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:100px;

height:100px;

background: red;

margin:50px 100px 150px 200px;

}

</style>

</head>

<body>

<!--

margin 外边距

margin-top 上外边距

margin-right 右外边距

margin-bottom 下外边距

margin-left 左外边距

margin的复合写法

margin:10px; 一个值代表上右下左都是10px

margin:10px 20px; 两个值第一个值代表上下第二个值代表左右

margin:10px 20px 40px; 三个值第一个值代表上第二个值代表左右第三个值代表下

margin:10px 20px 40px 80px; 4个值第一个值代表上第二个值代表右第三个值代表下第四个值代表左

-->

</body>

</html>

6.margin的小性子

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box1 {

width:300px;

background: red;

/*border:1px solid #000;*/

/*overflow:hidden;*/

/*padding-top:100px;*/

}

#box2 {

width:300px;

height:200px;

background: yellow;

/*margin-top: 100px;*/

margin-bottom: 30px;

}

#box3 {

width:300px;

height:200px;

background: blue;

margin-top:30px;

}

</style>

</head>

<body>

</div>

<!-- 标签的嵌套确定父子级关系

1. 第一个子级的margin-top会在特定的情况下穿透父级

规避方法：

1.给父级加边框

2.给父级加overflow:hidden;

3.不要用margin-top，父级的padding-top代替

2. 兄弟关系的margin-top和margin-bottom 会叠压

-->

</body>

</html>

7.盒模型

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*div {

width:100px;

height:100px;

border:10px solid red;

padding:40px;

margin:30px;

}*/

div {

width: 154px;

height:35px;

border:4px solid red;

padding:28px;

margin:12px;

}

</style>

</head>

<body>

<!--

盒模型

空间大小：

盒子的总宽度： border-left + padding-left + width + padding-right + border-right

盒子的总高度： border-top + padding-top + height + padding-bottom + border-bottom

位置

margin

-->

</body>

</html>

盒模型

0 0