前言:今天是学校为期六周的实训第一天,实训课感觉很水,第一天讲的竟然是HTML...实训老师丢了一个静态页面给我们做。感觉很久没写过这种东西,突然觉得自己的基本功很渣。布局这方面感觉需要总结一下,然后再去把做好的网站页面做成响应式的吧。

一、文档流布局(与display有关)

  • none;
  • block;
  • inline-block。

二、浮动布局(与float有关)

三、定位布局(与display有关)

  • static;
  • relative;
  • absolute;
  • fixed。

四、flex布局

flex 在IE浏览器上只支持 ie 10+,设为 Flex 布局以后,子元素的 floatclear 和 vertical-align 属性将失效。

   .ele{
display: -webkit-flex;
display: flex;
display: inline-flex;
display: -webkit-inline-flex;
}

(1)父容器

  • flex-direction:主轴的方向;
  • flex-wrap:子元素超过父容器之后的怎么排列;
  • flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式。;
  • justify-content:子元素在主轴的排列方向;
  • align-items:子元素在交叉轴的排列方向;
  • align-content:多根轴线的对齐方式。

具体用法:

.ele {
flex-direction: row; // 默认值,主轴为水平方向,起点在左端。
flex-direction: row-reverse; // 主轴为水平方向,起点在右端。
flex-direction: column; // 主轴为垂直方向,起点在上。
flex-direction: column-reverse; // 主轴为垂直方向,起点在下。
} .ele {
flex-wrap: nowrap; // 默认,不换行
flex-wrap: wrap; // 换行,第一行在上方。
flex-wrap: wrap-reverse // 换行,第一行在下方。
} .ele{
justify-content: flex-start; // 默认,左对齐
justify-content: flex-end; // 右对齐
justify-content: center; // 居中
justify-content: space-between; // 两端对齐,项目之间的间隔都相等。
justify-content: space-around; // 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 } .ele {
flex-flow: <flex-direction> || <flex-wrap>;
} .ele{
align-items: flex-start; // 交叉轴的起点对齐。
align-items: flex-end; // 交叉轴的终点对齐。
align-items: center; // 交叉轴的中点对齐。
align-items: baseline; // 项目的第一行文字的基线对齐。
align-items: stretch; // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。
} .ele{
align-content: flex-start; // 与交叉轴的起点对齐
align-content; flex-end; // 与交叉轴的终点对齐。
align-content: center; // 与交叉轴的中点对齐。
align-content: space-between;// 与交叉轴两端对齐,轴线之间的间隔平均分布。
align-content: space-around; // 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
align-content: stretch; // 默认 轴线占满整个交叉轴。
}

(2)子元素

  • order:子容器的排列顺序;
  • flex-grow:当父容器中有剩余空间时,按子元素设置的flex-grow,按比例进行拉伸子元素;
  • flex-shrink:默认不换行的情况下,子元素超过父容器,则按照子元素设置的flex-shrink,按比例缩小子元素;
  • flex-basis:子容器在不伸缩情况下的原始尺寸,即与width相同,但优先级比width高,若有一个为auto,则不为auto的优先级高;
  • flex:子元素的 flex 属性是 flex-grow,flex-shrinkflex-basis 的简写;
  • align-self:属性允许单个项目有与其他项目不一样的对齐方式。

具体用法:

.ele{
order: num;
} .ele{
flex-grow: <number>; /* default 0 */
} .ele{
flex-shrink: <number>; /* default 0 */
} .ele{
flex-basis: <length> | auto; /* default auto */
} .ele{
align-self: auto; // 继承父元素的 align-items 属性
align-self: flex-start; // 交叉轴的起点对齐。
align-self: flex-end; // 交叉轴的终点对齐。
align-self: center; // 交叉轴的中点对齐。
align-self: baseline; // 项目的第一行文字的基线对齐。
align-self: stretch; // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。
}

五、网格布局

grid可以实现flex实现不了的二维布局
(1)基本概念:
  • 网格线即每条线;
  • 网格轨道即两条线之间的空间;
  • 单元格是四条网格线直接的空间,它是网格的最小单位;
  • 网格区域是由任意四条网格线组成的空间,包含一个或多个单元格。

