欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css 圣杯布局、双飞翼布局、flex布局

程序员文章站 2022-03-25 14:48:54
...

css布局

1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局（左右固定，中间流动布局）

产生原因：以前实现左中右必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。

如何实现：

  • 结构申明：声明一个容器.container，并同时声明.middle，.left，.right几个包含块。结构如下

    <div class="container">
  <div class="middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

  • 基本设置：设置容器的高度400px（可以自己设定），并设置.middle宽度为100%（充满一行），设置.left，.right宽度为200px（固定），效果如下

    css 圣杯布局、双飞翼布局、flex布局

    可以看到这个是布局达不到想要的效果（左右固定，中间流动），如何才能达到这样的效果。这个时候我们可以采用填充思想，就是我们先把位置流出来，然后将下面两块填充上去。留出的位置要正好能够放下下面的每一块（这个是没有边框的情况下，如果有边框，这需要考虑边框的占用宽度）

  • 腾出空间：我们把上面的一行往中间挤一点，让两边留出一点空间，分别放置左右元素，腾空间我们可以是使用容器的padding属性，让padding将中间部分挤窄一点，效果如下：

    .container{
  height:400px;
  padding:0 200px 0 200px;/*这里的左右padding分别为左右块的宽度（不考虑边框，这里没有边框以及其它属性，如果有，需要加上其它属性的值）*/
}

    css 圣杯布局、双飞翼布局、flex布局

  • 将下面两块放上去：如何放？这个时候我们可以使用负外边距，负的外边距可以使得元素超出父元素的内容区域（content区域），这里我们设置.left的左外边距为-100%，这个时候它会继续向左移动，由于现在它的左边是.middle的边界，浮动-100%是一行的距离，所以会跑到上一行的最左边（.middle里面的最左边，如果设置-120%，那么会继续向左，超出.middle）。同理设置右边的块左外边距为-200px，为它的宽度。效果如下：

    .left{
  width: 200px;
  height: 400px;
  float: left;
  background-color: #0c9;
  margin-left: -100%;
}
.right{
  width: 200px;
  height: 400px;
  float: left;
  background-color: #7cdec6;
  margin-left: -200px;
}

    css 圣杯布局、双飞翼布局、flex布局

  • 调整左右位置：现在就是通过调整左右块的位置，让其放到正确的位置上面，这里通过设置左右的定位position为relative，然后设置相对于左右定位多少，就能够移动到正确的位置上面了。比如对于左边的块，我们设置他相对于右边：right:200px，就能到达空白区域，右边的块设置它相对于左边left:200px，能到达正确的位置。效果如下：

    .left{
  position:relative;
  right:200px;
}
.right{
  position:relative;
  left:200px;
}

    css 圣杯布局、双飞翼布局、flex布局

