предисловие

В нашей фронтенд-разработке мы часто сталкиваемся с проблемами макета страницы в различных сценариях.Построение структуры страницы является основой фронтенд-разработки и очень важной частью. В этой статье сначала обобщаются основные идеи процесса разработки страницы, а затем разбираются общие схемы макета CSS, включая горизонтальное и вертикальное центрирование, макет с одним столбцом, макет с двумя столбцами, макет святого Грааля, макет с двойным летающим крылом, макет с равной высотой. макет и макет скотча. .

Полный текст резюме

Быстрый взгляд

Основные идеи веб-разработки:Определите сердцевину версии -- "Модуль строки анализа --" Модуль столбца анализа;
Если линия имеетНесколько модулей должны быть размещены в одном и том же родительском модуле.;
Модуль столбца может сначала датьцвет фона по ширине и высоте, создайте экземпляр коробки;
Рекомендуемый метод горизонтального центрирования:justify-content:center,absoute+translateX(-50%,0);
Наиболее рекомендуемый метод вертикального центрирования:align-items:center,absolute+translateY(0,-50%);
Рекомендуемый изгиб в два-три/три столбца/одинаковая высота/клейкая лента.

1 Идеи макета процесса разработки страницы

1.1 Определите макет страницы

Общая ширина центра:

Чжиху 960px
Таобао 1000px
Netease 1200px.
JD.com 1210px
Тенсент 1400

1.2 Общий вид страницы

Анализ первого модуляПовторно проанализируйте модуль столбца.
Если линия имеетНесколько модулей должны быть размещены в одном и том же родительском модуле.. Модули столбцов обычно используют плавающие, определенные координаты, и требуется позиционирование, если существует концепция каскадирования.

1.3 Компоновка одного модуля

Сначала дайте модульШирина высота(Окончательная отделка по высоте должна быть удалена)фоновый цвет, создайте экземпляр коробки.
Затем проанализируйте модультекстовый атрибут,Другие свойства фона.

Порядок написания CSS:

Свойства положения (позиция, верхнее, правое, z-индекс, отображение, плавающее положение и т. д.)

Размер (ширина, высота, отступы, поля)

Текст (шрифт, высота строки, межбуквенный интервал, выравнивание цвета по тексту и т. д.)

Фон (фон, граница и т. д.)

Другие (анимация, переход и т.д.)

Общий модуль состоит иззаглавиеа такжесодержаниеСостоит из двух частей.
Если у самого блока есть ширина и высота, необходимо рассчитать использование отступов, а использование полей иногда приводит к схлопыванию полей.

1.4 Расчет межстрочного интервала

Междустрочный интервал делится на четыре строки: верхнюю, среднюю, базовую и нижнюю.

Межстрочный интервалРасстояние от базовой линии до базовой линии, установите высоту строки.

2 Горизонтальное и вертикальное центрирование

Существует два распространенных метода центрирования строчных элементов по горизонтали и по вертикали:

Центрировать по горизонтали: text-align: center
Вертикальный центр: высота = высота строки (подходит для обычного текста)

Элементы уровня блока сосредоточены в:

центральный элементФиксированная ширина и высота
центральный элементШирина и высота не фиксированы

2.1 Фиксированная ширина и высота

общедоступный код

<head>
<meta charset="utf-8">
<title>公共代码</title>
<style>
    .father{
         width: 500px;
         height: 300px;
         border: 1px solid red;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color:red;
    }
</style>
</head>
<body>
  <div class="father">
        <div class="son"></div>
    </div>
</body>

(1) margin

Центрировать по горизонтали: поле: 0 авто

Центрировать по вертикали: margin-top

.son {
  /*水平居中*/
  margin: 0 auto;
  /*垂直居中 (父元素高-子元素高)/2*/
  margin-top:100px;
}

(2) абсолютный + отрицательный запас

Абсолютное позиционирование дочерних элементов, относительное позиционирование родительских элементов
Дочерний элемент сначала перемещается на 50% в зависимости от родительского элемента, а затем использует -margin для перемещения назад на половину себя.

 .father {
      position: relative;
   }
 .son {
     position: absolute;
     /*水平居中*/
     left: 50%;
     margin-left: -50%;
     /*垂直居中*/
     top: 50%;
     margin-top: -50%;
 }

(3) absolute + margin auto