(2)代码解析

  • 3行4列(也可以使用fr作为单位)
        .grid-container{
display: grid;
grid-template-rows: 50px 80px 100px;
grid-template-columns: 50px 40px 100px 80px;
}
  • 第一行的的高度在100-200px之间,第二行的高度在50-200px之间,由于两者的最大高度之和超过300px,故都取最小高度,则300-100-50=150;

   则第一行的高度为:100+150/2=175;第二行的高度为:50+150/2=125

  

        .grid-container{
display: grid;
grid-template-rows: minmax(100px,200px) minmax(50px,200px);
grid-template-columns: 1fr 1fr 2fr;
height: 300px;
}
  • 2行3列,repeat(个数,大小)
        .grid-container{
display: grid;
grid-template-columns: repeat(2,100px);
grid-template-rows: repeat(3,100px);
}
  • grid-column-gap:创建列与列之间的距离。
    grid-row-gap:行与行之间的距离。
        .grid-container{
padding: 20px;
display: grid;
grid-template-columns: repeat(2,100px);
grid-template-rows: repeat(3,100px);
grid-column-gap: 50px;
grid-row-gap: 15px;
background: pink;
}
  • item1 在第2-3条行网格线、第2-3列网格线之间,一共3行2列,即item在第四个格子。
        .grid-container{
padding: 20px;
display: grid;
grid-template-columns: repeat(2,100px);
grid-template-rows: repeat(3,100px);
grid-column-gap: 50px;
grid-row-gap: 15px;
background: pink;
}
.item{
border: 2px solid palegoldenrod;
color: #fff;
text-align: center;
font-size: 20px;
}
.item1{
grid-row-start:;
grid-row-end:;
grid-column-start:;
grid-column-end:;
background: #fffa90;
color: #000;
}
  • grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3;

等价于:

   grid-row: 2;
grid-column: 3 / 4;
  • 合并表格单元
.item1{
grid-column-start:;
grid-column-end:;
grid-row-start:;
grid-row-end:;
}

CSS布局总结(一)的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  10. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

随机推荐

  1. 记Spring搭建功能完整的个人博客「Oyster」全过程[其二] Idea中Maven+SpringBoot多模块项目开发的设计和各种坑(模块间依赖和打包问题)

    大家好嘞,今天闲着没事干开写写博客,记录一下Maven+SpringBoot的多模块设计和遇到的坑. 多模块设计 简单说明一下截止目前的需求: 需要RESTful API:对文章.标签.分类和评论等的 ...

  2. https自签证书

    linux自带openssl,所以最好在linux平台操作 第一步:生成采用des3算法保护的私钥:openssl genrsa -des3 -out private-rsa.key 1024 命令执 ...

  3. MYSQL: sql中某一个字段内容为用逗号分割的字符串转换成多条数据

    场景: 表名:testsuer id     name 1       小红,小李,李红,小法 要结果值为: 1     小红 1     小李 1     李红 1     小法 MYSQL函数解释 ...

  4. 一步步理解linux字符设备驱动框架(转)

    /* *本文版权归于凌阳教育.如转载请注明 *原作者和原文链接 http://blog.csdn.net/edudriver/article/details/18354313* *特此说明并保留对其追 ...

  5. SSH框架整合截图总结(三)

    联系人信息查询1 点击 联系人信息查询 超链接时候,到查询页面 (1)在查询页面中,选择客户,根据客户进行查询 下拉表框显示所有客户  可以根据所属的客户进行联系人查询  2 在查询页面中,输入值,提 ...

  6. log4j输出多个自定义日志文件,动态配置路径

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  7. PatentTips - Uncore thermal management

    BACKGROUND The field of invention relates to the computer sciences, generally, and, more specificall ...

  8. LOJ——#2256. 「SNOI2017」英雄联盟

    https://loj.ac/problem/2256 题目描述 正在上大学的小皮球热爱英雄联盟这款游戏,而且打的很菜,被网友们戏称为「小学生」.现在,小皮球终于受不了网友们的嘲讽,决定变强了,他变强 ...

  9. POJ 2189

    P是端点,牛在区域中啊... #include <iostream> #include <cstdio> #include <cstring> #include & ...

  10. HTML5 格式化方式以及应用

    <b>加粗字体 <big>定义大号字体 <em>定义着重文字 <i>定义斜体字 <small>定义小号字体 <strong>定义 ...