2021-06-13
CSS布局
关于布局：网页布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各个元素进行合理排版。
目录
CSS布局
多列布局
使用css定位布局
弹性盒子布局
flex-direction:指定弹性子元素的排列方式
flex-wrap:设置弹性子元素超出父元素时是否换行
flex-flow:flex-direction和flex-wrap的简写
align-items:设置弹性子元素没有在侧轴（纵轴）方向的对齐方向上的对齐方式
align-content:在弹性子元素没有占用交叉轴上所有可用的空间时对齐弹性子元素（垂直）
justify-content:设置弹性子元素在主轴（横轴）方向的对齐方式；
多列布局
多列布局：方便开发人员将文本排版成多列，实现报纸那样的多栏效果；
column-count:设置元素应该被分隔的列数；
column-width:设置列的宽度；
column-gap:设置列之间的间隔；
column-rule:设置列的样式，与border类似，这是三个column-rule属性的简写属性；
column-span:设置元素应该横跨的列数；
columns:column-width和column-count属性的简写样式；
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>多列布局</title><style type="text/css">div{border: 1px solid #0c0;padding: 5px;margin: 5px;}.four{columns: auto 4;//column-rule: 3px dotted red;//}.auto{columns: 120px auto;column-rule: 2px inset blue;}</style></head><body><div class="four"><h1>天龙八部</h1><h3>释 名</h3><p>“天众”，佛教宇宙观有三界（欲界、色界、无色界）六道（天、人、阿修罗、畜生、饿鬼、地狱）之说，欲界有六重天：四天王天、三十三天、夜摩天、兜率天、化乐天、他化自在天。色界有十八天：梵辅天，大梵天，梵众天，无量光天，光音天，少光天，徧净天，无量净天，无想天，少净天，广果天，福生天，无云天，无烦天，无热天，善现天，善见天，色究竟天。无色界四空天：空无边处天，识无边处天，无所有处天，非想非非想处天。“天众”就是生活在各层天的众生，他们的生活比人间优胜得多，寿命也长得多。天众当然也包括天王，如帝释天主、大梵天王等，民间常称天王为神。中文常用省略语，所以“天”字至少包括四义：一、苍穹；二、天界；三、天人；四、天王。天众指的就是天人和天王。佛教认为一切事物无常，六道众生处于轮回之中，所以尽管天人的福报大，但他们的寿命终了之后，还是要死的。天人临终之前有五种征状：衣裳垢腻、头上花萎、身体臭秽、腋下汗出、不乐本座（第五个征状或说是“玉子离散”），这就是所谓“天人五衰”，是天人最大的悲哀。帝释是众天人的领袖。</p></div><div class="auto"><h1>三国演义·</h1><p>《三国演义》（全名为《三国志通俗演义》，又称《三国志演义》）是元末明初小说家罗贯中根据陈寿《三国志》和裴松之注解以及民间三国故事传说经过艺术加工创作而成的长篇章回体历史演义小说，与《西游记》《水浒传》《红楼梦》并称为中国古典四大名著。该作品成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文，该版本也成为诸多版本中水平最高、流传最广的版本。 [1]
《三国演义》可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分，描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。
《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。 [2] </p></div></body>
</html>[点击并拖拽以移动]
使用css定位布局
在布局里面有一个最重要的是属性就是position；
position的属性：
static:与正常流相同（默认）；
relative（相对定位）：参照物是“盒子”（也就是div），盒子的位置可以相对其在正常流中的位置出现偏移，对象不可层叠，将根据left,right和bottom等属性的值在正常流进行偏移；
absolute（绝对定位）：参照物是预览器，将盒子对象从正常流中拖出，完全使用width,height,left,right,yop,bottom等属性进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩，元素的层叠通过z-index属性定义。
fixed：固定在屏幕的某个位置，位置通过left,top,right,和bottom属性指定吗，并且随用户滚动窗口而改变位置。
absolute
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.cd{position: absolute;width: 100px;height: 100px;background-color: gold;}.x{position: absolute;width: 100px;height: 100px;background-color: red;}.y{position: absolute;width: 100px;height: 100px;background-color: blue;}</style></head><body><div class="cd">1</div><div class="x">2</div><div class="y">3</div></body>
</html>
relative
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.cd{position: relative;width: 100px;height: 100px;background-color: gold;}.x{position: relative;width: 100px;height: 100px;background-color: red;}.y{position: relative;width: 100px;height: 100px;background-color: blue;}</style></head><body><div class="cd">1</div><div class="x">2</div><div class="y">3</div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.cd{position: relative;float: left;width: 100px;height: 100px;background-color: gold;}.x{position: relative;float: left;width: 100px;height: 100px;background-color: red;}.y{position: relative;float: left;width: 100px;height: 100px;background-color: blue;}</style></head><body><div class="cd">1</div><div class="x">2</div><div class="y">3</div></body>
</html>
弹性盒子布局
整套布局规范，是一种当页面不需要适应不同的屏幕大小及设备内型时，确保元素拥有恰当行为的布局行的布局方式。
flex-direction:指定弹性子元素的排列方式
row :(默认)元素将水平展示；
row-reverse:与row相同，但是以相反的顺序显示；
column：元素将垂直显示；
column-reverse：与column相同，但从后往前排，最后一项在最上面
flex-wrap:设置弹性子元素超出父元素时是否换行
nowrap:默认值，弹性容器为单行，弹性元素可能会溢出容器
wrap：弹性容器为多行，弹性子元素的部分会被放置到新行，弹性子元素内部会发生断行；
wrap-reverse：与wrap类似，但是顺序相反
flex-flow:flex-direction和flex-wrap的简写
align-items:设置弹性子元素没有在侧轴（纵轴）方向的对齐方向上的对齐方式
stretch:默认值。子元素被拉伸以适应容器
center：子元素位于容器的中心
flex-start:子元素位于元素的开头
flex-end:子元素位于容器的结尾
baseline:子元素位于元素的基线以上
align-content:在弹性子元素没有占用交叉轴上所有可用的空间时对齐弹性子元素（垂直）
justify-content:设置弹性子元素在主轴（横轴）方向的对齐方式；
flex-start：默认值，弹性子元素向行首紧挨着填充。
center：弹性子元素居中紧挨着填充。
space-between：弹性子元素平均分布再该行上。（如果剩余空间为负值或者只有一个弹性子元素，则该值相当于flex-start）
space-arund:弹性子元素平均分布在该行上，两边留有一半的间隔空间。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子布局</title><style type="text/css"> .content{margin: 0 auto;width: 600px;height: 350px;display:row;border: 1px solid black;}.head{display: flex;width: 600px;height: 100px;}.head>.one{width: 600px;height: 100px;background-color: blue;}.body{width: 600px;height: 150px;display: flex;justify-content: center;}.content>.body>.two{width: 150px;height: 150px;background-color: aqua;}.content>.body>.three{width: 150px;height: 150px;background-color: chocolate;}.content>.body>.four{width: 150px;height: 150px;background-color: crimson;}.content>.bottom>.five{width: 600px;height: 100px;background-color: steelblue;}.bottom{width: 600px;height: 100px;}</style></head><body><div class="content"><div class="head"><div class="one">1</div></div><div class="body"><div class="two">2</div><div class="three">3</div><div class="four">4</div></div><div class="bottom"><div class="five">5</div></div></div></body>
</html>
2021-06-13相关推荐
- Mculover666的博客文章导航（嵌入式宝藏站）（2021.06.17更新）
一.MCU系列 1. 开发环境 [Keil MDK](一)Keil MDK 5.28 的下载.安装.破解 [Keil MDK](二)Keil MDK中芯片器件包的安装 [Keil MDK](三)Kei ...
- 电动力学每日一题 2021/10/13 用Fourier变换法计算静止电荷产生的电场
电动力学每日一题 2021/10/13 用Fourier变换法计算静止电荷产生的电场 静止点电荷 具有均匀线密度的静止电荷产生的电场 具有均匀面密度的静止电荷产生的电场 用Fourier变换法计算电场 ...
- [2021.1.13多校省选模拟2]T1(动态规划/轮廓线dp）
[2021.1.13多校省选模拟2]T1 一个经典的轮廓线dp,可以发现一定可以找到一条轮廓将这个图形分开,然后使得左半部分由左边处理,右半部分由右边处理,然后我们只需要处理这个折线即可,具体实现需要 ...
- 【笔试记录】2021/3/13美团
2021/3/13美团笔试 1.旋转二维数组 m, n = map(int, input().split()) a = [] for _ in range(m):a.append(list(map(i ...
- 哔哩哔哩“2021.07.13 我们是这样崩的”报告的学习-1
哔哩哔哩"2021.07.13 我们是这样崩的"报告的学习-1 这份报告是我学计算机两年来第一次真实看到大厂的员工到底在干什么.出现了很多专有名词,以及当前最先进的互联网企业的应用 ...
- 实习日志 （2021.09.13）
2021.09.13星期一 今天把之前的算法题终于给弄明白了,并能够按照自己的思路去把他给完成,总结这个题目并不是很难,最重要的是要把链表给弄懂,一开始由于我对链表不是很熟悉,导致我在写该题目的时候花 ...
- 2021.04.13丨sRNAnalyzer报错fastx_collapser: Invalid input: This looks like a multi-line FASTA file解决办法
解决方法已更新:2021.06.19丨sRNAnalyzer报错fastx_collapser补充解决办法_穆易青的博客-CSDN博客 摘要 接到一个外泌体的miRNA分析,正常来说,本来可以直接使用 ...
- 2021.5.13 易协同访客数据
2021.5.13 易协同访客数据 易协同门户:https://www.e-apo.cn/ 平台数据: 统计指标说明: PV(浏览量):即通常说的Page View(PV),用户每打开一个网站页面就 ...
- 2021.06.03邮票面值设计
2021.06.03邮票面值设计 题目描述 给定一个信封,最多只允许粘贴 N 张邮票,计算在给定 K(N+K≤15)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值 MAX ...
- window10目前（2021.2.13）的iTunes的iOS更新升级固件位置
一.window10目前(2021.2.13)的iTunes的iOS更新升级固件位置: C:\Users\(你的电脑用户名称)\AppData\Local\Packages\AppleInc.iTun ...
最新文章
- jtoken判断是否包含键_c#-确定JToken是否为叶子
- 【shell 脚本】删除 由windows传入linux含有的 ^M
- 2019年Java和JVM生态系统预测：OpenJDK将成为Java运行时市场领导者
- 使用AngularJS上传文件
- 皮一皮：怎么才能让员工有干劲...
- 深度学习核心技术精讲100篇（九）-Catboost算法原理解析及代码实现
- 织梦内容管理系统(DedeCMS)
- Centos7下python3安装pip-9.0.1
- android h5选择图片上传,js-微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）...
- java上机实验答案_java上机实验答案与解析
- Redis集群的原理和搭建
- Flink : Flink JobManager报错 akka.pattern.AskTimeoutException: Ask timed out on
- Super Mario HDU 4417 主席树区间查询
- 麟龙指标通达信指标公式源码_【通达信】麟龙量能饱合度指标公式源码
- linux设置自动关机命令,Linux怎么用命令设置自动关机
- Jmeter使用技巧集锦大全
- iOS 【iOS-切换控制器的手段及异同】
- Linux du命令（du -h ,du -s）
- 外网访问内网FTP服务器
- 从招式与内功谈起——设计模式概述(三)