微信小程序开发学习总结(三) CSS样式

一.CSS三种样式表。

在HTML中引入CSS共有三种方式：
行内样式就是把样式写在HTML元素里面，用style属性声明样式。

1.1行内样式表(内联样式)。

<text style="color:red;background-color:blue">hello world</text>

1.2内部样式表。

内部样式就是把CSS代码写在HTML文件里面，不同于行内样式，它是把CSS代码集中写在HTML文件的头部，就是<head></head>标签里面，用<style></style>标签注明。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #p1{
            font-family:黑体;/*字体类型为黑体*/
            font-size:13px;/*文字大小为12像素*/
            font-weight:bold;/*文字加粗*/
            font-style:normal;/*文字正常，不设置斜体*/
            color:red;/*文字颜色为红色*/
        }
        #p2{
            font-family:微软雅黑;/*字体类型为微软雅黑*/
            font-size:19px;/*文字大小为16像素*/
            font-weight:normal;/*文字正常，不加粗*/
            font-style:italic;/*文字设置为斜体*/
            color:#1000FF;/*文字颜色取值用16进制RGB表示*/
        }
    </style>
</head>
<body>
    <div><!--CSS样式统一写在头部标签里面-->
        <p id="p1">hello</p>
        <p id="p2">hello</p>
    </div>
</body>
</html>

1.3外部样式表(常用)。

在实际开发当中，一般使用外部样式，就是把HTML和CSS分别写在不同的文件里，然后在HTML中用link标签来引用。这种方式能提高网站的性能，并且能方便网站的维护。
.wxml文件

//写在head标签中引入css文件，href属性中的为绝对路径，当前在同一级目录下
<head>
      <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
      <div class="outter">
          <div class="inner"></div >
      </div >
</body>

.wxss文件

.outter{
  
    padding: 20px;
    background-color: #2980B9;/*深蓝色*/
}
.inner{

    margin-top: 50px;
    width: 50px;
    margin: 50px;
    height: 50px;
    background-color: blueviolet
}

二.css选择器。

1.1 常用css选择器。

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件

例如:
.wxml

<text>hello</text>
<view id="idStyle"></view>
<view class="classStyle"></view>

.wxss

/* 类选择器 */
.classStyle{
  
    padding: 20px;
    background-color: #2980B9;/*深蓝色*/
}
/* id选择器 */
#idStyle{
    margin-top: 50px;
    width: 50px;
    margin: 50px;
    height: 50px;
    background-color: blueviolet
}
/* 元素选择器 */
text{
    color:red;
    background-color:blue
}

1.2 样式选择器的优先级。

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

三.盒子模型。

3.1盒子模型。

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

3.2文档流。

文档流，又称为普通流或者常规流。
在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流。

四.块元素和行内元素。

HTML的大多数元素都是块级(block)元素或行内(inline)元素

4.1块级元素

定义:
正常流时，每个块级元素默认占一行高度，一行内添加一个块级元素后一般无法添加其他元素，元素样式的display:block都是块级元素。
特点：
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
示例
div、h1（大标题）、 p（段落）、hr、table

4.2行内元素

定义:
行内元素不会另起一行,只占据它对应的标签的边框所包含内容的空间,元素样式的display : inline的都是行内元素。
特点:
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
示例:
a、 span、iframe、br（换行）、em（强调）、img（图片）、input、label、select 、textarea（多行文本输入框）

4.3display属性,块级/行内元素转换。

display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block或 inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

块级元素	行内元素
独占一行,默认情况下，其宽度自动填满其父元素宽度	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性	行内元素设置width，height属性无效
可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block	对应于display:inline；

display:block; 转化为块状元素；一个块状元素独占一行；可设宽、高、行高、顶和底边距离；宽默认为父元素的100%；

display:inline;转化为行内元素；和其他元素共处一行；不可设宽、高、行高、顶和底边距离；宽即所包含的文字图片之宽；

display:inline-block:可用{display:inline-block;}转化为内联块状元素；和其他元素共处一行；可设宽、高、行高、顶和底边距离；

五.position定位。

文档普通流:就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。
css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。

5.1 position。

