前言:今天是学校为期六周的实训第一天,实训课感觉很水,第一天讲的竟然是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. 网络教程(13) 深入TCP协议

    应用层向TCP层发送用于网间传输的.用8位字节表示的数据流,然后TCP把数据流分割成适当长度的报文段(通常受该计算机连接的网络的数据链路层的最大传输单元(MTU)的限制).之后TCP把结果包传给IP层 ...

  2. Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现

    Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...

  3. Linux 查看用户命令

    1.Linux里查看所有用户 (1)在终端里.其实只需要查看 /etc/passwd文件就行了. (2)看第三个参数:500以上的,就是后面建的用户了.其它则为系统的用户. 或者用cat /etc/p ...

  4. 修改linux新建账户时的过期时间

    #!/bin/bash cat << EOF >> /etc/login.defs PASS_MAX_DAYS 90 EOF

  5. bitset骚操作

    bitset的用途挺多的,是一个比较骚的常数优化 一.很多位数的二进制数 poj 2443 http://poj.org/problem?id=2443 直接开个1万位的二进制数,求交就行了. 有关集 ...

  6. MVC笔记(一)

    1 MVC介绍 MVC是一个编程思想. 是一种设计模式 思想: 将一个功能分解成3个部分, M: Model (模型) 处理数据相关的逻辑 V: View (视图) 显示页面 C: Controlle ...

  7. 【codeforces 803C】Maximal GCD

    [题目链接]:http://codeforces.com/contest/803/problem/C [题意] 给你一个数字n;一个数字k; 让你找一个长度为k的序列; 要求这个长度为k的序列的所有数 ...

  8. CodeForcesGym 100676H Capital City

    H. Capital City Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on CodeForcesG ...

  9. Mark一下:成为CSDN博客专家

    距第一篇博客(发表于2015.08.13)已有差不多7个月,还记得当时受一个基友的启发,觉得要总结写作些什么,于是磕磕碰碰写出第一篇博客,坚持写作至今,穿梭于CSDN.简书.知乎和作业部落等门户网站, ...

  10. servlet3.0理解

    1.servlet是用Java编写的服务器端程序,服务器端程序,服务器端程序. 2.Servlet运行于支持Java的应用服务器中.spring mvc有自己的实现servlet 从原理上讲,Serv ...