一、内边距
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>运行实例 »
点击 "运行实例" 按钮查看在线实例