圣杯布局的完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>圣杯布局</title>
  <style type="text/css">
  /*头部*/
    .header{
      height: 50px;
      width: 100%;
      background-color: gray;
    }

  /*容器，用来装圣杯布局的东西*/
    .container{
      height: 400px;
      padding: 0 200px 0 200px;
    }
  /*中间部分*/
    .container .middle{
      width: 100%;
      height: 400px;
      float: left;
      background-color: #5ed7f7;
    }
  /*左边部分*/
    .container .left{
      width: 200px;
      height: 400px;
      float: left;
      background-color: #0c9;
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
  /*右边部分*/
    .container .right{
      width: 200px;
      height: 400px;
      float: left;
      background-color: #7cdec6;
      margin-left: -200px;
      position: relative;
      left: 200px;
    }
  /*脚步*/
    .footer{
      height: 50px;
      width: 100%;
      background-color: gray;
      clear: both;/*清除浮动，让footer周围不出现浮动元素，防止footer跟着浮动元素一起浮动*/
    }
  </style>
</head>
<body>
  <div class="header"></div>
  <div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</body>
</html>

当然还可以通过双飞翼布局、flex布局实现同样的效果，这里就提一下。

HYY：正则表达式

正则表达式由两种基本字符构成：

  • 原义字符：如a、b、c等等

  • 元字符：\b、\t、\r、\v、、\cX、^、[]等等

    此外的* + ? $ ^ . | \ () {} [] 都是javaScript正则表达式中的特殊字符，需要注意。

对象属性

  • global：是否全文收索，默认为false，可以简写为g
  • ignorecase：是否大小写敏感，默认为false，可以简写为i
  • multiline：多行搜索，默认为false，可以简写为m
  • lastIndex：是当前表达式匹配内容的最后一个字符的下一个位置（也就是当前一轮匹配结束，下一轮的开始位置）

  • source：正则表达式的文本字符串

    [] 用来构建一个简单的类

表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类的字符。匹配a或者b或者c

^用来创建反向类/负向类

表达式[\^abc]表示匹配不是a或b或c的内容

[a-z]范围类

[a-zA-Z]表示a到z或者A-Z

js正则提供预定义类来匹配常见的字符类

字符 等价类 含义
. [^\r\n] 除了回车符和换行符之外的所有字符
\d [0-9] 数字字符
\D [^0-9] 非数字字符
\s [\t\n\x0B\f\r] 空白符
\S [^\t\n\x0B\f\r] 非空白符
\w [a-zA-Z_0-9] 单词字符（字母、数字、下划线）
\W [^a-zA-Z_0-9] 非单词字符

- 例如/ab\d./就表示匹配ab+一个数字+任意字符的一个字符串，不用预定义类就为/ab[0-9][^\r\t]

js正则提供几个常用的边界匹配字符

字符 含义
^ 以某个字符开始
$ 以某个字符结束
\b 单词边界
\B 非单词边界

- 例如要匹配“This is a dog”中的This中的is，而不是其它的is，就可以使用正则/\Bis\b/g来匹配
- 例如匹配一@作为开头的字符串，正则为/^@/gim（这里的g表示全局匹配，i表示忽略大小写，m表示多行匹配，例如字符串中有换行符的时候）
- 匹配一个@最为结尾的字符串，正则为/@$/gim

量词：正则表达式中，量词表示数量

js正则表达式提供的量词

字符 含义
? 出现零次或者一次（最多出现一次）
+ 出现一次或者多次（至少出现一次）
* 出现零次或者多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

- 例如/\d{2}/表示出现2次数字，/\d{0,10}/表示数字出现0次到10次
- /\d+/表示至少出现一次数字
- /\d*/表示出现0此或者多次数字

利用()进行分组

或|

正则表达式使用|表示或，就是走任意一个分支都可以例如yes|no那么走yes或no都可以

使用$反向引用

使用$表示捕获的分组内的内容，对应分组依次为\$1、\$2、\$3来表示

忽略分组

不希望捕获某些分组，只需要在分组内部加上? : 就可以了，例如：(?:Byron).(ok)分组Byron将会被忽略

前瞻与后顾

正则表达式从文本头部向尾部开始解析，文本尾部方向成为“前”

前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言，后顾（后瞻）方向相反

javaScript不支持后顾，符合和不符合特定断言称为肯定（正向）匹配和否定（负向）匹配

名称 正则 含义
正向前瞻 exp(?=assert) 检查符合exp正则以后，还要检查是否符合断言部分
负向前瞻 exp(?!assert) 匹配到正则之后，还要看看他前面的是不是不符合这个断言
正向后顾 exp(?<=assert) javaScript不支持
负向后顾 exp(? javaScript不支持

- “a2*3”.replace(/\w(?=\d)/g,”x”);结果为x2*3，匹配的是单词字符后面有数字的
- “a2*34vv”.replace(/\w(?!\d)/g,”x”);结果为ax*3xxx，匹配的是单词字符后面不是数字的

相关标签： 布局

上一篇： 高斯混合模型与EM算法图文详解

下一篇： C++11如何实现无锁队列

推荐阅读