html5、CSS3入门学习笔记2023-9-10分栏

题一：

在html5、CSS3语言中，在一个div区域内划分4列div区域。

样例代码：

可以使用CSS的flexbox布局来实现在一个div区域内划分4列div区域的效果。以下是一个样例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .column {
      width: 25%;
      padding: 10px;
      box-sizing: border-box;
    }

    .column:nth-child(odd) {
      background-color: #f2f2f2;
    }

    .column:nth-child(even) {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>Column 1</h2>
      <p>This is the content of column 1.</p>
    </div>
    <div class="column">
      <h2>Column 2</h2>
      <p>This is the content of column 2.</p>
    </div>
    <div class="column">
      <h2>Column 3</h2>
      <p>This is the content of column 3.</p>
    </div>
    <div class="column">
      <h2>Column 4</h2>
      <p>This is the content of column 4.</p>
    </div>
  </div>
</body>
</html>

在上面的代码中，我们使用了display: flex;来将容器设置为flex布局，通过flex-wrap: wrap;使得内容在行不够的情况下自动换行。然后，每个列的宽度设置为25%，通过padding: 10px;设置列的内边距。通过box-sizing: border-box;设置盒子模型为border-box以保证内边距不会撑开列的宽度。最后，使用:nth-child选择器分别给奇数列和偶数列设置不同的背景颜色，以便区分列的样式。

问题二：

在html5、CSS3语言中，我想把页面分为4个区域，上面第一区域div为页面全宽、高度100px；中间分为左右两个区域div，高度600px；最下面区域div为页面全宽、高度100px。

样例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #header, #content, #footer {
      width: 100%;
      position: relative;
    }
    #header {
      height: 100px;
      background-color: #ccc;
    }
    #content {
      height: 600px;
      background-color: #ddd;
    }
    #left, #right {
      width: 50%;
      height: 100%;
      float: left;
    }
    #left {
      background-color: #eee;
    }
    #right {
      background-color: #fff;
    }
    #footer {
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="header"></div>
  <div id="content">
    <div id="left"></div>
    <div id="right"></div>
  </div>
  <div id="footer"></div>
</body>
</html>

说明:

首先，设置html和body的高度为100%以确保页面占满整个屏幕，并去除默认的边距和内边距。
页面分为三个区域，分别是header、content和footer，它们的宽度都设置为100%，并且相对定位。
header区域的高度设置为100px，并设置背景颜色为#ccc。
content区域的高度设置为600px，并设置背景颜色为#ddd。其中，content区域又分为左右两个区域，分别是left和right，它们的宽度都设置为50%，高度设置为100%，并且浮动在左侧。
left区域的背景颜色设置为#eee，right区域的背景颜色设置为#fff。
footer区域的高度设置为100px，并设置背景颜色为#ccc。

站制作中主要包括上下、左右以及混合分栏的排版模式，分栏式页面现在是网站设计中常见的一种，它可以将网站展现的更美观，内容看上去井然有序。在今天的内容中，小编将详细介绍下分栏式页面设计的要求。

1.页面设计时要将主次分清，不要一味的追求漂亮而违反了页面设计的规则，特别要注意的是不要影响用户的浏览体验。

2.用心创意设计，一般来说左右分栏的网站看上去板块会很少，如果我们通过创新设计，将页面更为丰富，这样用户在浏览网站时就不会觉得死板了。

3.除了在内容上左右分栏可以大幅度交替变换，整体的格调也不能区分得过于明显，否则会显得格格不入，最好让整个页面保持该有的视觉平衡感。

4.导航设计要求，不管采用是文字还是图片的导航形式，都可以利用分栏充分体现，考虑到用户对网站的视觉效应，小编认为在分栏中利用图片导航指引效果会更好。

5.做到左右互补的形式，用户在浏览网站时，由于页面设计左右互补，那么浏览一侧内容的同时就不会遗漏另一侧的内容，甚至会引发用户对网站内容的思考。

总结：分栏设计从内容和结构上来说比普通的设计都要自由得多，两侧既独立又紧密相连，所以，尽量发挥出我们的想象和创意，将好的作品展现到用户面前。

原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2493.html

家好，我是三木。

这篇文章，替大家汇总了css的布局方式，在每个布局的结尾附上了我认为比较好的文章链接，不仅仅可以当作学习资料，也可以当作方法的查询手册，以后开发的时候忘记了某个属性就来查查。

看完推荐的文章保准解决你 99% 的css布局问题

每篇文章不仅仅包含介绍，还有代码案例，以及如w3c网站的在线代码编辑，可以自己修改属性尝试。

普通布局

使用方法——display: block/inline/inline-block

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

资料文章：

w3c：https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display

w3c：https://www.w3school.com.cn/css/css_inline-block.asp

用法：https://zhuanlan.zhihu.com/p/65353887

浮动布局

使用方法：float:left/right

指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

float属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本。

float的值有：

left- 元素浮动到其容器的左侧
right- 元素浮动到其容器的右侧
none- 元素不浮动（将仅显示在文本中出现的位置）。这是默认的
inherit- 元素继承其父元素的浮点值

资料文章：

