2017.11.6第四课_a:link { color: black; text -decoration: none } a:-CSDN博客

本文链接：https://blog.csdn.net/gbb930920/article/details/78459090

一、DIV+CSS布局

（1）盒子模型内外边距和边框介绍

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

这里写图片描述
1.边框
用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位），样式，还有颜色。

也可以通过设置样式为 none 或 hidden 来明确地移除边框。
如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。
下面的规则设置了一个标题元素的背景色和顶部边框：

h3 {
border-top: 4px solid #7c7; /* 中绿 */
background-color: #efe; /* 浅绿 */
color: #050; /* 深绿 */
}
结果如下：
这里写图片描述

2.外边距和内边距
使用外边距和内边距调整元素的位置，并在其周围创建空间。用margin属性或者 padding 属性分别设置外边距和内边距的宽度。
如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。
如果你指定两个宽度，第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。
3.简写属性
我们可以根据规定顺序，简写属性：

设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框属性。
设置四个值，一次表示上右下左边框的属性。
例如：
h1{margin:10px 0px 15px 5px}
4.行内元素的盒子模型
行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。
如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。
综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。
5.元素盒子属性的默认值
大多HTML元素的盒子属性默认值都为0。
少部分HTML元素盒子属性存在默认值，如：body,p,ul,li,form标签等，因此我们在需要的时候可以先初始化他们的属性为0。

（2） display属性和实例

1.元素的显示和隐藏
使用display:none将元素隐藏起来，此时元素不占用页面空间。
使用visibility:hidden也可以隐藏元素，此时元素占用空间。
2.通过display改变内联元素或块级元素
(1)display:block就是将元素显示为块级元素.
block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度默认是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li> 是块元素的例子。

(2)display:inline就是将元素显示为行内元素.
inline元素的特点是：和其他元素都在一行上；高，行高及顶和底外边距不可改变；宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

（3）浮动和清除浮动

1.什么是浮动
我们可以用一句话描述浮动的元素的特点：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
div{float：left/right};
浮动会脱离文档流
脱离文档，也就是说浮动不会影响普通元素的布局。我们可以直接理解成，浮动的元素在普通文档流的上面一层，更靠近屏幕的上层。
这里写图片描述

默认三个设置了宽高的block元素，本来会格子独占一行；
如果框1设置了float:right，他会忽略框2和框3，直到碰到父元素；
如果，框1设置成float:left，就会覆盖住处在普通文档流中的框2。(框1浮动后，框1原本在普通文档流中的位置被框2顶替，而框1向左浮动后，由于处在普通文档流的上层，就会盖住框2)。
浮动可以内联排列
浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这样可以使区块元素在一行显示。
当三个区块都浮动，而一行的空间不够了，会引起元素换行。
但是如果每个元素的高度不一致，会出现“卡住”的情况。

然而，浮动也会导致一些我们不希望看见的事情发生。

浮动会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。
2.如何清除浮动
清除浮动
清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1)display:block使生成的元素以块级元素显示,占满剩余空间。
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。
4）通过content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。
5）zoom：1触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容。
3.触发BFC

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

✦ BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。
其中，BFC清除浮动就是用的“包含浮动”这条特性。
那么，怎样才能触发BFC呢？
BFC的触发方式

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。所以以上的BFC触发方法都可以用来解决浮动问题，但是要选择合适的使用场景。

课后作业

（1）百度首页模仿

这里写图片描述

部分代码：

.daohang a:link {color:black;}
.daohang a:visited{color:blue;}
.daohang a:hover{color:blue;}
.daohang{
 float:right;
 font-size:15px;

}
a{
  margin:15px;
}
.foot a{
  color:gray;
}
.img{
 display:block;
 position:relative;
 left:350px;
 top:50px;
}
.form{
 display:block;
 position:relative;
 left:170px;
 top:80px;

}
.ma{
  display:block;
 position:relative;
 left:445px;
 top:250px;
}
.foot{
width:500px;
 margin:250px 600px 50px 250px;
 font-size:15px;
}
#tex{
  width:500px;
  height:30px;
 }
 #sou{
  background-color:blue;
  color:white;
  width:90px;
  height:40px;
 }
 #shouji{
    position:relative;
   left:15px;
   bottom:10px;
   font-size:12px;
   color:gray;
 }
 #chan{
    background-color:#0033FF;
    color:white;
     font-size:12px;

 }
</style>
 </head>

 <body>
 <div class="main">
 <div class="daohang"><b>
 <a href="http://news.baidu.com">新闻</a>
  <a href="http://www.hao123.com">hao123</a>
 <a href="http://map.baidu.com">地图</a>
 <a href="http://v.baidu.com">视频</a>
 <a href="http://tieba.baidu.com">贴吧</a>
 <a href="http://xueshu.baidu.com">学术</a>
 <a href="">登陆</a>
 <a href="">设置</a></b>
 <a href="" id="chan">更多产品</a></b>
</div>
<div class="img">
<img src="https://www.baidu.com/img/bd_logo1.png" width="270" height="129">
</div>
<div class="form">
    <form>
     <input type="text" name="tex" id="tex"><input type="submit" id="sou" name="baidu" value="百度一下">
    </form>

</div>
<div class="ma">
 <img src="ma.png">  
    <p id="shouji"><b>手机百度</b></p>
</div>

咖啡店广告（固定定位）

这里写图片描述

部分代码

 <style type="text/css">
  .guanggao{
  background-image:url('../img/guang.jpg');
  width:180px;
  height:120px;
  color:blue;
  float:right;
  position:fixed;
  top:100px;
  right:10px;
  }

 </style>
 ........
 <div class="guanggao">
     <br>
     <p><b>今日主打<br>“蓝山咖啡”</b></p>
     </div>
  </div>