属性	描述
absolute	生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。；
relative	生成相对定位的元素，相对于其所在普通的文档流位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。；
static	默认值，没有定位，元素出现在正常的文档流中;
fixed	老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；
sticky	(CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

5.1.1相对定位

position: relative

元素相对于它自己原来的位置进行移动。

注意，相对定位使元素仍然占据原来的位置。

如果将div2设置为相对定位，它会相对自己原来的位置移动，且会发现它原来的位置仍然占据着,不会被别的标签占据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
    </style>

</head>
<body>
<body>
<div style="background-color: chartreuse">1</div>
<div style="background-color: darkblue;position: relative;top: 20px;left: 20px">2</div>
<div style="background-color: red">3</div>
</body>
</body>
</html>

5.1.2 绝对定位。

position: absolute

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

如果将div2设置为绝对定位，会发现它会相对于HTML定位，因为没有已经定位的祖先元素，且原来的位置被div3补上了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
    </style>

</head>
<body>
<body>
<div style="background-color: chartreuse">1</div>
<div style="background-color: darkblue;position: absolute;top: 20px;left: 20px">2</div>
<div style="background-color: red">3</div>
</body>
</body>
</html>

六浮动。

6.1 浮动基础

 float: left;

定义:
浮动,float，浮动的元素可以向左或向右移动，直到它的外边缘碰到包含的元素边框或另一个浮动元素的边框为止。
注意:
浮动会脱离标准文档流，所以文档的普通流的其他元素表现得就像浮动元素不存在一样。
例子1:

解释:当框1向右浮动的时候,他会脱离文档流向右移动,直到他的右边缘碰到包含框的右边缘。
例子2:

解释:当框1向左浮动时,他脱离文档流并且向左移动,知道他的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以他不占据空间,框2就会替代框1的位置,而由于框1浮在上方就会将框2覆盖住,使框2从视图中消失。
例子3

解释:如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其他的浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其他元素"卡住"。

6.2 float实现文字环绕。

<div>
    <img style="background-color: chartreuse; width: 100px;height: 100px;float: left"/>
    <p>时光的单车飞快驶去，岁月的倒影也将消失，白天与黑夜不停的交替，轮回的四季斑驳了谁的岁月，
        蹉跎了谁的年华。一个人静静地与岁月交错，于平淡之中细细体会生活的深意，去注视，去聆听，
        去感受那些带着希望的别离以及那些经受沧桑的相逢，不论时光如何飞转，那些落花一样的往事，
        依然鲜活地存在于我的脑海之中。当岁月和美丽的回忆已成为风中的叹息，我们伤感的眼里也许依
        然残存旧时的泪痕，模糊了视线，不敢轻易触碰。</p>
</div>

6.3 清除浮动。

为何要清除浮动?
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
例如:
创建给父容器设置边框和背景色。

<div style="border-style: outset;width: 400px;background-color: darkorange" >
    <div style="width: 200px;height: 200px;background-color: red">big</div>
    <div style="width: 100px;height: 100px;background-color: chartreuse">small</div>
</div>

正常情况

将子控件设置为浮动

<div style="border-style: outset;width: 400px;background-color: darkorange" >
    <div style="width: 200px;height: 200px;background-color: red;float: left">big</div>
    <div style="width: 100px;height: 100px;background-color: chartreuse;float: left">small</div>
</div>

父控件高度塌陷

当父元素不给高度的时候，内部元素不浮动时会撑开而浮动的时候，父元素变成一条线。

6.3.1解决方式:

方式一:给父级元素设置高度，但一般写页面高度都是不固定的。

   #father {
            height: 300px;
        }

方式二:给父级元素设置overflow:hidden或overflow:auto,zoom:1是为了浏览器的兼容性（IE大家都懂的），这种方法要注意溢出的元素。

#father{
    overflow:hidden;
    zoom:1;
}

方式三:给父级设置浮动，这种方法适用于本来父级就需要浮动的，如果父级不需要浮动，影响布局，还是没解决根本问题。

#father{
    float:left;
}

方式四:使用before和after双伪元素清除浮动（推荐）
这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原理就是通过伪元素选择器，在div后面添加了一个clear:both的属性，跟第三种方法是一样的道理。

 .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix { /*照顾ie6*/
            zoom: 1;
            border-style: outset;
            width: 400px;
            background-color: darkorange;

        }

<div class="clearfix">
    <div style="width: 200px;height: 200px;background-color: red;float: left;">big</div>
    <div style="width: 100px;height: 100px;background-color: chartreuse;float: left;">small</div>
</div>

七弹性布局flex。

7.1 基础使用。

网页布局在flex出来之前，是由盒模型为底子，float，position，table，百分比来进行布局的，重绘的比较多，影响性能，复杂又不好维护。flex布局，可以简便、完整、响应式地实现各种页面布局。
概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。（任何一个容器都可以指定为Flex布局，块级元素，行内元素也可。）
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

主轴和交叉轴
主轴和交叉轴取决于flex-direction的取值.如果flex-direction=raw那么水平方向上面的轴是主轴,垂直方向上面的轴是交叉轴。如果flex-direction=column那么垂直方向上面的轴是主轴,水平方向的轴是交叉轴。
justify-content:用于主轴上的子元素的对齐方式。
align-items:用于交叉轴上的子元素的对齐方式。
注意
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

