Web前端开发与设计04-布局和定位

学习要点

盒子模型
标准文档流
网页布局
浮动
清除浮动
溢出处理
定位在网页中的应用
position属性
z-index属性

盒子模型

定义

https://www.cnblogs.com/rask/p/9913070.html

盒子模型的三维立体层次结构图

在网页中看到的网页内容，都是盒子模型的三维立体结构多层叠加的最终效果。从这里可以看出，如果对某个页面元素同时设置背景图像和背景颜色，则背景图像将在背景颜色的上方显示（实际设计时候可以考虑背景色和背景图片颜色相近，避免背景图片丢失导致体验感下降）。

盒子模型属性介绍

1、边框
边框共有三个属性：color，width，style

border-color

属性	说明	示例
border-top-color	边框颜色	border-top-color:#369;
border-right-color	边框颜色	border-right-color:#369;
border-bottom-color	边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色：#369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

border-width
值：thin，medium，thick，像素值
设置方式与border-color设置方式类似。
示例：

border-style

值：none，solid，dotted……
设置方式与border-color设置方式类似。

示例：

border属性简写

border-bottom: 9px #F00 dashed ;

border: 9px #F00 dashed ;

参数顺序没有强制要求，建议顺序：粗细、颜色、样式

2、外边距

margin-top、margin-right
margin-bottom、margin-left
margin
示例：

外边距的重要应用，网页居中对齐：（元素要先设置宽度，否则无效）

margin：0px auto;

3、内边距

padding-left、padding-right

padding-top、padding-bottom

padding

示例：

盒子模型尺寸计算

盒子模型总尺寸=border-width+padding+margin+内容宽度

注意：默认情况下，在样式表中设置的width和height属性是指内容的宽度和高度。

box-sizing

1、语法

box-sizing: content-box | border-box | inherit:

2、解释

盒子模型的总尺寸是是按照默认方式还是按照内容尺寸计算。

3、参数说明

4、示例代码

<head lang="en">
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 10px;
            border: 1px solid #000000;
            box-sizing: border-box;
            /*box-sizing: content-box;  /!* 默认值*!/*/
        }
        #div2{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 10px;
            border: 1px solid #000000;
            /*box-sizing: border-box;*/
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
<br>
    <div id="div2"></div>
</body>

圆角边框

1、语法

border-radius;

2、示例代码

border-radius: 20px  10px  50px  30px;

3、效果

4、使用border-radius制作特殊图形

4.1 圆形

利用border-radius属性制作圆形的两个要点：元素的宽度和高度必须相同；圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。

div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}

效果：

4.2 半圆形
利用border-radius属性制作半圆形的两个要点：制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值；制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值。

<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作半圆形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 100px; 
            height: 50px;
            border-radius: 50px 50px 0 0;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 50px;
            border-radius:0 0 50px 50px;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 100px;
            border-radius:0 50px 50px  0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div><div></div>
    <div></div><div></div>
</body>

效果图：

4.3 扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则：“三同”是元素宽度、高度、圆角半径相同；“一不同”是圆角取值位置不同。

<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作扇形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            border-radius:0 50px 0 0;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 50px;
            border-radius:0 0 50px 0;
        } 
        div:nth-of-type(4){
            width: 50px;
            height: 50px;
            border-radius: 0 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

效果图：

盒子阴影

1、语法

box-shadow:inset x-offset y-offset blur-radius color;

2、参数说明
inset：阴影类型——内阴影。不指定则为外阴影。
x-offset：X轴位移，指定阴影水平位移量
y-offset：Y轴位移，用来指定阴影垂直位移量
blur-radius：阴影模糊半径阴影向外模糊的模糊范围
color：阴影颜色，定义绘制阴影时所使用的颜色

3、浏览器兼容性

4、示例代码

<head lang="en">
<meta charset="UTF-8">
<title>box-shadow的使用</title>
<style>
  div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 8px;
      margin: 20px;
      /*box-shadow: 20px 10px 10px #06c;*/ /*外阴影*/
      /*box-shadow: 0px 0px 20px #06c;*/ /*只设置模糊半径的外阴影*/
      box-shadow: inset 3px 3px 10px #06c;   /*内阴影*/
       }
</style>
</head> 
<body>
<div></div></body>

5、效果图

网页布局

常见布局

网页常见构成部分：网站导航、网页主题内容、网站版权3个部分。
网页布局类型有：“国”字形，拐角形，标题正文型，左右框架型，综合框架型，封面型，Flash型，变化型。
最常见类型：“国字型”，也称为1-3-1型；“拐角型”，1-2-1型。
1-3-1型网页：京东、天猫超市、当当、铁路客服中心、厦门人才网、凤凰网……
1-2-1型网页：孔夫子旧书网、科学公园……

块元素排一行方法

可以使用什么属性使块元素排在一行？

inline-block
float

浮动

1、问题：如何网页布局？

在标准文档流中，一个块级元素在水平方向上回自动伸展，直到包含它的元素的边界，在竖直方向和其他块级元素依次排列。

2、浮动在网页中的应用

横向导航

商品列表

3、float属性

示例代码html

<body>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div  class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div>
</div>
</body>

示例代码css：

@charset "gb2312";
/* CSS Document */
div {
   margin:10px;
   padding:5px;
}
#father {
   border:1px #000 solid;
   /*overflow: hidden;*/
}
.layer01 {
   border:1px #F00 dashed;
   float: left;
}
.layer02 {
   border:1px #00F dashed;
   float: left;
}
.layer03 {
   border:1px #060 dashed;
   float: right;
}
.layer04 {
   border:1px #666 dashed;
   font-size:12px;
   line-height:23px;
/* float: left;
   clear: both;*/
}

示例步骤
1) 设置layer01左浮动
2) 设置layer02左浮动
3) 设置layer03左浮动
4) 设置layer01右浮动
5) 设置layer02右浮动

边框塌陷

layer04设置宽度和右浮动后，father边框塌陷了，如何解决？

原因：浮动元素脱离标准文档流

解决方案：清除浮动

清除浮动

1、清除浮动影响-clear属性

2、清除两侧浮动：

.layer04 {clear:both;}

3、示例
浮动演示示例继续演示，文本div的clear属性设置
1) 清除左侧浮动
2) 清除右侧浮动
3) 清除两侧浮动

扩展盒子高度（解决父级元素边框塌陷）

1、父级元素边框塌陷

网页中的浮动元素脱离了标准流，导致影响父层高度。

示例中的文本div左浮动，导致id为father的div高度缩成条状。换句话说，一个div的范围是由它里面的标准文档流的内容决定的，与里面的浮动内容更无关。

那么，如何在视觉上让father包围浮动元素呢？

2、解决方案一：添加div

在所有浮动的div之后添加一个div，这个div的css的clear属性设置为：both。

特点：简单，空div会造成HTML代码冗余。

3、解决方案二：设定父级元素高度

#father {height: 400px; border:1px #000 solid; }

特点：简单，元素固定高会降低扩展性。

4、解决方案三：父级元素添加overflow属性

overflow属性下一小节详细讲解

#father {overflow: hidden;border:1px #000 solid; }

特点：简单，下拉列表框的场景不能用。

5、解决方案四：父级添加伪类after（推荐方案）

示例代码：

<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}

特点：写法稍微复杂一点，但是没有副作用，推荐使用