Абсолютное позиционирование дочерних элементов, относительное позиционирование родительских элементов
Расстояние во всех направлениях дочернего элемента устанавливается равным 0, а затем для поля устанавливается значение auto.

.father {
     position: relative;
 }
 .son {
     position: absolute; 
     margin: auto; 
     /*水平居中*/
     left: 0;
     right: 0;
     /*垂直居中*/
     top: 0;
     bottom: 0;
 }

2.2 Нефиксированные ширина и высота

Способ не фиксации ширины и высоты заключается в переопределении метода фиксации ширины и высоты выше.

Абсолютное позиционирование дочерних элементов, относительное позиционирование родительских элементов
Используйте -translateX, чтобы переместить половину себя назад

(1) absolute + transform

 .father{
     position: relative;
 }
 .son{
     position: absolute;
     /*水平居中*/
     left: 50%;
     transform: translateX(-50%);
     /*垂直居中*/
     top: 50%;
     transform: translateY(-50%);
 }

(2) css-table

Горизонтальный центр: родительский элемент text-align: центр отображения дочернего элемента: блок

.father{
    text-align: center;
}
.son {
    display: inline-block;
}

Вертикально по центру: родительский элемент display:table-cell+vertical-align: middle

.father{
    display: table-cell;
    vertical-align: middle;
}

(3) flex

Горизонтальный центр: отображение родительского элемента: flex+justify-content: center
Центрировать по вертикали: отображение родительского элемента: flex+align-items: center

.father {
   display: flex;
   /*水平居中*/
   justify-content: center;
   /*垂直居中*/
   align-items: center;
}

3 Одноколоночный макет

3.1 Нормальная компоновка

заголовок, содержание, низ

普通布局.png

<head>
<meta charset="utf-8">
<title>单列布局-普通布局</title>
<style>
    .header{
       margin:0 auto; 
       max-width: 960px;
       height:100px;
       background-color:pink;
    }
    .container{
       margin: 0 auto;
       max-width: 960px;
       height: 500px;
       background-color: aquamarine;
    }
    .footer{
       margin: 0 auto;
       max-width: 960px;
       height: 100px;
       background-color:skyblue;
    }
</style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

3.2 Центрирование контента

Область содержимого (в центре) составляет 960 пикселей, а поле: 0 автоматически используется для достижения горизонтального центрирования.

内容居中.png

<head>
<meta charset="utf-8">
<title>普通布局-内容居中</title>
<style>
    .header{
        margin:0 auto;
        height:100px;
        background-color:pink;
    }
    .content{
        margin: 0 auto;
        height: 500px;
        width:960px;
        background-color: aquamarine;
    }
    .footer{
        margin: 0 auto;
        height: 100px;
        background-color: skyblue;
    }
</style>
</head>
<body>   
    <div class="header"></div>
    <div class="center">
         <div class="content"></div>
    </div>
    <div class="footer"></div>
</body>

4 Двухколоночный макет

Так называемый двухколоночный макет означает: фиксированную ширину слева и адаптивную справа.

4.1 float

Идеи реализации:
После нормального текучего BFC (float:left) пересечения с плавающим элементом не будет, и он будет формировать свой закрытый контекст вдоль плавающего элемента.

<head>
<meta charset="utf-8">
<title>两栏布局-float</title>
<style>
    .left {
        width: 300px;
        background-color: pink;
        float: left;
        height:500px;
    }
    .right {
        width:100%;
        background-color: aquamarine;
        height:500px;  
    }
</style>
</head>
<body>      
     <div class="warp">
         <div class="left">定宽</div>
         <div class="right">自适应</div>
    </div>
</body>

4.2 flex

Идеи реализации:
Родительский элемент включает гибкое пространство, левый блок имеет фиксированную ширину, а правый блок flex: 1

<head>
<meta charset="utf-8">
<title>两栏布局-flex</title>
<style>
   .warp{
       display:flex;
  }
  .left {
       width: 300px;
       background-color: pink;
       height:500px;
  }
 .right {
       background-color: aquamarine;
       height:500px;  
       flex:1
}
</style>
</head>
<body>      
     <div class="warp">
         <div class="left">定宽</div>
         <div class="right">自适应</div>
    </div>
</body>

5 Трехколоночный макет

5.1 Что такое трехколоночный макет

Левый и правый фиксированные, средний адаптивный
Средняя полоса размещена перед потоком документов для обеспечения приоритетной загрузки.

