网页设计：HTML基本结构

本文介绍了在网页设计时，HTML的基本结构。在网页头部导航位置的写法、页面布局时居中的方法、解释在css布局中浮动的原理及清除方法

页面头部的写法

在网页头部导航位置的写法，中间的container处可写position: fixed来固定导航。

html 复制代码

<div class="home">

  <div class="container">

    <div class="nav">头部</div>

  </div>

</div>

css 复制代码

.home {

  width: 100%;//宽度不可省

}

.container {

  //宽度不可省，背景色在此处写则撑满

  width: 100%;

  background-color: blue;

}

.nav {

  //导航栏实际宽高写这里，居中也写这里

  max-width: 1332px;

  height: 64px;

  background-color: red;

  margin: 0 auto;

}

页面结构布局之居中

结构布局时，使用不同的方法实现水平居中、垂直居中

文本居中

css 复制代码

text-align: center;
vertical-align: middle;

块级元素居中

css 复制代码

margin: 0 auto;//得有宽度才行

使用绝对定位+偏移居中

css 复制代码

//子绝父相
//方法一
//必须有宽高
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
//margin为自身宽高的负50%
//方法二
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
//方法三
//动态计算，需要知道该元素宽高
width: 200px; 
height: 200px; 
position: absolute; 
left: calc(50% - 100px); 
top: calc(50% - 100px);

使用绝对定位+transform居中

css 复制代码

//不需要宽高
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
//transform: translate为自身宽高的负50%

使用flexbox布局居中

flex布局时，子元素的float、clear和vertical-align会失效不需要知道该元素的宽高

css 复制代码

//适用于小规模布局
display: flex;
justify-content: center; 
align-items: center;

使用grid布局居中

css 复制代码

//适用于大规模的布局
//方法一
display: grid;
place-items: center;//得有宽高
//方法二
display: grid;
justify-content: center;
align-items: center;

table中的多行文本居中

html 复制代码

<div class="table">
    <div class="table-cell">
       本文介绍了在网页设计时，HTML的基本结构。本文介绍了在网页设计时，HTML的基本结构。本文介绍了在网页设计时，HTML的基本结构。本文介绍了在网页设计时，HTML的基本结构。本文介绍了在网页设计时，HTML的基本结构。本文介绍了在网页设计时，HTML的基本结构。本文介绍了在网页设计时，HTML的基本结构。
    </div>
</div>

css 复制代码

.table{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid red;
    margin: 20px auto;
    display: table;//表示块级表格，前后带有换行符
}
.table-cell{
    display: table-cell;//表示表格单元格
    text-align: center;
    vertical-align: middle;
}

浮动

原理： 让元素脱离标准文档流，让其他元素可环绕在其周围。

清除浮动的方法

css 复制代码

//方法1
clear: both;
//方法2
overflow: auto;
//方法3
.clearfix:after { 
    content: ""; 
    display: block;
    clear: both; 
}
//方法4
display: table;
display: flex;
display: grid;