经典布局(flex和传统两种实现)
jiaojsun
做一只快乐的小码龙
展开
-
经典布局(flex和传统两种实现)—上中下一栏式
1.传统方式简言之:就是按照每个块元素占一行的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ ...原创 2019-06-19 14:46:27 · 3040 阅读 · 0 评论 -
经典布局(flex和传统两种实现)—左右两栏式
1.混合浮动+普通流混合浮动+普通流父级:宽度固定left: 宽度固定。浮动起来right:宽度和父级一样,设置margin-right:left的宽度px,宽度随父级变化而变化(固定+自适应)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2019-06-20 09:57:49 · 12733 阅读 · 0 评论 -
经典布局(flex和传统两种实现)—左右页眉页脚
1.浮动法上中下:都是块元素。定宽,定高中:定宽高: 左右:浮动且定宽高这种方式其实并不好,写了好多代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <s...原创 2019-06-20 10:50:43 · 370 阅读 · 0 评论 -
经典布局(flex和传统两种实现)—左中右三栏式
1.浮动法父级宽度:80%左右: 定宽高, 分别浮动向左,浮动向右中: margin: 0 200px; 定高注意,中间的块元素必须放在后面左右定宽,中间自适应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...原创 2019-06-20 11:14:38 · 2167 阅读 · 0 评论 -
经典布局(flex和传统两种实现)—圣杯布局
所谓圣杯布局(三栏加页眉页脚)一张图解释就是1.浮动法上中下:定宽定高中间:左中右left浮动且都必须设置宽度 左:margin-left:-100% 右:margin-left:-100px: 中content:margin: 0 180px 0 150px<!DOCTYPE html><html lang="en"><hea...原创 2019-06-20 14:15:26 · 520 阅读 · 0 评论