search

worldsite / blog.sc

Blogging soul chat, stay cool. via: https://blog.sc
3 stars 0 forks source link

前端教程 #44

Open suhao opened 2 years ago

suhao commented 2 years ago

HTML

超文本标记语言

超文本：使用html编写的文档，文件格式.html

HTML文档结构

HTML元素，标签与属性

HTML5语义化标签

CSS层叠样式表

设置HTML元素在文档中的布局和显示方式(外观)

CSS基本语法

样式规则：

样式选择器：

盒子模型

一切皆盒子，一切布局的基础，页面上的一切可见元素均可看作盒子。

盒子默认都是块级元素：独占一行，支持宽高设置。

盒子模型可以设置六个样式：宽高、背景、内外边距、边框

其中margin与padding的设置，属性按顺时针上右下左排列，可设方式为：上-右-下-左，上-左右-下，上下-左右，上下左右。

根据可见性可以分为两类：

样式选择器

背景设置

布局

调皮的内边距：padding

琢磨不定的外边距：margin

浮动元素：float

浏览器交出页面布局的权限，交给用户，即将元素从文档流中脱离出来。脱离后必然是一个块，可以设置宽高等。

流动布局：又称文档流/标准流，元素排列顺序与元素在html文档中的编写顺序一致的，从上到下，从左往右

脱离文档流的手段：

布局常识

网页拆分为上中下(通用头部/底部+内容区)，然后内容区拆分为左中右。

主体的布局，常用方式是双飞翼布局、圣杯布局。

HTML中的表格: 表格布局

原生表格的DOM结构如下：

CSS控制表格的样式：

表格布局=>定位(position)=>浮动(float)=>弹性(flex)=>网格(Grid)

Flex布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

/* 块元素可以设置为Flex容器 */
.container {
 display: flex;
}

/*内联元素也可以设置为Flex*/
span {
 display: inline-flex;
}

/* WebKit内核浏览器,如Safari, 需要加前缀*/
div {
 display: -webkit-flex; /*Safari*/
 display: lfex;
}

Flex基本概念

Flex容器

Flex项目

Grid布局：网格布局

Grid是第一个专门为解决布局问题而生的CSS模块

Grid布局的基础知识

display: grid

Grid容器

Grid Items

经典的三列布局

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <link rel="stylesheet" href="style.css">
    <title>简单的三列布局</title>
</head>
<body>
<header class="header">头部</header>
<aside class="left">左边栏</aside>
<main class="content">主体内容区</main>
<aside class="right">右边栏</aside>
<footer class="footer">底部</footer>
</body>
</html>
/* style.css */
body {
  /*设置body元素采用网格布局*/
  display: grid;

  /*行模板: 第一行60px,第二行750px, 第三行60px*/
  grid-template-rows: 60px 750px 60px;

  /*列模板: 第一列200px,第2列自动扩展, 第3列200px*/
  grid-template-columns: 200px auto 200px;

  /*设置行间距:10px*/
  grid-row-gap: 10px;

  /*设置列间距: 10px*/
  grid-column-gap: 10px;
}

.header {
  /*网格区域命名*/
  grid-area: my-header;

  /*参考背景色*/
  background-color: lightgreen;
}
.footer {
  /*网格区域命名*/
  grid-area: my-footer;

  /*参考背景色*/
  background-color: lightgreen;
}

.left {
  /*网格区域命名*/
  grid-area: my-left;

  /*参考背景色*/
  background-color: lightblue;
}

.right {
  /*网格区域命名*/
  grid-area: my-right;

  /*参考背景色*/
  background-color: lightblue;
}

.content {
  /*网格区域命名*/
  grid-area: my-content;

  /*参考背景色*/
  background-color: coral;
}

/*设置网格区域: 非常直观*/
body {
  /*网格区域名称相同, 意味着合并*/
  grid-template-areas:
    "my-header  my-header   my-header"
    "my-left    my-content    my-right"
    "my-footer  my-footer   my-footer"
}

媒体查询

@media (max-width: 1050px) {

}