前言:今天是学校为期六周的实训第一天,实训课感觉很水,第一天讲的竟然是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. php程序员需要撑握的知识点

    1. 基本知识点 HTTP协议中几个状态码的含义:1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码   说明 100   (继续) 请求者应当继续提出请求. 服务器返回此代码 ...

  2. php 返回某个月的 每周几有几天

    不得不承认,这真是一个奇葩的需求,无奈写个类凑活用用. 输入日期格式或者 时间戳,返回当月有多少个周一.周二.周三.....周日; 思路就是 找到这个月有多少天,在便利判断. 稍微考虑下闰年的情况 前 ...

  3. FreeMarker 语法 list

    一.java 代码 @Test public void testFreeMarker() throws Exception { //1.创建一个模板文件 //2.创建一个Configuration对象 ...

  4. JavaScript之Ajax技术

  5. 为了使界面组件更圆滑,Swing,且跨系统

  6. 跳出$.each()循环

    return false:将停止循环 ,跳出eachreturn true:跳至下一个循环(就像在普通的循环中使用'continue').

  7. POJ 1777

    一道好题. 由算术基本定理,知: 那么,对于上式的每个因子值只能是2^M的形式.取第一个式子为例,通过分解因式出(1+p^2)=2^k知,a只能为1. 于是对于p只能是梅森素数.而且每个梅森素数只能出 ...

  8. TeamTalk Android代码分析(业务流程篇)---消息发送和接收的整体逻辑说明

    第一次纪录东西,也没有特别的顺序,想到哪里就随手画了一下,后续会继续整理- 6.2消息页面动作流程 6.2.1 消息页面初始化的总体思路 1.页面数据的填充更新直接由页面主线程从本地数据库请求 2.数 ...

  9. UVA10370 Above Average

    Above Average It is said that 90% of frosh expect to be above average in their class. You are to pro ...

  10. 王立平--TF卡

    最终知道TF卡是什么了... TF卡又称microSD,是一种极细小的快闪存储器卡,由SanDisk(闪迪)公司发明创立. 这样的卡主要于手机使用.但因它拥有体积极小的长处,随着不断提升的容量. 它慢 ...