简体中文(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 4
fans 0
comment 0
visits 3360
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总结与作业
李木子的博客
Original
860 people have browsed it

一、内边距

1、总结笔记

实现图片居中显示

********************** 方案1 ********************

 默认情况下,width是直接使用到盒子中的内容级content，使用padding让图片居中显示

 容器300*300,图片200*200,最直观的想法是添加50px的内边距， 会发现,内边距会增加盒子填充厚度,将盒子撑大

如果想保持原来盒子大小,只能手工修改容器的宽高

********************** 方案2: 宽度分离 ********************

 给盒子2认一个干爹,添加一个父级盒子3, 这时盒子2就是儿子了, width就有效了

这是利用于嵌套盒子之间,只有宽度可以继承的特征而盒子1现在就是盒子3的内容

********************** 方案3: box-sizing 盒尺寸 ********************

宽度是作用到盒中的内容上的，而一个盒子有content,padding,border,margin四部分组成,所以改变宽度会造成盒子大小不确定，方案2: 是将width宽度直接作用到了外部盒子上, 而盒子2此时就自动变成了盒子3的内容,所以会应用到width

让宽度width作用到边框级,作用到内容级仍会撑开盒子的

    box-sizing: content-box;

    box-sizing: border-box;

    background-color: lightpink;

    border: 1px solid black;

    内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关

    padding: 50px;}

 总结:

 * 第一种方案DOM结构简单,但是要修改原盒子大小

 * 第二种方案不需要修改原盒子大小,但需要增加一个容器盒子

 * 第三种无疑是首选, 但是不同级别的盒元素,理解起来有困难

二、外边距

1、总结笔记

同级塌陷： 当二个盒子上下排列时,外边距会出现塌陷现象,小的会陷到大的里面去

嵌套传递：使子盒子离父盒子顶部之间有50px的间距,通过margin-top来实现

.子盒子class名 {

    margin-top: 50px;}

 结果发现不对, 外边距跑到了外部盒子父盒子上面去了。当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上

 所以,正确的做法是,给父级盒子添加内边距来实现，修改父盒子高度,将撑开的50px的高度去掉 

自动挤压：使盒子居中对齐

2、实例演示

实例

<!DOCTYPE htm>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>外边距</title>
<style type="text/css">
.tjtx{
	height:100px;
	width:100px;
	background:#F00;
	margin-bottom:30px;}
.tjtx2{
    width: 100px;
    height: 100px;
	background:#FF0;
	margin-top: 50px;
	}
#qtcd1{
	height:150px;
	width:150px;
	background:#00F;
	padding-top:50px;
	padding-left:50px;
	margin:auto;}
#qtcd2{
	height:100px;
	width:100px;
	background:#0F0;}
</style>
</head>
<body>
<body>
 <div class="tjtx"></div>
 <div class="tjtx2"></div>
    <hr>
    <div id="qtcd1">
        <div id="qtcd2"></div>
    </div>
</body>
</html>

运行实例 »

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

三、浮动

1.文档流: html元素默认按照书写的顺序在浏览器中,遵循先从左到右,再从上到下进行排列

2.布局前提: 通常先将元素从文档流中脱离,这样才能随心所欲的操作

3.元素脱离文档流的手段: 浮动和绝对定位

folt:left    左浮动

Folt:eight   右浮动

Clear:left   消除左浮动

Clrar:both   消除所有浮动

四、相对定位(position:relative)

定位:将元素在页面中重新排列,分为四类

        1.静态定位: 浏览器默认方式, 即文档流中的位置

        2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动

        3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高

        4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位

五、绝对定位(position:absolute)

定位参照物:

        1. 相对定位, 是以元素在文档流中的原始位置为参照物进行定位的

        2. 绝对定位, 它是脱离了文档流的, 所有必须要有一个定位父级做为参照物

position: absolute; 默认以整个窗口进行绝对定位, 定位父级是<body>

绝对定位元素, 总是相对于离它最近的定位元素进行定位

六、遮罩案例

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遮罩案例</title>
<style type="text/css">
body{
    margin: 0;
	background-image:url(image/php.jpg);
    background-size: cover;}
.zhezhao{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    background-color: black;
    opacity: 0.7;}
.login img {
    width: 380px;
    height: 460px;}
.login {
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -230px;}
</style>
</head>
<body>
<div class="zhezhao"></div>
<div class="login"><img src="image/login.jpg" alt="" ></div>
</body>
</html>

运行实例 »

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

七、广告定位案例

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广告定位案例</title>
<style type="text/css">
body{
    height:4000px;}
.a{
    width: 210px;
    height:230px;
    background-color: lightblue;
    position: fixed;
    right: 0;
    bottom: 0;}
button {
    float: right;
    margin-top:5px;
    margin-right:5px;
    border: none;
    background: none;
    color: red;}
</style>
</head>
<body>
    <div class="a">
        <button onclick="this.parentNode.style.display = 'none'">X</button>
        <h2>php中文网第六期线上班</h2>
        <h3>招生进行中...</h3>
        <h4>进行中...</h4>
        <h5>中...</h5>
    </div>
</body>
</html>

运行实例 »

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


Correction status：qualified

Teacher's comments：学习一定要有总结, 才会有进步
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！