CSS学习总结

一、Flex-弹性盒布局

弹性盒定义了子元素如何在弹性盒中布局。

弹性盒常用属性

1. flex-direction ，设置主轴，定义了子元素在弹性盒中的位置

• row，设置主轴为从左到右，默认值。

• row-reverse，设置主轴为从右向左。

• column，设置主轴为从上到下。

• column-reverse，设置主轴从下往上纵向排列，最后一项在最上面。

2. justify-content，子元素在主轴上的对齐方式。

• flex-start，子元素在行头紧挨着填充，默认值。

• flex-end，子元素在行尾紧挨着填充。

• center，子元素居中紧挨着填充。

• space-between，两边对齐，剩下的子元素间隔相同的平分。

• space-around，子元素平分，子元素的左右两边有同样的间距。

3. align-items，子元素在交叉轴上的对齐方式。

• flex-start，子元素紧靠交叉轴轴的起始边界。

• flex-end，子元素紧靠交叉轴轴的结束边界。

• center，子元素在交叉轴上居中放置，如果超出则会两个方向都溢出相同长度。

• baseline，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

• stretch，拉伸，如果大小为auto，则会拉伸成纵轴大小；如果大小有限制，则会遵守大小限制；此为默认值。

4. flex-wrap，子元素的换行方式。

• nowrap，默认值，单行，太长会溢出。

• wrap，多行，到边界会换行。

• wrap-reverse，多行反转排布。

5. align-content，设置各行的对齐方式。

• stretch，默认值，各行会伸展，以占用剩余空间。

• flex-start，各行向弹性盒的起始位置堆叠。

• flex-end，各行向弹性盒的结束位置堆叠。

• center，各行向中间位置堆叠。

• space-between，各行在弹性盒中平均分布。

• space-around，各行在弹性盒中平均分布，两端保留子元素与子元素之间间距大小的一半。

6. align-self，用于设置子元素自身的，在交叉轴上的对齐方式，会覆盖容器的align-items属性。

• auto，会设置为父元素的align-items属性，如果没有父元素，则会为stretch。

• flex-start，该子元素会紧靠交叉轴轴起始位置。

• flex-end，该子元素会紧靠交叉轴轴的结束位置。

• center，该子元素会在交叉轴居中位置。

• baseline，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

• stretch，如果大小为auto，则该子元素的大小就是交叉轴的尺寸大小，但会遵守min/max-width/height的限制。

7. flex，设置子元素如何分配空间

• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值是0 1 auto。

• flex-grow，相对于其他子元素的放大量，0代表最小长度，其他数字代表相对长度，值越大代表放大的越大，默认值为0。

• flex-shrink，相对于其他子元素的缩小量，值越大就代表收缩的越多，默认值为1。

• flex-basis，子元素的初始长度，合法值：auto、number、百分比，长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定，默认值为auto。

• auto，就是1，1，auto;

• none，就是0，0，auto;

• inherit，就是从父元素继承该属性。

需要注意的是，flex可以进行简写：

• 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

• 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

• 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

• 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}

二、CSS选择器

1. 点代表类选择器

为class="hometown"的所有p标签设定样式
p.hometown{ 
    background-color:yellow;
}

2. 空格代表后代选择器

空格代表后代选择器

h1 em {color:red;}

作为h1元素后代的任何em元素的颜色为红色色。

3. #代表ID选择器

ID选择器名称必须是唯一的

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

4. []代表属性选择器

给带有href和title属性的a标签设置颜色为红色
a[href][title] {color:red;}

给class为important warning的p标签设置颜色为红色
p[class="important warning"] {color: red;}

给class属性中包含important的p标签设置颜色为红色
p[class~="important"] {color: red;}

把class="sidebar"的div中的
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

5. ：>代表子元素选择器

h1 > strong {color:red;}

h1标签之后紧跟strong标签的会变红
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

h1标签嵌套子标签再嵌套strong标签的不会变红
<h1>This is <em>really <strong>very</strong></em> important.</h1>

6. ：+代表兄弟元素选择器

用一个+结合符只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold;}

<div>
  <ul>
    <li>List item 1 此行 不会 加粗</li>
    <li>List item 2 此行会加粗</li>
    <li>List item 3 此行会加粗</li>
  </ul>
  <ol>
    <li>List item 1 此行 不会 加粗</li>
    <li>List item 2 此行会加粗</li>
    <li>List item 3 此行会加粗</li>
  </ol>
</div>

7. 冒号 : 代表伪类和伪元素

• p:first-child，:first-child代表第一次出现的某标签，而不是某标签之后的第一个元素！切记！切记！切记！！！！

例子1：

将第一次出现的p标签的字体设置为红色
p:first-child {
  color: red;
} 
<p>some text 此处字体会变红</p>
<p>some text 此处字体不会变红！！！</p>

例子2：

将p标签的第一个子标签i的字体加粗
p > i:first-child {
  font-weight:bold;
} 
<p>some <i>text 此处会被加粗</i>. some <i>text 此处不会被加粗</i>.</p>
<p>some <i>text 此处会被加粗</i>. some <i>text 此处不会被加粗</i>.</p>

例子3:

将 第一个p标签的后代i标签 的颜色变成蓝色
p:first-child i {
  color:blue;
} 

