布局与列表详解-优快云博客

布局 - position 属性
static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

div.fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

relative定位
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

absolute 定位
相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。

sticky 定位
基于用户的滚动位置来定位

列表
无序列表

无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：
Coffee
Milk
``
有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：
1.Coffee
2.Milk

分类行内元素
HTML 元素是行内元素，能够用作文本的容器。

设置元素的类，能够为相同的元素设置相同的样式。

盒子模型
外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

flex弹性布局
display flex

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

在这里插入图片描述

容器属性
flex-direction
决定主轴的方向（即项目的排列方向）
flex-wrap
定义如果一行排不下如何换行
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content
定义了项目在主轴上的对齐方式
align-items
定义项目在交叉轴（纵轴）上如何对齐

项目属性
rder

.item {
  order: <integer>;
}
定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}
定义项目的放大比例，默认为0
如果所有的item 的flex-grow的值都是一样的话那就是以item 的width为最小值平均分配主轴上的宽度。如果item没有设置width则所有的item平分主轴上的剩余宽度（多余空间）。 
如果item的flex-grow的值不一样，那就是根据对应的比例来分配主轴上的剩余宽度（多余空间）。同样是以item设置的width为最小值。 
如果item设置的max-width则放大的宽度不会超过该值。

flex-shrink

.item {
  flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 
如果container容器设置的flex-wrap则不存在空间不足的情况，如果超过会自动换行。所以这时候设置flex-shrink也是不起作用的。 
负值对该属性无效。

flex-basis

.item {
  flex-basis: <length>|auto; /* default auto */
}
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选