第三周CSS知识总结

居中方式

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。

一、水平居中

1、行内元素居中

顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。

.div1{
text-align:center;
}

2、块状元素居中

（1）、定宽块状元素居中

满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。

.div1{
　　　　 width:200px;
　　　　 border:1px solid red;
margin:0 auto;
}

（2）、不定宽块状元素居中

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

有三种方法可以对不定宽块状元素进行居中：

方法1：

将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右margin”值为“auto”来实现居中； 或使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中。后面的display:table; 方法会更简洁。

为什么加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

如下例子：

table{
margin:0 auto;
}

Hello world Hello world

.wrap{
background:#ccc;
display:table;
margin:0 auto;
}

方法2：

改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值（变成inline-block就可以设置宽高）。

.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline; //怎么这一句用不用都是一样效果的？
}

• Hello world
• Hello world

方法3：

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}

先设置父元素wrap清除浮动，然后左浮动。定位让wrap向右偏移50%。然后定义子元素相对于父元素向左偏移50%。脱离父元素。加个边框就可以明白一些了。另外用绝对定位也是可以的。

二、垂直居中

垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。

1、父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的 基线间的距离 )。

.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}

2、父元素高度确定的多行文本

有两种方法：

方法1：

使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

.wrap{
height:300px;
background:#ccc;
vertical-align:middle; /* td 标签默认情况下就默认设置了 vertical-align 为 middle，可以不需要显式地设置 */
}

Hello world Hello world Hello world

.wrap{
background:#ccc;
display:table;
vertical-align:middle;
}

方法2：

设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性。但这种方法兼容性比较差， IE6、7 并不支持这个样式。

.wrap{
height:300px;
background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

display：flex属性

详见：display：flex属性

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex的六个属性
flex-direction 容器内元素的排列方向(默认横向排列)
flex-direction:row; 沿水平主轴让元素从左向右排列
在这里插入图片描述
flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
在这里插入图片描述

flex-direction:row-reverse;沿水平主轴让元素从右向左排列
![](2020-12-04-00-26-30.png

flex-wrap 容器内元素的换行(默认不换行)
flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
justify-content 元素在主轴（页面）上的排列
justify-content : center;元素在主轴（页面）上居中排列

justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
在这里插入图片描述

justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
在这里插入图片描述

justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
在这里插入图片描述

：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。
在这里插入图片描述

align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
在这里插入图片描述

align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）
在这里插入图片描述

align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
在这里插入图片描述

align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）

align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
在这里插入图片描述

align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。

align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。

留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。

更多的选择器

更多伪类选择器

1. first-child
   选择第一个子元素

2. first-of-type
   选中子元素中第一个指定类型的元素

3. last-child

4. nth-child
   选中指定的第几个元素
   a:nth-child(5)
   even:关键字，等同于2n
   odd：关键字，等同于2n+1

5. nth-of-type
   选中指定的子元素中第几个某类型的元素

更多的伪元素选择器

1. first-letter
   选中元素中的第一个字母
2. first-line
   选中元素中第一行的文字
3. selection
   选中被用户框选的文字

display：table属性

有的项目中又需要类似表格的布局怎么办呢？可以用display:table来解决

display:table系列几乎是和table系的元素相对应的，请看下表：

table （类似table）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table （类似 table）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group （类似 tbody）此元素会作为一个或多个行的分组来显示。
table-header-group （类似 thead）此元素会作为一个或多个行的分组来显示。
table-footer-group （类似 tfoot）此元素会作为一个或多个行的分组来显示。
table-row （类似 tr）此元素会作为一个表格行显示。
table-column-group （类似 colgroup）此元素会作为一个或多个列的分组来显示。
table-column （类似 col）此元素会作为一个单元格列显示。
table-cell （类似 td 和 th）此元素会作为一个表格单元格显示。
table-caption （类似 caption）此元素会作为一个表格标题显示。
目前display:table的应用场景也是比较广泛的，Google地图在搜索路线时，左侧的路线详情就是用的display:table来实现的。
2.让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果

table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

举个例子，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。