简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 7月5日作业-内外边距与定位
Blogger Information
Blog 10
fans 0
comment 0
visits 7062
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7月5日作业-内外边距与定位
曾哥的PHP学习报告
Original
583 people have browsed it

内边距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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：你落下的作业太多了, 现在都学到php了, 建议尽快跟上进度,完了当下的作业,才是重点, 之前的作业, 抽空去完成
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！