一、三栏布局 三栏布局实现的是中间自适应宽度，两边固定宽度的布局，中间栏要放在文档流前面，以实现优先渲染。圣杯布局、双飞翼布局都是三栏布局的效果只是实现的方式不一样。 1.圣杯布局 <div id="container"> <div id="main" class="col"> #main </di ...
分类：
Web程序 时间：
2020-06-08 10:45:08
阅读次数：
65
其实CSS浮动原理就三句话，不像网上的某些文章说的天花乱坠！ 浮动必会脱离文档流 浮动会失去块级作用 浮动只在自己所在位置那行向左或者向右浮动 请仔细理解上面这三句话，下面我们来验证。 实验1. 最基本测验： <!DOCTYPE html> <html> <head> <title>css浮动</t ...
分类：
Web程序 时间：
2020-06-05 19:20:58
阅读次数：
161
一 选择符 1 通配：*{} 所有元素 类：p{} 如 p 标签等相应元素 ID：#id{} 使用相应 id 属性的元素样式 类：.类名{} 使用相应 class 属性的元素样式 包含：div p{} 被某些元素包含的子元素的样式 选择符分组： #content2 , .STYLE{} 一次定义几个 ...
分类：
Web程序 时间：
2020-06-02 18:33:52
阅读次数：
100
元素想通过底部、顶部、左侧、右侧属性定位是必须先设定position的属性值 posistion属性的五个值：static、relative、fixed、absoulte、sticky static定位 HTML的默认定位，正常文档流对象 不受top、bottom、left、right的影响 rel ...
分类：
Web程序 时间：
2020-06-01 13:45:06
阅读次数：
100
前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局 传统的布局方法与flex属性通览 文档流：块级元素独占一行，从上往下排列，行级元素从左往右排列。 display inline-block主要用来做横向的布局。用分离负maigin用来产生位移。 元素的布局 学习flex我分成两个 ...
分类：
Web程序 时间：
2020-05-31 10:41:32
阅读次数：
75
position 属性指定了html元素的定位类型。 position 属性有 4 种值：1. static（default）表示没有定位，元素出现在正常的文档流中。为静态定位的元素设置 top|bottom|left|right 不起作用。 2. fixed元素的位置相对于浏览器窗口是固定位置。即 ...
分类：
Web程序 时间：
2020-05-30 22:01:38
阅读次数：
100
BFC（block formatting context）块级格式化上下文。 如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除， ...
分类：
Web程序 时间：
2020-05-30 16:06:35
阅读次数：
79
标准文档流 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面的内容发生了变化，后面的内容位置也会随着发生变化。 HTML就是一种标准文档流文件。 微观现象 1. 空白折叠现象 2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐的效果 3. 自动换行， ...
分类：
Web程序 时间：
2020-05-30 10:34:39
阅读次数：
94
普通流（normalflow）说明前面我们提过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？CSS的定位机制有3种：普通流（标准流）、浮动和定位。普通流又称为“文档流”，或者“标准流”，实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种默认的排列方式，不会出现例外的情况的布局叫做普通流布局。普
分类：
其他好文 时间：
2020-05-29 09:21:28
阅读次数：
67
Position定位 中`position position static relative absolute fixed sticky inherit`。 static 属性是 元素的默认值，即没有定位，遵循正常的文档流对象，对于 、`bottom left right z index`属性的设置 ...
分类：
其他好文 时间：
2020-05-22 12:49:01
阅读次数：
57
