布局
display属性
值 | 描述 |
---|---|
none | 不会被显示 |
block | 块级元素,元素前后会带有换行符 |
inline | 内联元素,元素前后没有换行符 |
inline-block | 行内块元素 |
list-item | 作为列表显示 |
run-in | 根据上下文作为块级元素或内联元素显示 |
table | 元素会作为块级表格来显示(类似 <table> ),表格前后带有换行符 |
inline-table | 元素会作为内联表格来显示(类似<table> ),表格前后没有换行符 |
table-row-group | 元素会作为一个或多个行的分组来显示(类似 <tbody> ) |
table-header-group | 元素会作为一个或多个行的分组来显示(类似 <thead> )。 |
table-footer-group | 元素会作为一个或多个行的分组来显示(类似 <tfoot> )。 |
table-row | 元素会作为一个表格行显示(类似 <tr> )。 |
table-column-group | 元素会作为一个或多个列的分组来显示(类似<colgroup> )。 |
table-column | 元素会作为一个单元格列显示(类似<col> ) |
table-cell | 元素会作为一个表格单元格显示(类似 <td> 和 <th> ) |
table-caption | 元素会作为一个表格标题显示(类似 <caption> ) |
inherit | 规定应该从父元素继承 display 属性的值。 |
position属性
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
盒模型
外边距(margin),边框(border),内填充(padding)和内容(content)
浮动float
清除浮动,最常用的方法有两种:
- overflow: 将父元素的overflow,设置成hidden。
- after伪类:对子元素的after伪类进行设置。
静态布局(static layout)
传统Web设计,网页上的所有元素的尺寸一律使用px作为单位
流式布局(liquid layout)
页面元素的宽度按照屏幕分配率进行适配调整,但整体布局不变
网页中主要的划分区域的尺寸使用百分数(搭配min-、max-属性使用)
自适应布局(Adaptive Layout)
为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围
响应式布局(Responsive Layout)
通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用
创建多个流体式布局,分别对应一个屏幕分辨率范围
弹性布局(rem/em布局)
rem/em的区别:rem是相对于html元素的font-size大小而言的,而em是相对于其父元素
包裹文字的各个元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸使用百分数或px做单位
flex布局
任何一个容器都可以指定为Flex布局
display: flex;
行内元素也可以使用Flex布局
display: inline-flex;
Webkit内核的浏览器,必须加上-webkit前缀
display: -webkit-flex;
注意:设为flex布局以后,子元素的float、clear和vertical-align属性将失效
容器的属性
- flex-direction 决定主轴的方向(即项目的排列方向)
- row: 主轴为水平方向,起点在左端
- row-reverse: 主轴为水平方向,起点在右端
- column: 主轴为垂直方向,起点在上沿
- column-reverse:主轴为垂直方向,起点在下沿
- flex-wrap 决定若一条轴线排不下,如何换行
- nowrap: 不换行
- wrap: 换行,第一行在上方
- wrap-reverse: 换行,第一行在下方
-
flex-flow 是flex-direction属性和flex-wrap属性的简写形式,默认为row nowrap;
< flex-direction > || < flex-wrap >; -
justify-content 项目在主轴上的对齐方式
- flex-start: 左对齐
- flex-end: 右对齐
- center: 居中
- space-between: 两端对齐,项目之间的间隔都相等
- space-around: 每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍
- align-items 在交叉轴上对齐方式
- flex-start: 交叉轴的起点对齐
- flex-end: 交叉轴的终点对齐
- center: 交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch: 默认,如果项目未设置高度或设置为auto,将占满整个容器的高度
- align-content 定义了多根轴线的对齐方式(只有一根时,不起作用)
- flex-start: 与交叉轴的起点对齐
- flex-end: 与交叉轴的终点对齐
- center: 与交叉轴的中点对齐
- space-between: 与交叉轴两端对齐,轴线之间的间隔平均分布
- space-around: 每根轴线两侧的间隔都相等,项目之间的间隔比项目与边框的间隔大一倍
- stretch: 默认,轴线占满整个交叉轴
双飞翼布局
左右固定,中间自适应
- 通过负边距和浮动来实现
实现原理就是margin为负值可以改变float元素的排列位置
- 中间自适应的div需要放在left和right容器前面并且内容div需要用父容器包裹
- left和right容器向同一个方向浮动。
- 通过浮动两边的div实现
左右固定宽度并且向两边浮动,中间的div设置两边的margin
- 该方式只需要注意中间自适应的div需要放在left和right容器的后面。
- left和right容器向两边浮动。
- 通过flex属性来实现
若有错误,希望大佬们能指点指点,谢谢~ ?