display: flex; 将对象作为弹性伸缩盒展示，用于块级元素
display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素

例子:

<div class="box"> <!--容器-->
  <div class="item">1</div> <!--子项-->
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.box {
  width: 200px;
  height: 200px;
  background-color: #58a;
}
.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  background-color: #fb3;
}

7.2 Flex 作用于Box容器上的属性。

7.2.1. flex-direction

定义:
用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
取值:
row , row-reverse , column , column-reverse
代码:

box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            flex-direction: column-reverse;
            border: 5px solid red;
        }

1. row：
默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴

2. row-reverse：
与row相反,主轴为水平方向，起点在容器的右端。

3. column：
表示垂直方向从上到下排列，此时垂直方向轴线为主轴

4. column-reverse：
与column相反,主轴为垂直方向，起点在容器的下沿。

7.2.2. flex-wrap

定义:
用于指定Flex子项是否换行。
取值:
nowrap , wrap , wrap-reverse
代码:

 .box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            flex-wrap: wrap;
            border: 5px solid red;
        }

1. nowrap
默认值，表示不换行，Flex子项平均分配。(不换行，在一行显示，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示)

2. wrap
表示换行，溢出的Flex子项会被放到下一行。(解决间距的方式就是将Flex子项的父项目的高度设置为两行的高度)

3. wrap-reverse
表示反方向换行(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)

7.2.3. justify-content

定义:
用于指定主轴(水平方向)上Flex子项的对齐方式
取值
flex-start , flex-end , center , space-between , space-around
代码:

 .box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            justify-content:flex-start;
            border: 5px solid red;
        }

1. flex-start
start侧对齐，左对齐

2. flex-end
end侧对齐，右对齐

3. center
中心对齐

4. space-between
左边的靠左对齐,右边的靠右对齐,中间的等距排列。(两端对齐)

5. space-around
对于flex的子元素他们每侧的距离均相等(等距分布)
1和2之间的距离包含了1的下边距和2的上边距。

7.2.4.align-items

定义
用于指定交叉轴(又叫侧轴指的是垂直方向)上Flex子项的对齐方式
取值
stretch , flex-start , flex-end , center , baseline
代码

.box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            align-items:flex-start;
            border: 5px solid red;
        }

1. stretch
默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度

2. flex-start
表示与侧轴开始位置对齐

3. flex-end
表示与侧轴的结束位置对齐

4. center
表示与侧轴中间对齐

5. baseline
表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start。

7.2.5.align-content

定义:
该属性只作用于多行的情况下，用于多行的对齐方式
取值:
stretch , flex-start , flex-end , center , space-between , space-around

.box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            align-content:flex-start;
            border: 5px solid red;
        }

1. stretch
默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。
2. flex-start
表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行
flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行
3. flex-start
表示各行与侧轴中间对其
4. space-between
表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start
space-around：表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于center
再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。

7.3 Flex 作用于子项上的6个属性介绍

7.3.1 order

该属性用来指定Flex子项的排列顺序，数值越小，越靠前，可以为负数

取值：数值，默认值为0

7.3.2 flex-grow

用来指定Flex子项的扩展比例，不可以为负数，Flex容器会根据Flex子项设置的扩展比例作为比率来分配剩余空间

取值：数值，默认值为0，表示即使存在剩余空间，Flex子项也不会扩展

7.3.3 flex-shrink

用来指定Flex子项的收缩比例，不可以为负数，Flex容器会根据Flex子项设置的收缩比例作为比率来收缩各个Flex子项

取值：数值，默认值为1，表示所有子项在剩余空间为负数时，等比例收缩

注意：flex-shrink只能在不换行的情况下使用

7.3.4 flex-basis

用来指定Flex子项的占据的空间，不可以为负数

取值：auto | length | percentage | content

auto：默认值，计算规则：检索Flex子项是否设置了width值（或者height值，取决于flex-direction），如果设置了非auto的值，则使用width值（或者height值），若没有则使用content
length：用长度值定义宽度，不可为负数
percentage：使用百分比定义宽度，不可为负数

容器宽度为200px，Item1原始宽度为50px，设置 flex-basis: 50%;后宽度变成100px，扩展后宽度为110.5px；而Item2原始宽度为50px，扩展后为81.5px，比例正好是1:3

参考文献:
Flex 布局教程：语法篇
 # CSS Flex布局属性整理

最后编辑于：2021.01.09 11:18:27

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,793评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,567评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,342评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,825评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,814评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,680评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,033评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,687评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,175评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,668评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,775评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,419评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,020评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,206评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,092评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,510评论 2赞 343