CSS页面基本布局

前提回顾

1. 超文本标记语言(HTML)是一种标记语言,用来结构化我们的网页内容并赋予内容含义;

(超文本标记语言(英语:HyperText Markup Language /ˈhaɪpətekst ˈmɑːkʌp ˈlæŋɡwɪdʒ /,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。)

2. 层叠样式表(CSS)是一种样式规则语言,用来为网站设置样式,布局的代码。

CSS(Cascading Style Sheets /kæˈskeɪdɪŋ staɪl ʃiːts/,层叠样式表)是为 web 内容添加样式的代码,用于设置和布置网页——例如,更改内容的字体、颜色、大小和间距,将其拆分为多个列,或添加动画和其他装饰功能。

3.JavaScript 是一种脚本编程语言,你用它来给你的网站添加交互功能

JavaScript 是一种脚本编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新;

CSS 布局

CSS 页面布局技术允许我们对网页中的元素设置,控制它们相对正常布局流、周边元素(兄弟)、父容器或者主视口/窗口的位置

  • 正常布局流
  • display属性
  • 弹性盒子
  • 网格
  • 浮动
  • 定位
  • CSS 表格布局
  • 多列布局

正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的 HTML 布局方式。

display属性:讨论布局的时候重要的两个值是 display: flex 和 display: grid

display : none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box

none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 
inline: 指定对象为内联元素。 
block: 指定对象为块元素。 
list-item: 指定对象为列表项目。 
inline-block: 指定对象为内联块元素。(CSS2) 
table: 指定对象作为块元素级的表格。类同于html标签(CSS2) 
inline-table: 指定对象作为内联元素级的表格。类同于html标签
(CSS2) table-caption: 指定对象作为表格标题。类同于html标签(CSS2) table-row-group: 指定对象作为表格行组。类同于html标签(CSS2) table-column: 指定对象作为表格列。类同于html标签(CSS2) table-column-group: 指定对象作为表格列组显示。类同于html标签(CSS2) table-header-group: 指定对象作为表格标题组。类同于html标签(CSS2) table-footer-group: 指定对象作为表格脚注组。类同于html标签(CSS2) compact: 分配对象为块对象或基于内容之上的内联对象(CSS3) run-in: 分配对象为块对象或基于内容之上的内联对象(CSS3) ruby: 将对象作为表格脚注组显示(CSS3) ruby-base: 将对象作为表格脚注组显示(CSS3) ruby-text: 将对象作为表格脚注组显示(CSS3) ruby-base-group: 将对象作为表格脚注组显示(CSS3) ruby-text-group: 将对象作为表格脚注组显示(CSS3) box: 将对象作为弹性盒模型显示(CSS3) inline-box: 将对象作为内联块级弹性盒模型显示(CSS3

弹性盒子:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

CSS页面基本布局_第1张图片

  • 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end
  • 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end
  • 设置了 display: flex 的父元素(在本例中是 
    )被称之为 flex 容器(flex container)。
  • 在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项flex item
display: flex / inline-flex;

flex: 将对象作为弹性伸缩盒显示
inline-flex:将对象作为内联块级弹性伸缩盒显示

在父类中设置的样式
flex-direction:子类在主轴上的分布
flex items默认都是沿着main axis(主轴)从main start 开始往main end 方向排布

flex-direction决定了main axis的方向,有4个取值:

  1. row(默认):从左往右
  2. row-reverse:从右往左
  3. column:从上往下
  4. column-reverse:从下往上

CSS页面基本布局_第2张图片

justify-content:子类在主轴上的对齐方式 
justify-content决定了flex items在main axis 上的对齐方式,共6个取值:

  1. flex-start(默认值):与 main start 对齐
  2. flex-end:与 main end 对齐
  3. center:居中对齐
  4. space-between:flex items之间的距离相等,与main start、main end两端对齐
  5. space-evenly:flex items之间的距离相等,与main start、main end之间距离等于flex items之间的距离
  6. space-around:flex items之间的距离相等,与main start、main end之间距离等于flex items之间的距离的一半

CSS页面基本布局_第3张图片

align-content:子类在交叉轴上的分布 
 align-content决定了多行flex items在cross axis上的对齐方式,用法和 justify-content类似,共7个取值:

  1. stretch(默认值):与align-items的stretch类似
  2. flex-start:与cross start对齐
  3. flex-end:与cross end对齐
  4. center:居中对齐
  5. space-between:flex items之间的距离相等,与cross start、cross end两端对齐
  6. space-evenly:flex items之间的距离相等,与cross start、cross end之间距离等于flex items之间的距离
  7. space-around:flex items之间的距离相等,与cross start、cross end之间距离等于flex items之间的距离的一半

CSS页面基本布局_第4张图片

align-items:子类在交叉轴上的对齐方式
align-items决定了flex items在cross axis上的对齐方式,共6个取值:

  1. normal:在弹性布局中,效果和stretch一样
  2. stretch:当flex items在cross axis方向的size为auto时,会自动拉伸至填充flex container
  3. flex-start:与cross start对齐
  4. flex-end:与cross end对齐
  5. center:居中对齐
  6. baseline:与基准线对齐

flex-wrap:子类的多行显示

flex-wrap决定了flex container是单行还是多行,共3个取值

  1. nowrap(默认):单行
  2. wrap:多行
  3. wrap-reverse:多行(对比wrap,cross start与cross end相反)

在子类中设置的样式


flex-grow:子类的扩展
flex-grow决定了flex items如何扩展

可以设置任意非负数字(正小数、正整数、0),默认值为0
当flex container在main axis方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1

每个flex items扩展的size = flex container的剩余size*flex-grow / sum
如果所有flex items的flex-grow总和sum不超过1

每个flex items扩展的size = flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width 、max-height

 flex-shrink:子类的收缩
 flex-shrink决定了flex items如何收缩

可以设置任意非负数字(正小数、正整数、0),默认值为1
当flex items在main axis方向上超过了flex container的size时,flex-shrink属性才会有效


align-self:子类在交叉轴上的对齐方式
flex items可以通过align-self覆盖flex container设置的align-items,共6个取值:

auto(默认值):遵从flex container设置的align-items
stretch、flex-start、flex-end、center、baseline,效果和align-items一样
flex
flex是flex-grow,flex-shrink、flex-basis的简写,flex属性可以指定1/2/3个值
 

你可能感兴趣的:(css,前端)

(CSS2) table-cell: 指定对象作为表格单元格。类同于html标签
(CSS2) table-row: 指定对象作为表格行。类同于html标签