CSS align-content 属性

例

对齐弹性盒的 <div> 元素的各项：

div

{

display: flex;

flex-flow: row wrap;

align-content:space-around;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-content	21.0	11.0	28.0	9.07.0 -webkit-	12.1

定义和用法

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

默认值：	stretch
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignContent="center"尝试一下

CSS 语法

默认值

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

ext-align是什么

前端CSS的text-align是用于设置文本对齐方式，它具有一下几个属性：left、center、right、justify。

展示案例

其中left、center、right属性顾名思义，设置文本向左边对齐、居中对齐、向右边对齐。

重点介绍justify属性

text-align:justify可以实现文本两端对齐。首先展示问题部分：

在图片中我们可以发现，因为文字大小的关系无法满足满行左右对齐，因此很不美观。我们使用text-align:justify可以保证除了最后一行外的文字两端对齐（简单来说单独一行是没有效果的）。

应用场景

如上图我所展示案例的DIV内的文字两端对齐（一般用在案例或者详情简介等小区域内的文字美规而是用）。

able表格一种早期十分流行的网页布局方式,现在基本都是div+css的布局方式,表格一般由tr(行)td(列)标签组成

表格的常用属性:1)border:表示表格边框线2)cellpadding:单元格内容和内边框之间的距离3)cellspacing:表示单元格之间的间距4)bgcolor:背景颜色5)width:宽度6)height:高度等等

表格

没有设置表格width与height属性,表格宽高暂时由单元格的内容的宽高决定,其他暂不考虑

想要消除单元格间距与内容与单元格内边框的间距设置属性cellspacing,cellpadding为"0"

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1px" cellspacing="0" cellpadding="10">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td>C#</td>
            <td>Asp.net</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>JavaScript</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

tr常用属性

align:单元格内容的水平对齐方式,属性值:1)left2左侧)right右侧3)center中间

valign:单元格内容的垂直对齐方式,属性值1)top上边2)bottom下边3)middle中间

rowspan与colspan:将单元格进行行与行或者列与列的合并

这些属性以后都会写在css样式表中;制作显示一个对齐方式与行或列的合并的表格

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
        <tr>
            <td colspan="3" align="center">课程表</td><!--合并三行-->
        </tr>
        <tr align="center"><!--单元格内容居中显示-->
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
        </tr>
        <tr align="center">
            <td>HTML</td>
            <td rowspan="2">.NET</td><!--合并两列-->
            <td>JavaScript</td>
        </tr>
        <tr align="center">
            <td>CSS</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

显示效果

表格中设置的属性虽然会继承,但是子标签单独设置了属性,就会覆盖父标签的属性;比如tr

设置align="center",此tr中的子标签td单独设置了align="left",最终效果是此td内容居左显示

在线咨询

上一篇： JavaScript选择排序
下一篇：这里有一份HTML的超全教程，自学建网站不再是梦

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。