Существует три типа реализации: макет FLEX, макет Holy Grey, макет с двойным летающим крылом.
Святой Грааль возник из статьи в части списка, Shuangfeiyi возник из Taobao UED, а вдохновение пришло из рендеринга страницы.

5.2 гибкий макет

Поместите среднее поле в начало html, чтобы обеспечить приоритетную загрузку.
Используйте свойство flex order, чтобы определить порядок трех блоков: слева, в центре, справа.
Левый и правый блоки имеют фиксированную ширину, а средний блок изгибается: 1

flex布局.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        background: gray;
        display: flex;
    }
    .left{
        width:200px;
        height: 600px;
        background: pink;
        order:-1
    }
    .center{
        height: 600px;
        background: aquamarine;
        width:100%;
        flex:1
        order:1
    }
    .right{
        width:200px;
        height: 600px;
        background: skyblue;
        order:2
    }
</style>
</head>
<body>
<div class="box">
    <div class="center">中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中</div>
    <div class="left">左</div>
    <div class="right">右</div>	
</div>
</body>
</html>

5.3 Макет Святого Грааля

Все три коробки настроены на плавание

Левое поле имеет отрицательное значение margin-left: 100%, а правое поле имеет отрицательную ширину.

Отступы большого поля слева и справа ширина левого и правого поля

Левый и правый ящики позиционируются друг относительно друга, левый, правый - назад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        /* 4、padding左右盒子的宽度 */
        padding-left:200px;
        padding-right:200px;
    }
    .left{
        /* 1、三个盒子都设置浮动 */
        float:left;
        width:200px;
        height: 600px;
        /* 2、走中间盒子的-100% */
        margin-left:-100%;
        background: pink;
        /* 5 相对定位,往回走 */
        position:relative;
        left:-200px;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        /*/3、走负自身的宽度 */
        margin-left:-200px;
        background: skyblue;
        /* 6 相对定位,往回走 */
        position:relative;
        right:-200px;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="center">中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中</div>
        <div class="left">左</div>
        <div class="right">右</div>	
    </body>
</html>

5.4 Двухстворчатая компоновка

Все три коробки настроены на плавание

Левое поле имеет отрицательное значение margin-left: 100%, а правое поле имеет отрицательную ширину.

Промежуточная корректировка маржинальной коробки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
    }
    .left{
        /* 1、三个盒子都设置浮动 */
        float:left;
        width:200px;
        height: 600px;
        /* 2、走中间盒子的-100% */
        margin-left:-100%;
        background: pink;
    }
    .content{
        /* 4、调整中间盒子margin */
        margin-left:200px;
        margin-right:200px;
        background-color: yellowgreen;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        /*3、走负自身的宽度 */
        margin-left:-200px;
        background: skyblue;
    }
</style>
</head>
<body>
<div class="box">
    <div class="center">
        <div class="content">
            中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>	
</body>
</html>

Макет Святого Грааля: план с двойным крылом:

Все три столбца имеют значение float:left, а содержимое div в среднем столбце не закрыто.
Святой Грааль — добавить относительное позиционирование посередине и взаимодействовать со свойствами left и right.
Двойное крыло - это div в среднем столбце, в котором находится div, и установка полей margin-left и margin-right для вложенного div.

6 макетов одинаковой высоты

Одинаковая высота означаетдочерний элементсуществуетРавная высота в родительском элементемакет.

6.1 Положительное заполнение + отрицательное поле

Положительный отступ + отрицательный отступ, отступ и отступ компенсируют друг друга

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等高布局-正值内边距+负值外边距</title>
<style type="text/css">
      *{
            margin:0;
            padding:0;
     }
     .left,
     .right {
            width:50%;
            float:left;
            text-align:center;
            background-color:aquamarine;
            /* 设置正值内边距会把背景颜色拉伸 */
            padding-bottom:9999px;
            /* 设置负值外边距把边框往里推 */
            margin-bottom:-9999px;
     }
     .right{
             background-color: pink;	 
     }
     .container {
            width:1200px;
            margin:0 auto;
            /* 开启BFC限制内容 */
            overflow:hidden;
     }
</style>
</head>
<body>
 <div class="container">
     <div class="left">111111111111</div>
     <div class="right">
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
     </div>
 </div>
</body>
</html>

6.2 макет таблицы

