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

最新推荐文章于 2023-10-08 16:29:47 发布

swallow_杨

最新推荐文章于 2023-10-08 16:29:47 发布

阅读量722

点赞数 1

分类专栏： css 文章标签：布局

本文链接：https://blog.csdn.net/swallow_y/article/details/81324464

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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（固定），效果如下

可以看到这个是布局达不到想要的效果（左右固定，中间流动），如何才能达到这样的效果。这个时候我们可以采用填充思想，就是我们先把位置流出来，然后将下面两块填充上去。留出的位置要正好能够放下下面的每一块（这个是没有边框的情况下，如果有边框，这需要考虑边框的占用宽度）
腾出空间：我们把上面的一行往中间挤一点，让两边留出一点空间，分别放置左右元素，腾空间我们可以是使用容器的padding属性，让padding将中间部分挤窄一点，效果如下：
```
.container{
  height:400px;
  padding:0 200px 0 200px;/*这里的左右padding分别为左右块的宽度（不考虑边框，这里没有边框以及其它属性，如果有，需要加上其它属性的值）*/
}
```
将下面两块放上去：如何放？这个时候我们可以使用负外边距，负的外边距可以使得元素超出父元素的内容区域（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;
}
```
调整左右位置：现在就是通过调整左右块的位置，让其放到正确的位置上面，这里通过设置左右的定位position为relative，然后设置相对于左右定位多少，就能够移动到正确的位置上面了。比如对于左边的块，我们设置他相对于右边：right:200px，就能到达空白区域，右边的块设置它相对于左边left:200px，能到达正确的位置。效果如下：
```
.left{
  position:relative;
  right:200px;
}
.right{
  position:relative;
  left:200px;
}
```

圣杯布局的完整代码：

<!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，匹配的是单词字符后面不是数字的

swallow_杨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css 圣杯布局、双飞翼布局、flex布局

css布局1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局（左右固定，中间流动布局）产生原因：以前实现左中右必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。如何实现：结构申明：声明一个容器.container，并同时声明.middle，...
复制链接

扫一扫

专栏目录