1、网页布局介绍

网页布局，指的是网页中标签的排列方式。常见布局如下：

标签正文型布局：

响应式布局 - 图3

左右框架型布局：

响应式布局 - 图4

T字型布局：

响应式布局 - 图5

国字型布局：

响应式布局 - 图6

代码

<!--国子型布局-->
<!DOCTYPE html>
<html>
<head>
<title>网页布局属性功能</title>
<meta charset="utf-8" />
<style type="text/css">
      .header{
        width:1000px;
        height:100px;
        line-height:100px;
        border:1px solid black;
        margin:0px auto;
        text-align:center;
      }
      .main{
        width:1000px;
        margin:20px auto;
        height:500px;
      }
      .menu{
        width:300px;
        height:500px;
        line-height:500px;
        text-align:center;
        border:1px solid black;
        float:left;
      }
      .content{
        width:680px;
        height:500px;
        line-height:500px;
        text-align:center;
        border:1px solid black;
        float:right;
      }
      .footer{
        width:1000px;
        height:50px;
        line-height:50px;
        text-align:center;
        border:1px solid black;
        margin:0px auto;
      }
    </style>
</head>
<body>
<div class="header">Logo、Banner、其他</div>
<div class="main">
    <div class="menu">左侧导航菜单或其他</div>
    <div class="content">网页正文内容</div>
</div>
<div class="footer">版权信息</div> 
</body>
</html>

布局常用样式

单位	值	作用
float	none \| left \| right	设置标签浮动
clear	none \| left \| right \| both	清除浮动
display	none \| block \| inline \| list-item \| inline-block…	设置标签显示方式
overflow	visible \| auto \| hidden \| scroll	设置内容超出标签时的处理方式
overflow-x	visible \| auto \| hidden \| scroll	设置内容超出标签宽度时的处理方式
overflow-y	visible \| auto \| hidden \| scroll	设置内容超出标签高度时的处理方式
visibility	inherit \| visible \| hidden \| collapse	设置标签是否可见

2、display样式

CSS区块介绍

HTML中所有标签，可以划分为：块级元素、非块级元素。

块级元素

1、默认，从新的一行开始，**独占一行**<br />    2、高度、宽度都是可控的<br />    3、宽度没有设置时，默认为100%<br />常见块级元素：div、p、h、ul、ol、dl、table…

非块级元素

1、默认，不会从新的一行开始<br />2、高度、宽度以及内边距都是不可控的<br />    3、宽高就是内容的高度，不可以改变<br />    常见非块级元素：span、b、i、u、a…

基本语法

display：none | block | inline | list-item | inline-block；

功能

将元素显示为块级元素或内联元素。

代码

<!DOCTYPE html>
<html>
<head>
<title>CSS区块</title>
<meta charset="utf-8" />
<style type="text/css">
      .div1{
        width:900px;
        height:50px;
        line-height:50px;
        border:1px solid red;
        margin:0px auto;
        padding-left:50px;
      }
      .span1{
        display:block;
        width:900px;
        height:200px;
        border:1px solid blue;
        padding-left:50px;
        margin:0px auto;
      }
    </style>
</head>
<body>

<div class="div1">导航菜单</div>

    <span class="span1">正文内容1</span>
    <span>正文内容2</span><span>正文内容3</span><span>正文内容4</span>
</body>
</html>

代码讲解

1、将元素显示为块级元素

.span1{
display:block;
width:900px;
height:200px;
border:1px solid blue;
padding-left:50px;
margin:0px auto;
}
display:block; 将span标签显示为块级元素

display属性

值	描述
none	此元素不会被显示。隐藏标签
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。

3、弹性布局

基本语法

display: flex;

功能

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器和弹性子元素组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  //如果在大div内不添加弹性布局，三个div垂直排列（弹性布局默认横向排列）
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>

</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>

代码讲解

1、设置弹性容器

.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
display: flex; 设置class为flex-container 的标签为弹性容器
width: 400px; 弹性容器宽度为400像素
height: 250px; 弹性容器高度为250像素

2、设置弹性子元素

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
width: 100px; 弹性子元素宽度为100像素
height: 100px; 弹性子元素高度为10像素

弹性盒子中常用到的属性:

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。
flex-grow：数字；	占比

display属性

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。）。）。）。）。）。）

）
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	规定应该从父元素继承 display 属性的值。

盒子内显示元素什么方式排列flex-direction

flex-direction属性
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

水平对齐方式justify-content

justify-content的属性	意思
flex-start	默认值。项目位于容器的开头。（左对齐）
flex-end	项目位于容器的结尾。（右对齐）
center	项目位于容器的中心。（居中）
space-between	项目位于各行之间留有空白的容器内。（平均分布两侧不留白）
space-around	项目位于各行之前、之间、之后都留有空白的容器内。（平均分布两侧留白）
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。

align-items垂直对齐（盒子里一行显示内容）

align-items属性	意思
stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。（顶端对齐）弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。（底端对齐）弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
initial	设置该属性为它的默认值。。
inherit	从父元素继承该属性。。

align-content垂直对齐（盒子里多行显示内容）

align-content属性
stretch	默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start	元素位于容器的开头。（顶端对齐）各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end	元素位于容器的结尾。（底端对齐）各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between	元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around	元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
initial	设置该属性为它的默认值。

是否多行显示flex-wrap

flex-wrap属性
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值
inherit	从父元素继承该属性。

4、响应式布局

功能

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

第一步：设置viewport

在head标签中添加
响应式布局 - 图9

第二步：媒体查询

基本语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

@media 设备类型 and|not|only （宽度或高度来指定在页面为多大时执行代码）

媒体类型

响应式布局 - 图10
not: not是用来排除掉某些特定的设备的。
only: 用来定某种特别的媒体类型。

代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<style>
  body {
      background-color: red;
  }
  @media screen and (min-width: 800px) {
      body {
          background-color: lightgreen;
      }
  }
</style>
</head>
<body>
</body>
</html>

响应式布局 - 图11

代码讲解

1、在可视窗口尺寸大于800 像素时修改背景颜色

@media screen and (min-width: 800px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px)
background-color: lightgreen;
可视窗口尺寸大于800 像素时修改body的背景颜色为lightgreen

常用媒体功能

值	描述
height	定义输出设备中的页面可见区域高度。
max-height	定义输出设备中的页面最大可见区域高度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-height	定义输出设备中的页面最小可见区域高度。
min-width	定义输出设备中的页面最小可见区域宽度。
width	定义输出设备中的页面可见区域宽度。