每个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
布局 display 语法： display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-gr ...
分类：
Web程序 时间：
2020-06-25 23:23:15
阅读次数：
180
前言 此文章是 解剖CSS布局原理 的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。 因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对PC端的布局进行讲解，以下代码只写关键代码。如果你发现你写了关键打代码还达不到效果，请检查是否写 ...
分类：
Web程序 时间：
2020-06-11 13:24:46
阅读次数：
134
最近看到一篇20 个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识，但却阻止了我做项目的速度,如果你看了，我相信你也会受益的。 为什么此处li标签内的p元素看 ...
分类：
Web程序 时间：
2020-06-10 21:25:47
阅读次数：
69
CSS布局 版心和布局流程 为什么要应用布局？ 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版” 版心 “版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960 ...
分类：
其他好文 时间：
2020-06-06 23:24:19
阅读次数：
176
1、作用：控制元素和元素之间，或者元素和内容之间的位置关系； 2、概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素之间的相互关系，CSS定义所有的元素都可以有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界（外边距） 3、盒模型的组成：content（内容区）+p ...
分类：
Web程序 时间：
2020-06-05 19:30:50
阅读次数：
67