<p>some <i>text 此处会变蓝</i>. some <i>text 此处会变蓝</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>

只有上述两处会变蓝色，其他地方不会变，

• :first-line 伪元素用于向文本的首行设置特殊样式。

• :first-letter 伪元素用于向文本的首字母设置特殊样式。

• :before 伪元素可以在元素的内容前面插入新内容。

在h1标签之前插入图片
h1:before{
  content:url(logo.gif);
}
会在这里插入一张图片
<h1>This is a heading</h1>

• :after 伪元素可以在元素的内容之后插入新内容。

三、常用的CSS

1. position

• static，默认值，没有定位

• absolute，相对于父元素进行绝对定位，通过left、right、top、bottom属性来调整；absolute不会占用空间，下一个元素可能会跟它重叠。

注意：absolute是相对于 static 定位以外的第一个父元素进行定位，可以理解为相对于第一个relative定位的元素进行定位。

h2.pos_abs{
    position:absolute;
    left:100px;
    top:150px
}

• relative，相对于正常位置进行定位，通过left、right、top、bottom属性来调整。relative会占用空间。

<head>
    <style type="text/css">
      h2.pos_left{
          position:relative;
          left:-20px
    }
    h2.pos_right{
        position:relative;
        left:20px
    }
   </style>
</head>
<body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
</body>

• fixed，相对与浏览器窗口定位，通过left、right、top、bottom属性来调整。

2. display

• none，此元素不会显示

• block，块元素，元素前后会带有换行符

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

3. block元素可以设置margin和padding属性。

• inline，默认值，内联元素，前后没有换行符，也就是默认不会换行

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

2. inline元素设置width,height属性无效。

3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

• inline-block，行内块元素

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

3. margin，外边距，可以有1到4个值

• margin:10px 5px 15px 20px; 指距离上边10px，右边5px，下边15px，左边20px，记住4个值时的顺序是上右下左，顺时针方向。

• margin:10px 5px 15px; 指距离上边10px，左右均为5px，下方15px，记住3个值时的顺序是上、左右、下。

• margin:10px 5px; 指距离上下均为10px，左右均为5px。

• margin:10px; 指距离四个边都是10px。

• auto，浏览器计算外边距。

4. box-sizing，指内边距和边框与宽度、高度的关系

• content-box，默认值，在宽度和高度之外，绘制元素的内边距和边框。

• border-box，为元素指定的任何内边距和边框都在已设定的宽度和高度内绘制。

5. word-wrap，有时候会遇到英文或者url链接不换行的情况，需要使用此属性使之换行

• normal，默认值，只在允许的断字点换行（浏览器保持默认处理）。

• break-word，允许长单词或 URL 地址换行到下一行。

6. overflow，规定了内容溢出时，如何处理

• visible，默认值，内容不会被裁切，会呈现在元素之外。

• hidden，超出的部分会被裁剪。

• scroll，超出的部分会被裁剪，但是会以滚动条的形式查看剩余部分。

• auto，如果内容被裁剪，则剩余部分会以滚动条的形式查看。

• inherit，从父元素继承overflow属性的值。

7. box-shadow，为边框增加阴影

• 语法：box-shadow: h-shadow v-shadow blur spread color inset;

• 两个必填值：h-shadow-代表水平阴影位置，v-shadow-代表垂直阴影位置。

• 四个可选值：blur-模糊距离，spread-阴影的尺寸，color-阴影的颜色，inset/outset-内部阴影/外部阴影。

• 例如：box-shadow: 3rpx 3rpx 10rpx rgba(0,0,0,0.2);

四、易混淆的知识

1. 标准文档流，就是默认的排列规则

块级元素，小程序中很多组件默认就是块级元素（display:block）

• 默认为块级元素有：小程序：<view>、；网页：<p>、<div>、<h1>、<li>、

• 块级元素总是从新行开始

• 块级元素的宽度默认是父元素的宽度
  块级元素的宽度 = width + marginLeft + marginRight + paddingLeft + paddingRight

• 块级元素高度默认是由子元素决定，默认随子元素的变化而变化，也可以自己设置高度。

• 块级元素的宽度、高度、内边距、外边距都可以控制。

行内元素，小程序中很多组件默认就是行内元素（display:inline）

• 默认为行内元素有：小程序：<text>、<image>、；网页：<img>、<a>、<em>

• 行内元素总是和其他非块级元素在一行上，一行满了会换行

• 行内元素的高度、宽度、上下外边距、上下内边距均无效，只有左右外边距和左右内边距可以生效。

• 行内元素的宽度和高度均随着内容变化而变化，不能设置。

• 一般情况下，行内元素中只能放行内元素，不能放块元素。

总结：

（1）块级元素的宽度默认是父元素宽度，而行内元素的宽度一定是子内容的宽度。

（2）块级元素的高度默认是子元素高度，而行内元素的高度一定是子元素的高度。

（3）块级元素的内外边距均可以设置，而行内元素只有左右的外边距内边距可以设置。

（4）块级元素总是从新行开始，而行内元素总是和非块级元素在一行上。

（5）块级元素内部可以包含块级和行内元素，而行内元素内部只能包含行内元素。

2. 盒子模型