内边距padding-实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/static.css"> <title>内边距padding</title> </head> <body> <div class="box1"> <!-- /img图片标签 src图片路径 alt 关键词 width 宽度--> <img src="static/images/girl.jpg" alt="小姐姐" width="200" > </div> <!-- 宽度分离--> <hr> <div class="wrap"> <div class="box2"> <!-- /img图片标签 src图片路径 alt 关键词 width 宽度--> <img src="static/images/girl.jpg" alt="小姐姐" width="200" > </div> </div> <hr> <div class="box3"> <!-- /img图片标签 src图片路径 alt 关键词 width 宽度--> <img src="static/images/girl.jpg" alt="小姐姐" width="200" > </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS-实例
/*第一种方式*/
.box1{
width: 300px;
height: 300px;
/*背景色*/
background-color: lightgreen;
/* 边框*/
border: 1px solid black;
}
.box1{
/*内边距*/
padding: 50px;
/* 会放盒子放大，*/
}
.box1{
/*把盒子缩回去*/
width: 200px;
height: 200px;
}
/*第二种方案*/
/*利用于嵌套盒子之前只有宽度可以继承的特征*/
.wrap{
width: 300px;
}
.box2{
height: 200px;
/*背景色*/
background-color: lightgreen;
/* 边框*/
border: 1px solid black;
padding: 50px;
}
.box3{
/* 高度不用设*/
width: 300px;
/*将父盒子的宽度作用到边框上，不是内容上*/
box-sizing: border-box; /*border-box 边框上 默认值content-box内容上*/
/*背景色*/
background-color: yellow;
/*边框色*/
border: 1px solid red;
padding: 50px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
外边距 margin-实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/static2.css"> <title> 外边距 margin</title> </head> <body> <!--1、同级塌陷（上下）-同级的外边距相互塌陷 以谁的值大为准 左右不会，左右为叠加--> <div class="box1">小姐姐</div> <div class="box2">小哥哥</div> <hr> <!--2、嵌套传递 尽量不要用--> <div class="box3"> <div class="box4"></div> </div> <hr> <!--自动挤压--> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1{
width: 100px;
height: 100px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background-color: sienna;
}
/*给盒子box1加一下外边距 margin-bottom 上右下左*/
.box1{
margin-bottom:30px ;
}
/*给盒子box2加一个上外边距 margin-top*/
.box2{
margin-top: 30px;
}
/********************************/
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 100px;
height: 100px;
background-color: sienna;
}
.box3{
padding-top: 50px;
height:150px;
}
/********************/
.box5{
width: 100px;
height: 100px;
background-color: red; /*颜色*/
/*上下50 左右自动*/
margin: 50px auto;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
浮动float-实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/staic3.css"> <title>浮动float</title> </head> <body> <!--1、文档流：html元素默认按照书定的顺序在浏览器中，先左到右，再上到下进行排列--> <!-- 2、布局前提：先将元素从文档流中脱离，--> <!--3、元素脱离文档的手段：浮动与绝对定位--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1{
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2{
width: 180px;
height: 180px;
background-color: lightcoral;
}
.box1{
/*浮动 左 脱离了文档流*/
float: left;
}
.box2{
/*浮动 左 脱离了文档流*/
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
}
.box3{
float: right;
}
.box4{
width: 100%;
height: 100px;
background-color: lightgreen;
/*清除浮动 clear */
/*clear: left ;*/
/*clear: right;*/
/*简写*/
clear: both;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
定位与相对定位-实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/static4.css"> <title>定位与相对定位</title> </head> <body> <!--相对定位 position -relative--> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1{
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box2{
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box3{
width: 150px;
height: 150px;
background-color: lightblue;
}
.box4{
width: 150px;
height: 150px;
background-color: lightsalmon;
}
.box5{
width: 150px;
height: 150px;
background-color: slateblue;
}
.box1{
/*相对定位:*/
position: relative;
/*向左150*/
left: 150px;
}
/*box2位置不用动*/
.box3{
/*相对定位 */
position: relative;
/*向左300*/
left: 150px;
/*向上-150*/
top: -150px;
}
.box4{
position: relative;
left: 300px;
top: -300px;
}
.box5{
position: relative;
left: 150px;
top: -300px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
绝定定位 positon:absolute实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/static5.css"> <title>绝定定位 positon:absolute</title> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*绝对定位是相对于父级定位的*/
.box{
/*dotted 线的样式*/
border: 1px dotted red;
width: 450px;
height: 450px;
}
/*给定位父级盒子添加一个定位属性*/
.box1{
width: 150px;
height: 150px;
background-color: slateblue;
}
.box2{
width: 150px;
height: 150px;
background: lightsalmon;
}
.box3{
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4{
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5{
width: 150px;
height: 150px;
background-color: red;
}
.box1{
/*绝对定位元素脱离了文档流*/
position: absolute;
/*向左150*/
left: 150px;
}
.box2{
/*绝对定位元素脱离了文档流*/
position: absolute;
top: 150px;
}
.box3{
/*绝对定位元素脱离了文档流*/
position: absolute;
left: 150px;
top: 150px;
}
.box4{
/*绝对定位元素脱离了文档流*/
position: absolute;
left: 300px;
top: 150px;
}
.box5{
/*绝对定位元素脱离了文档流*/
position: absolute;
left: 150px;
top: 300px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例