css总结6

最新推荐文章于 2024-10-10 19:30:00 发布

pipasound

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量179

点赞数 2

分类专栏： html+css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_61109509/article/details/121191657

版权

html+css 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

本文详细讲解了如何在实际开发中运用Flexbox进行单行或多行布局，包括flex属性、align-items、align-content和flex-flow的使用。此外，还介绍了CSS Grid布局的基本概念和应用技巧。

摘要由CSDN通过智能技术生成

一，知识回顾

1，实际开发中，我们不会用链接a，而是用链接（li+a）做法

2，导航栏

让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
导航栏可以不给宽度，将来继续添加文字
因为导航栏里的文字不一样多，可以给a添加padding撑开盒子

3，行内块元素中间有默认空隙，若是超过了指定盒子，可以浮动

4,ul和li都要加浮动，ul不加会顶上去

5，若父盒子里多个子盒子的文字要居中，直接给父盒子加line-height,行高会继承

6，<ul>

<lli><a href=" "> 内容</a></li>

<ul>

默认高度和父级一样宽，但是添加浮动后宽度由内容大小决定。若li浮动，a也会浮动，属于行内块元素

二，flex(给父级添加flex属性)

display: flex;

flex-direction:默认主轴方向（向右）

flex-direction: column;从上到下

7， justify-content：；设置主轴子元素排列

（属性按照主轴排列）

8，flex-wrap: ;设置子元素是否换行

nowrap 默认值不换行

wrap: 换行

9，align-items设置侧轴子元素居中（单行）

若想垂直居中

主轴居中，侧轴居中(若主轴是x轴，则横着居中；若主轴是y轴则竖着居中)

justify-content：center;

align-items: center;

stretch是默认值，注意用的时候不用给子盒子设置高度

10，align-content: ;设置子轴在侧轴上的排列方式，并且只能适用于子项出现换行的情况（多行）

，在单行下没有效果

总结：单行找align-items,多行找align-content

11，flex-flow复合属性，同时设置主轴和换行

flex-flow: row wrap;

三，flex(布局子项常见属性)

12,flex属性定义子项目分配剩余空间，用flex表示占多少份

语法：

.item{

flex: (number);

}

<style>

p{

display: flex;

width: 60px;

height: 150px;

background-color: pink;

margin: 100px auto;

}

p span {

flex: 1; /* 每个span都占一份，即将p平分成三份*/

}

</style>

<body>



1

2

3

4



</body>

<style>

p{

display: flex;

width: 60px;

height: 150px;

background-color: pink;

margin: 100px auto;

}

/*若想中间span占两份，用nth-child（第几个）*/

p span {

flex: 1;

}

p span:nth-child(2){

flex: 2;

}

</style>

<body>



1

2

3

4



</body>

13，align-self控制子项在侧轴上的排列方式，允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

p {

display: flex;

width: 80%;

height: 150px;

background-color: pink;

margin: 100px auto;

}

p span {

width: 150px;

height: 100px;

margin-right: 5px;

background-color: #fff;

}

p span:nth-child(2) {

align-self: flex-end; /*第二个盒子单独掉下来*/

}

</style>

<body>



1

2

3

4



</body>