前端的一些布局方法

表格布局(最古老的一种)

主要用表格table来布局
如这样


<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Documenttitle>
   <style type="text/css">
   	table{
   		width: 800px;
   		height: 200px;
   		border-collapse: collapse; /*单元格之间的间隙去掉*/

   	}
   	.left{
   		background: red;
   	}
   	.right{
   		background: blue;
   	}


   style>
head>
<body>
 <table>
 	<tr>
 		<td class="left">1td>
 		<td class="right">2td>
 		<td class="left">2td>
 		<td class="right">2td>
 	tr>
 	
 	<tr>
 		<td class="left">1td>
 		<td class="right">2td>
 		<td class="left">2td>
 		<td class="right">2td>
 	tr>

 table>


body>
html>

还有一种是用div去模仿表格布局


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style type="text/css">

    .table{
       display: table;
       width: 800px;
       height: 200px;


    }
    .tr{
    	display: table-row;

    }
    .td{
    	display: table-cell;
    	vertical-align: middle;
    }
    .left{
    	background: red;

    }
    .right{
    	background: blue;

    }


    style>
head>
<body>

<div class="table">
	<div class="tr">
		<div class="td left">1div>
		<div class="td right">1div>
	div>
div>


body>
html>

你可能感兴趣的:(前端笔记)