网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地 ...
分类：
其他好文 时间：
2020-06-30 10:28:51
阅读次数：
76
CSS 中文开发手册 网格布局的基础知识 | CSS Grid Layout: Basic Concepts of Grid Layout (Grid Layout) - CSS 中文开发手册 CSS网格布局将二维网格系统引入到CSS中.。网格可用于布局主要页面区域或小用户界面元素。本文介绍了CSS... ...
分类：
Web程序 时间：
2020-06-30 00:20:48
阅读次数：
87
这两种模型都是为了做到一种左右固定中间自适应的效果，听到的有人对于圣杯布局和双飞翼布局的描述很形象，首先一个圣杯的左右把柄和圣杯是一体的，所以body里面的代码是这样的： 1 <div class="container"> 2 <div class="center"></div> 3 <div cl ...
分类：
其他好文 时间：
2020-06-29 23:08:56
阅读次数：
112
每个HTML标签都会生成一个盒模型，盒模型是正常流布局非常重要的概念。盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成。 1. 宽度(width)和高度(height) 盒模型有2种类型，怪异盒模型和标准盒模型，在不同盒模型 ...
分类：
Web程序 时间：
2020-06-29 21:30:24
阅读次数：
71
Flex(弹性布局)，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。 弹性布局由弹性容器(flex container)和弹性项目(flex item)组成。 在弹性容器中，水平方向称为主轴(main axis)(起点main start,终点main end)；垂直方向称为纵轴(cross ...
分类：
Web程序 时间：
2020-06-29 21:27:31
阅读次数：
87
元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分，对应地它们之间的盒模型也会有不同。 1. 行内元素(inline) 通过display: inline可将元素声明为行内元素，顾名思义指在行里面的元素，因此没有换行的行为。 1.1 宽度和高度 行内 ...
分类：
Web程序 时间：
2020-06-29 21:27:16
阅读次数：
101
布局(layout),指各个元素在网页里如何摆放以形成最终的页面,默认布局是从左到右、从上到下。改变元素的默认布局方式有很多种，浮动(float)就是其中一种。 1. 浮动(float) 浮动类似于word里面文字围绕图片的效果，可设置为向左(left)或向右(right)浮动。 // 元素默认没有 ...
分类：
Web程序 时间：
2020-06-29 21:27:04
阅读次数：
85
定位布局(Position)指元素可以脱离原来的位置，定位到页面中的任意位置。 定位布局以内边距(padding)区域的左上角为定位原点，分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。 1. 静态定位(static) 静态定位是默认的文档布局方式， ...
分类：
Web程序 时间：
2020-06-29 21:26:45
阅读次数：
78
自己入行已经很多年了，也陆陆续续的写了一些博客，但始终没有坚持好好写博客。 以此篇为记，以后好好维护自己的博客。很多东西不总结，不会深刻，而且还很容易忘记。 开始之初有几点注意的地方，需要标记一下： 1、当然是坚持了。 2、博客的分类和布局要美观（自己看着才会舒服）。 3、内容要深刻、多加上自己的思 ...
分类：
其他好文 时间：
2020-06-29 20:20:32
阅读次数：
74
1：找个容器： .container { display: flex | inline-flex; //可以有两种取值：块元素，行内元素 } 2：容器的设置： .container { flex-direction: row | row-reverse | column | column-rever ...
分类：
其他好文 时间：
2020-06-29 13:17:23
阅读次数：
63