w3c：https://www.w3schools.com/css/css_float.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

CSS深入理解之float浮动：https://segmentfault.com/a/1190000014554601

弹性布局

使用方法——display：flex/inline-flex

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器有以下属性：

flex-direction-属性决定主轴的方向（即项目的排列方向）
flex-wrap-定义设置换行模式
flex-flow-定义了项目在主轴上的对齐方式
justify-content-定义项目在交叉轴上如何对齐
align-items-定义项目在交叉轴上如何对齐
align-content-定义了多根轴线的对齐方式

资料文章：

w3c：https://www.w3schools.com/css/css3_flexbox_container.asp

Flex 布局教程：语法篇：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

深度解析 CSS Flexbox 布局：https://juejin.cn/post/6844904116141948936

48张小图带你领略flex布局之美：https://juejin.cn/post/6866914148387651592

定位布局

使用方法——position：absolute/relative...

给元素设置postion属性后，就可以定义该元素的top,bottom,left,right四个属性。当然postion的值不同，对应的top,bottom,left,right这四个属性的值代表的含义也不相同

position属性用来指定一个元素在网页上的位置，一共有5种定位方式：

static-静态
relative-相对定位
fixed-固定定位
absolute-绝对定位
sticky-粘性定位

资料文章：

w3c: https://www.w3schools.com/css/css_positioning.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

CSS 定位详解：https://www.ruanyifeng.com/blog/2019/11/css-position.html

表格布局

使用方法——display:table/table-row/table-cell....

有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。

HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。

table布局的display总共包含如下值

table：指定对象作为块元素级的表格，相当于html标签<table>
inline-table：指定对象作为内联元素级的表格，相当于html标签<table>
table-caption：指定对象作为表格标题，相当于html标签<caption>
table-cell：指定对象作为表格单元格，相当于html标签<td>
table-row：指定对象作为表格行，相当于html标签<tr>
table-row-group：指定对象作为表格行组，相当于html标签<tbody>
table-column：指定对象作为表格列，相当于html标签<col>
table-column-group：指定对象作为表格列组显示，相当于html标签<colgroup>
table-header-group：指定对象作为表格标题组，相当于html标签<thead>
table-footer-group：指定对象作为表格脚注组，相当于html标签<tfoot>

资料文章：

display:table的几个用法：https://blog.51cto.com/u_4048786/3205160

css table布局大法：https://segmentfault.com/a/1190000007007885

display:table的用法：https://www.jianshu.com/p/037a706ba9e9

栅格布局

使用方法 ——display：grid

网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

column-gap Specifies the gap between the columns

grid：设置grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow属性
grid-area：设置grid-row-start, grid-column-start, grid-row-end, grid-column-end属性
grid-auto-columns：设置浏览器自动创建的多余网格的列宽
grid-auto-flow：设置排序方式
grid-auto-rows：设置浏览器自动创建的多余网格的行高
grid-column ：设置grid-column-start and、grid-column-end properties
grid-column-end：设置右边框所在的垂直网格线
grid-column-gap：设置列间距
grid-column-start：设置左边框所在的垂直网格线
grid-gap：设置grid-row-gap、grid-column-gap属性
grid-row：设置grid-row-start、grid-row-end属性
grid-row-end：设置下边框所在的水平网格线
grid-row-gap：设置行间距
grid-row-start：设置上边框所在的水平网格线
grid-template：设置grid-template-rows,、grid-template-columns、grid-areas属性
grid-template-areas：设置网格的区域，一个区域由多少单元格组成
grid-template-columns：设置列宽
grid-template-rows：设置行高
row-gap：设置行与行之间的间距

资料文章：

w3c：https://www.w3schools.com/css/css_grid.asp

CSS Grid 网格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Grid 布局：https://juejin.cn/post/6854573220306255880

A Complete Guide to Grid：https://css-tricks.com/snippets/css/complete-guide-grid/

多列布局

使用方法——column-count

column-count： length ｜ auto

column-width：interger ｜ auto

column-count：描述元素的列数
column-fill：设置多列内容的平衡填充模式
column-gap：属性用来设置元素列之间的间隔（gutter）大小
column-rule：属性规定了列与列之间的直线
column-rule-color：设置在多列布局中被画在两列之间的规则（线条）的颜色
column-rule-style：设置在多列布局中被画在两列之间的规则（线条）的样式
column-rule-width：设置在多列布局中被画在两列之间的规则（线条）的宽度
column-span：设置某一个内容是否跨多栏显示。
columns：用来设置元素的列宽和列数

资料文章：

浅谈CSS3多列布局：https://juejin.cn/post/6844903450623524872

CSS columns分栏布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

在线咨询

上一篇：前端基础入门（HTML）
下一篇：使用CSS隐藏页面元素的几种方法，你知道它们的具体区别吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html5、CSS3入门学习笔记2023-9-10分栏

普通布局

资料文章：

浮动布局

资料文章：

弹性布局

资料文章：

定位布局

资料文章：

表格布局

资料文章：

栅格布局

column-gap Specifies the gap between the columns

资料文章：

多列布局

资料文章：

您的项目需求