Недостатки: используйте макет таблицы, чтобы настроить некоторые настройки атрибута

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等高布局-table布局</title>
<style type="text/css">   
 *{
    margin:0;
    padding:0;
 }
 .center,
 .left,
 .right {
    width:33.3%;
    text-align:center;
    display: table-cell;
    background-color:aquamarine;
 }
.container {
    display:table;
    width:1200px;
    margin:0 auto;
 }    
</style>
</head>
<body>
 <div class="container">
      <div class="left">111111111111</div>
      <div class="center">22222222222222222222222222</div>
      <div class="right">
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
     </div>
  </div>
</body>
</html>

6.3 гибкий макет

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等高布局-flex布局</title>
<style type="text/css">   
 *{
    margin:0;
    padding:0;
 }
 .center,
 .left,
 .right {
    text-align:center;
    background-color:aquamarine;
    flex:1
 }
 .container {
    display:flex;
    /* flex-direction: row; */
    width:1200px;
    margin:0 auto;
 }
</style>
</head>
<body>
 <div class="container">
    <div class="left">111111111111</div>
    <div class="center">22222222222222222222222222</div>
    <div class="right">
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
 </div>
</div>
</body>
</html>

6.4 макет сетки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid布局</title>
<style>   
 *{
    margin:0;
    padding:0;
 }
 .center,
 .left,
 .right {
    text-align:center;
    background-color:aquamarine;
    flex:1
}
 .container {
    display:grid;
    grid-auto-flow: column;
    width:1200px;
    margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">111111111111</div>
    <div class="center">22222222222222222222222222</div>
    <div class="right">
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
 </div>
</div>
</body>
</html>

7 Разметка скотча

Когда высота основной части будет достаточной, нижний колонтитул будет следовать за ней. Когда основной элемент короткий (например, меньше ширины экрана), элемент нижнего колонтитула может прилипать к нижней части экрана.

7.1 Отрицательное нижнее поле

Идеи реализации: Оберните содержимое за пределами нижнего колонтитула элементом и установите отрицательное значение margin-bottom, которое точно равно высоте нижнего колонтитула.

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-负margin-bottom</title>
 <style>
/* 用一个元素将footer以外的内容包起来,设置负的margin-bottom,让他正好等于footer的高度 */
html, body {
     margin: 0;
     padding:0;
     text-align:center;
}
#wrap{
      min-height:100%;
      background-color: pink;	
      margin-bottom: -30px;
}
#footer,#main{
      height: 30px;
} 
#footer{
     background-color: aquamarine;
}
</style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            main<br/>
            main<br/>
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>

7.2 Отрицательное значение margin-top в нижнем колонтитуле

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-footer 上用负的 margin-top</title>
<style>
    html, body {
	height: 100%;
	margin: 0;
	text-align:center;
   }
     #wrap{
        width: 100%;
        min-height:100%;
        background-color: pink;	
    }
     /*内容区需要让出一部分区域，防止内容被盖住*/
     #main{
        padding-bottom: 30px;
    }
     /*wrap包裹内容的最小高度是100%，此时将footer的部分通过margin-top拉上去30px。 */
     #footer{
        width: 100%;
        height: 30px;
        background-color: aquamarine;
        margin-top: -30px;
    } 
</style>
</head>
<body>
   <div id="wrap">
       <div id="main">
          <p>main</p> 
          <p>main</p>
      </div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

7.3 flex

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-flex</title>
<style>
 html, body {
    margin: 0;
    padding:0;
    text-align:center;
}
 #warp{
	height:100%;
	display: flex;
	flex-direction: column;
 }
 #main{
	background-color: pink;	
	flex:1;
 } 
 #footer{
	background-color: aquamarine;
	height: 30px;
 }
</style>
</head>
<body>
   <div id="wrap">
       <div id="main">
          <p>main</p> 
          <p>main</p>
      </div>
      <div id="footer">footer</div>
   </div>
</body>
</html>

Эпилог

На этом статья заканчивается. Из-за моего ограниченного опыта неизбежно будут ошибки. Исправления приветствуются. Если вы считаете, что эта статья полезна для вас, ставьте лайк ❤❤❤.Писать не просто.За непрерывным выводом стоит накопление бесчисленных дней и ночей.Ваши лайки-движущая сила для непрерывного письма.Спасибо за вашу поддержку. !