蓝旭工作室第二周前端培训
一、CSS伪类与伪元素①伪类
伪类是选择器的一种，它用于选择处于特定状态的元素
1.:first-child和:last-child
:first-child=>选择一组兄弟元素中的第一个元素
:last-child=> 选择一组兄弟元素中的末了一个元素
<article>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
</article>
.content:first-child{
background-color:blue;
}
.content:last-child{
background-child:white;
} 2.:first-of-type和:last-of-type
:first-of-type选择一组兄弟元素中指定类型的第一个元素
:last-of-type选择一组兄弟元素中指定类型的末了一个元素
如下代码会选择第一个和末了一个引用.content的元素
.content:first-of-type{
background-color:blue;
}
.content:last-of-type{
background-color:blue;
} 注 :first-of-type和:first-child的区别：
[*] :first-child匹配该元素的所有兄弟元素的第一个。不管该元素是什么类型，再判断类型是否可以正确匹配。
[*] :first-of-type先按类型匹配，选择指定类型的第一个元素
3.:not
用于选择不符合特定类型的元素
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lanxu.css">
</head>
<body>
<article>
<p class="content not-cont">我的字体不变</p>
<P class="content">将我的字体改变</P>
<p class="content">将我的字体改变</p>
<p class="content not-cont">我的字体不变</p>
</article>
</body>
</html> CSS代码：
.content:not(.not-cont){
font-weight: bold;
} 效果如下:
https://i-blog.csdnimg.cn/blog_migrate/46bd96081f5888f70e20a8e9aefe6e0e.pnghttps://i-blog.csdnimg.cn/direct/ce267c49558a4989835cf7de326e5b3b.gif编辑
4.:nth-child和:nth-last-child
:nth-child 按照从前向后的顺序匹配 :nth-last-child 按照从后向前的顺序匹配
[*] :nth-child(an+b)起首会找到当前元素的兄弟元素，然后按照位置的先后顺序从1开始排序，选择的效果为第an+b个元素的集合（n=1,2,3……）
[*] :nth-child(-n+b)选择前b+1个元素
[*] :nth-child(odd|even)选择当前元素的所有奇数个或偶数个兄弟元素，相当于参数值取2n+1和2n
https://i-blog.csdnimg.cn/blog_migrate/f4e8d32a9c28c680fbf4e36bca727bd9.jpeg
5.用户行为伪类
用户举行选择，鼠标悬停等操作时，用户行为伪类可以选择处于某种状态下的元素
eg：可以用hover选择鼠标悬停状态下的元素，将其配景设置为蓝色
<body>
<div class="head" >
<ul>
<li><a href="#">工作室介绍</a></li>
<li><a href="#">部门介绍</a></li>
<li><a href="#">风采展示</a></li>
</ul>
</div>
</body>
.head{
background-color: #2e027f;
}
.head ul li {
list-style: none;
line-height:90px;
text-align: center;
display: inline-block;
}
.head ul li{
padding:20px;
}
.head ul li a {
padding: 0;
margin: 0;
color:white;
text-decoration: none;
font-size:20px;
font-weight: 80;
text-align: center;
}
.head li:hover {
background-color: aqua;
} 效果如下：
https://i-blog.csdnimg.cn/blog_migrate/00e5abe1ffbb965a1a7b30586480ef25.png
属性内容:link未被访问的链接样式:visited已被访问的链接样式:hover鼠标悬停时的元素样式:active被激活时元素样式 ②伪元素（用于设置元素指定部分样式）
1、::before和::after
在真正页面元素之前和之后插入一个额外元素
元素::before|after { content:"待插入内容"；
}
<body>
<div class="nav">
<a href="./index.html">返回首页</a>
</div>
</body>
.nav a::before{
content: "<";
}
效果：
https://i-blog.csdnimg.cn/blog_migrate/36d07ede26e1aef7bb4cad6e63b699f8.pnghttps://i-blog.csdnimg.cn/direct/a271861f94924436970a558f06d945d9.gif编辑
2、::first-letter(选择元素第一个字母)和::first-line(选择元素第一行)
二、关系选择器
关系选择器用于选择文档中的特定元素，这些元素与其他元素之间存在特定的关系。关系选择器可以帮助我们根据元素之间的层次关系和位置关系来精确地选择须要样式化的元素，从而实现更机动的页面布局和样式控制。
2.1 子女选择器
子女选择器用空格隔开选择器的名称，表示‘’······内的······‘’被设置为特定样式。
<body>
<p><strong>蓝旭</strong>工作室</p>
</body>
<style>
p strong{
color:blue;
}
</style>
https://i-blog.csdnimg.cn/img_convert/81103ed000e2680eaba4f45f81e19d81.png
2.2 子元素选择器(>)
子元素选择器用>毗连两个元素，表示其直接子元素的样式限定
(回答)
<body>
<p><strong>蓝旭</strong>工作室</p>
<p><em>欢迎来到<strong>蓝旭</strong>工作室</em></p>
</body>
<style>
p>strong{
color:blue;
}
</style>
https://i-blog.csdnimg.cn/img_convert/2569402fb095551f45fd2a3dfab6a8e6.png
2.3 相邻兄弟元素(+)
用+毗连两个兄弟元素，表示为某元素厥后紧邻的兄弟元素设置样式
<body>
<h2>hello</h2>
<p>蓝旭工作室</p>
<p>前端课程</p>
</body>
<style>
h2+p{
color:blue;
}
</style>
https://i-blog.csdnimg.cn/img_convert/5329f0813a06c193fd43140e0f89b9c9.png
2.4 通用兄弟选择器
选择指定元素后的所有兄弟元素，不论相邻与否
问题
[*] 在以下HTML结构中，怎样对<h3>背面的所有<p>设置样式，而不影响其他<p>元素？
<h3>标题</h3>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<h4>另一个标题</h4>
<p>这是另一个标题后的段落。</p> h3 <u>?</u> p {
color: orange;
}
[*] 在网站的导航菜单中，导航栏包罗多个一级菜单项，每个一级菜单项下大概有多个下拉菜单项。怎样只对一级菜单项设置样式，而不包罗下拉菜单项？（利用子女选择器，选择<nav>内的<li>元素，但不包罗嵌套的<li>元素。）
<ul>
<li>首页</li>
<li>产品
<ul>
<li>产品A</li>
<li>产品B</li>
</ul>
</li>
<li>关于我们</li>
</ul> ul <u>?</u> li {
font-weight: bold;
}
[*] 在以下HTML结构中，怎样只对<div>内的直接子元素<p>设置样式，而不影响嵌套的<p>元素？（子元素选择器）
<div>
<p>直接子元素</p>
<div>
<p>嵌套的子元素</p>
</div>
</div> div <u>?</u> p {
font-size: 20px;
}
[*] 在网页中，标题（如<h1>）背面紧跟着一个段落（<p>）。怎样只对标题背面的段落设置样式，而不影响其他段落？
<h1>标题</h1>
<p>这是标题后面的段落。</p>
<p>这是另一个段落。</p> h1 <u>?</u> p{
font-style:italic;
}
三、CSS布局
基础布局
Ⅰ、盒子模子
页面元素巨细由盒子模子决定，盒子模子规定了元素巨细、边框、表里边距等CSS样式
（一）盒子模子的概念
CSS认为每个元素都是一个盒子，可以通过CSS样式界说元素的高，宽，边框，边距等，并将盒子定位在页面的某个位置。页面布局就是通过大盒子嵌套小盒子，渐渐细化完成的
（二）盒子模子的构成
https://i-blog.csdnimg.cn/blog_migrate/06fc0915b7404d5866821de46708a1b8.jpeg
[*] content指元素内容
[*] padding、border、margin都是CSS属性。
padding、border、margin都可以分为四个方向，每个方向都可以设置单独的样式
①box-sizing属性
决定盒子巨细盘算方式
[*] 默认取值为content-box，此时width，height指内容宽度和高度，border和padding不盘算入width和height之内
盒子总宽度=width+padding+border+margin
盒子总高度=height+padding+border+margin
[*] 取值为padding-box，width、height包罗内容和padding
[*] 取值为border-box，则width、height包罗内容和padding、border
②border属性
属性名称描述属性值border-style线条样式dotted 点线 dashed 虚线 solid 实线 double 双实线border-width宽度px,thin,medium,thickborder-color颜色4个方向颜色雷同：border-color:red; 上、右、下、左颜色分别设置：border-color:red green yellow blue;border-方向某个方向统一设置分为border-top,border-right,border-bottom,border-left 属性值格式：宽度 样式 颜色 eg: border-top:2px solid red;border4个方向统一设置格式：宽度 样式 颜色 border:2px solid red;
[*] border实现有样式的分割线
<div class="line"></div>
.line{
width:500px;
border-top:1px solid blue;
}
[*] border可以实现各种箭头
/*实现向下的箭头*/
.arrow{
width:0;/*内容宽高为0，只显示边框*/
height:0;
border-width:5px;
border-style:solid;
/*只有上边框显示，形成向下的箭头*/
border-color:black transparent transparent transparent;
}
③padding属性
设置内容与边框的间隔
[*] padding-top 上内边距
[*] padding-right 右内边距
[*] padding-bottom 下内边距
[*] padding-left 左内边距
4个方向分开设置padding:1px 2px 3px 4pxpadding:1px 2px 3px 4px4个方向都雷同padding:1px 1px 1px 1pxpadding:1px上下雷同，左右雷同padding:1px 2px 1px 2pxpadding:1px 2px上下差别，左右雷同padding:1px 2px 3px 2pxpadding；1px 2px 3px
注：按照上右下左的顺序
<style>
div{
background-color: rgb(235, 186, 231);
width:120px;
border: 2px dotted black;
padding:10px 20px 30px 40px;
}
</style>
<body>
<div>
padding属性
</div>
</body> https://i-blog.csdnimg.cn/blog_migrate/12cfabf30c6287e75fba8108f8c1fd6f.pnghttps://i-blog.csdnimg.cn/direct/bc706c5d9fe94d7eba77a6550e23d28b.gif编辑
④margin属性
设置边框之外的空白的间隔，即外边距
注：
1.浏览器有默认的padding和margin值，在设置前应将其默认边距清零
*{
margin:0;
padding:0;
} 2.margin垂直外边距有归并征象，两个盒子垂直方向边框间的间隔由margin较大值决定
https://i-blog.csdnimg.cn/img_convert/96e09f7fc6e980bdd6fce201ab6a7739.jpeg
3.盒子在父元素里面水平居中的方式可以通过margin 完成
<style>
#outter{
border: 1px solid;
width: 100px;
height:80px;
}
#inner{
background-color: lightblue;
width: 50px;
height:40px;
margin:20px auto; <!--auto表示自动计算margin-left与margin-right-->
}
</style>
<body>
<div id="outter">
<div id="inner"></div>
</div>
</body> https://i-blog.csdnimg.cn/direct/50b0d7cee5674c57bc1d8ba4b7230e24.gif
https://i-blog.csdnimg.cn/img_convert/1d720fbbd49ff810eceb4b235637d222.png
⑤overflow属性
规定当内容溢出元素边框时怎样表现
[*] 默认取值visible:溢出部分正常表现
[*] 取值hidden:溢出部分隐藏不见
[*] 取值scroll：表现滚动条以便查看溢出部分
⑥height属性
[*] 当元素没有设置高度时：假如没有内容高度为0；如有内容，则高度为内容撑开的高度
[*] 行内元素无法设置高度（不生效），其高度是由内容决定
⑦width属性
[*] 当块级元素未设置宽度时，盒子宽度自动填满父元素
[*] width不可继承
[*] 行内元素无法设置高度，宽度有内容决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
background-color: bisque;
}
.two{
background-color: aqua;
height: 200px;
}
.three
{
background-color: rgb(240, 208, 231);
}
.four{
background-color: yellowgreen;
height: 150px;
width: 200px;
}
span{
background-color: rgb(221, 51, 110);
}
</style>
</head>
<body>
<div class="one">没有设置行高</div>
<div class="two">设置了行高</div>
<div class="three">未设置块级元素宽高,独占一行</div>
<span>行级元素宽度高度由内容决定</span>
<div class="four">设置了宽高的div</div>
</body>
</html> https://i-blog.csdnimg.cn/direct/205268133d75499fbfb1169e9cac2350.gif
https://i-blog.csdnimg.cn/img_convert/f77650ffa3996e39b939281164993ca5.png
https://i-blog.csdnimg.cn/direct/a80477be798e44b58b88f926d9f93e3b.gif
圆角边框 border-radius:属性值（数字px/百分比）用于设置元素的外边框圆角
https://i-blog.csdnimg.cn/img_convert/60aadc341d708c4d79acf5cbc6e10008.pnghttps://i-blog.csdnimg.cn/img_convert/a415ad2670ce602ab7e2826ce12f26bc.png
<body>
<div class="box"></div>
<br>
<div class="box2"></div>
</body>
<style>
.box{
height: 200px;
width: 200px;
background-color:pink;
}
.box2{
height: 200px;
width: 200px;
background-color:pink;
border-radius:100px;
}
</style> 想要出现差别的效果，从左上角顺时针赋值，没有取值的角与对角雷同
Ⅱ、定位方式
1.文档流定位
HTML元素默认从上到下、从左到右顺序排列，是根据元素的差别性质对元素举行定位
[*] 元素分类
块元素块元素的height、width、padding、margin都可以设置，默认块元素宽度是父元素的100%，高度与块元素内容高度划一，内容为空则高度为0div p h1-h6 ol ul table form行元素行元素是水平排列的，多个行元素排列在同一行，直到宽度不够才会另起一行，行元素width，height与内容划一无法设置宽高，对于行元素的margin，padding水平方向都会产生边距效果，垂直方向不会产生边距效果span a img行内块元素inbline特性，但是内容出现block特性，多个行内块元素可以在一行排列，可以设置高宽，边框，边距input，select
[*] 元素转换（通过设置display属性）
none元素不表现block表现为块元素inline表现为行元素inline-block表现为行内块元素 举个例子~ 将其转换为行内块元素
<style>
.head ul li{
list-style: none;
line-height:90px;
text-align: center;
display: inline-block;
}
</style>
<div class="head" id="idName">
<ul>
<li><a href="#intro">工作室介绍</a></li>
<li><a href="#bumen">部门介绍</a></li>
<li><a href="#show">风采展示</a></li>
</ul>
</div>
https://i-blog.csdnimg.cn/img_convert/f959756f51af9eb29975bb34dba18516.png
https://i-blog.csdnimg.cn/direct/c8650b67496442a199772faa4cb7395d.gif编辑
[*] 元素可见(visibility属性设置)
区别：
visibility:hidden 元素被隐藏，但是元素占位还在
display:none 表示元素不表现，其占位也不在文档流中了
2.浮动定位
用于笔墨环绕图片大概多列布局的情况
特性：
[*] 浮动可以离开标准流
[*] 浮动的元素在一行内表现且元素顶部对齐
[*] 浮动元素会具有行内块元素的特性
Ⅰ、float属性（设置元素浮动）
默认取值none：不浮动
取值left：元素向左浮动
取值right：元素向右浮动
.box1{
width:100px;
height:100px;
margin:5px;
border:1px solid red;
float:left;
}
.box2{
width:100px;
height:100px;
margin:5px;
border:1px solid red;
float:right;
}
</style>
<body>
<div class="box1">box1</div>
<div class="box2"> box2</div>
</body>
https://i-blog.csdnimg.cn/img_convert/99dc29b41408196f17622e5b47e06137.png
浮动带来的问题：标准流父级容器高度塌陷
一般情况下，我们不会给标准流中父级容器设定height，而是让容器height自动适配为容器内容的高度，但是假如，此时有一个子级元素发生了浮动，子级元素脱标后，对应标准流中的位置就会被释放，标准流中的父级容器的高度会发生塌陷。
Ⅱ 、clear属性
用于扫除浮动元素对当前元素的影响
none(默认)允许浮动元素出现在两侧left和right只能扫除一个方向浮动元素的影响both扫除两侧浮动元素的影响 3.层定位
[*] 确定定位方式
设置position属性 选择器{position：属性值；}
①static默认无定位
②fixed相对于浏览器窗口举行定位
③relative相对于元素原来的位置举行定位
④absolute相对于static定位以外最近的父元素举行定位
⑤sticky相对于滚动的最近父元素举行定位
2.确定元素位置
属性内容left元素相对于其父元素左边线间隔right元素相对于其父元素右边线间隔top元素相对于其父元素上边线间隔bottom元素相对于其父元素下边线间隔 3.确定元素层叠顺序
通过设置z-index属性决定上下层叠顺序，z-index值大的表现在最上面
4.定位模式
[*] 固定定位（position:fixed）相对于浏览器窗口举行定位
元素固定在页面上，不随页面滚动而移动。
应用场景：
[*] 顶部导航栏：将导航栏固定在页面顶部，用户在浏览页面时，导航栏始终可见，方便用户随时点击跳转到差别页面或页面内的差别部分
[*] 消息提示框：在页面顶部或底部固定表现消息提示框，用于表现体系通知、操作效果等信息。
[*] 对联广告：在页面左右两侧固定表现广告，形成对联效果，增加广告的视觉冲击力
[*] 悬浮广告/分享按钮：在页面侧边或角落固定表现广告条、分享按钮等，增加页面的互动性和广告曝光率
<style>
*{
margin: 0;
padding:0;
}
#container{
margin: 0 auto;
width: 70%;
height: 1200px;
background-color: rgb(231, 169, 227);
box-sizing: border-box;
}
.fix{
position:fixed;
top:50px;
right:20px;
width:10%;
height:300px;
background-color:yellowgreen;
}
</style>
<body>
<div id="container">container</div>
<div class="fix">fix</div>
</body>
https://i-blog.csdnimg.cn/img_convert/b7f9c2907329fc88dfd737594f1d40d7.png
[*] 相对定位(position:relative)相对于其原有位置定位 未离开正常的文档流，在文档流中的原位置保留
<style>
#box-relative{
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 150px;
background-color: blueviolet;
}
#box-static{
width: 200px;
height:100px;
background-color: #cde;
}
</style>
<body>
<div id="box-relative">relative定位</div>
<div id="box-static">static定位</div>
</body> https://i-blog.csdnimg.cn/img_convert/0a3f3e5962553cb0d993686b3f15e02f.pnghttps://i-blog.csdnimg.cn/img_convert/851adbdd7141faabeb60ac2e70f8d8b6.jpeg
https://i-blog.csdnimg.cn/direct/af27f23c552c4ee986e9aed74f7b4555.gif
[*] 绝对定位（position:absolute）相对于最近的非static父元素位置定位，假如没有则相对于文档根元素举行定位。绝对定位元素离开正常文档流，原位置保持不变
应用场景：
弹出对话框
当用户触发某个操作（如点击按钮）时，须要表现一个弹出对话框（如登录框、注册框、提示框等）。通过absolute定位，可以将弹出对话框精确地放置在页面的中心或其他指定位置
悬浮按钮
在页面的某个位置须要放置一个悬浮按钮（如“返回顶部”按钮、悬浮的分享按钮等）。通过absolute定位，可以将按钮固定在页面的某个位置，纵然页面滚动，按钮也始终可见。
<style>
#box-absolute{
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 150px;
background-color: #cef;
}
#box-static{
width: 200px;
height:100px;
background-color: #cde;
}
</style>
<body>
<div id="box-absolute">absolute定位</div>
<div id="box-static">static定位</div>
</body>
https://i-blog.csdnimg.cn/img_convert/e8a4e601942ba9ac1bc3ae8ad3eea703.pnghttps://i-blog.csdnimg.cn/img_convert/cfd13cca251e6b8732c222d6bf283fe0.jpeg
https://i-blog.csdnimg.cn/direct/ad9496ca16be4d3c801354c8e4f40352.gif
[*] 相对定位与绝对定位的嵌套
absolute定位元素是相对于relative父元素或body元素定位，所以通常将父元素设为relative定位，子元素设置为absolute定位
[*] 粘性定位(position:sticky)
相对于最近的可以滚动的父元素定位。元素在滚动到指定位置时会固定在某个位置
[*] 页面内导航栏
在长页面中，页面顶部有一个导航栏，当用户向下滚动页面时，导航栏会跟随滚动，直到到达页面顶部，然后固定在顶部。当用户向上滚动页面时，导航栏又会跟随滚动回到原来的位置。
[*] 侧边栏目录
在一些长文章或文档页面，侧边栏有一个目录列表，当用户滚动页面时，目录会跟随滚动，直到到达侧边栏的顶部，然后固定在侧边栏顶部。
注：
①子元素为粘性定位元素，在设置position:sticky同时，必须设置top,bottom,right,left属性之一，否则该元素为相对定位
②父元素不能设置overflow:hidden大概overflow:auto属性，父元素必须滚动
③父元素高度不能低于sticky元素的高度，父元素不能只有一个sticky子元素，还要包罗其他子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#container{
width: 500px;
margin: 0 auto;
padding:10px;
margin-top: 40px;
}
main{
height: 500px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #eee;
}
header,footer{
height: 100px;
background-color: #ddd;
border: 1px solid;
}
header{
position: -webkit-sticky;
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<div id="container">
<header>页眉</header>
<main>内容</main>
<footer>页脚</footer>
</div>
</body>
</html> https://i-blog.csdnimg.cn/direct/a7a04ac2fa044494812bb17c04cbb62b.gif
https://i-blog.csdnimg.cn/img_convert/6bb5bd16b047e4c8469efffa2dcc6ce8.jpeghttps://i-blog.csdnimg.cn/img_convert/7379d2c9f65b2c7b811c1b74482fa047.jpeg
Ⅲ、Flex布局
1.Flex的构成
[*] 设置方式：给父元素设置display：flex 子元素可以自动挤压或拉伸
[*] 构成部分：弹性容器 弹性盒子
[*] 主轴：默认在水平方向
[*] 侧轴/交织轴：默认在垂直方向
<style>
/*弹性容器*/
.box{
display:flex;
height: 300px;
border: 1px solid black;
}
/*弹性盒子 沿着主轴方向排列*/
.box div{
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
https://i-blog.csdnimg.cn/img_convert/7cac759847c30033d4075156c48d43ac.png
2.Flex布局
https://i-blog.csdnimg.cn/img_convert/d0687cd86c4152df0a2dbffbd13c6e84.png
调整主轴对齐方式
属性名：justify-content
属性值效果flex-start默认值，弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴匀称排列，空白间距均分在弹性盒子之间space-around弹性盒子沿主轴匀称排列，空白间距分在弹性盒子两侧space-evenly弹性盒子沿主轴匀称排列，弹性盒子与容器之间间距相称 效果展示：
<style>
.box{
display:flex;
height: 300px;
border: 1px solid black;
justify-content: center; /*居中*/
}
.box div{
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body> https://i-blog.csdnimg.cn/img_convert/113db21c256810539adf403d4e32bd10.png
space-between：
https://i-blog.csdnimg.cn/img_convert/96135e4cccf4f5d2873640a25fdb1f8d.png
父级剩余尺寸分配成空白间距
调整侧轴对齐方式
属性名
[*] align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
[*] align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值效果stretch弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）center弹性盒子沿侧轴居中排列flex-start弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列 效果 align-items:stretch
<style>
.box{
display:flex;
align-items: stretch;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
/*height: 100px;弹性盒子在侧轴方向没有尺寸才能拉伸*/
background-color:lightblue;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
https://i-blog.csdnimg.cn/img_convert/2202eadae24aaeb013893ee9f20eeda0.png
修改主轴方向
[*] 重要应用：图文对齐
[*] 主轴：默认在水平方向 侧轴：默认在垂直方向
[*] 属性名：flex-direction
[*] 属性值
属性值效果row水平方向，从左向右（默认）column垂直方向，从上向下row-reverse水平方向，从右向左column-reverse垂直方向，从下向上
<style>
.box{
display:flex;
flex-direction: column;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
https://i-blog.csdnimg.cn/img_convert/1dc5d1fb3272551fe07d38538f42ff16.png
主轴方向变换，侧轴方向自动变换
弹性伸缩比
[*] 作用：控制弹性盒子主轴方向的尺寸
[*] 属性名：flex
[*] 属性值：整数数字，表示占用父级剩余尺寸尺寸的份数
[*] 默认情况下，主轴方向的尺寸靠内容撑开，侧轴默认拉伸
弹性盒子换行
[*] 弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行表现
[*] 属性名：flex-wrap
[*] 属性值：
wrap:换行 nowrap:不换行(默认)
<style>
.box{
display:flex;
flex-wrap: wrap;
height: 300px;
border: 1px solid black;
}
.box div{
width: 200px;
height: 100px;
background-color:lightblue;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body> 默认：
https://i-blog.csdnimg.cn/img_convert/7478ab5a83af5798fe2082f39d03e757.png
wrap:
https://i-blog.csdnimg.cn/img_convert/c0367a54cc3209af9751d841e6185eaf.png
行对齐方式
属性名：align-content
属性值
属性值效果flex-start默认值，弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴匀称排列，空白间距均分在弹性盒子之间space-around弹性盒子沿主轴匀称排列，空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴匀称排列，弹性盒子与容器之间间距相称 对单行弹性盒子不生效
Ⅳ、grid布局
(一)Grid 布局是什么？
Grid 布局即网格布局，是一种新的 CSS 布局模子，比力善于将一个页面分别为几个重要区域，以及界说这些区域的巨细、位置、层次等关系。利用 Grid 布局，我们可以轻松实现类似下图布局
https://i-blog.csdnimg.cn/img_convert/06d609f9774cb0f1bbae7758143fcc05.png
1.1 Grid 布局和 flex 布局
前面我们了解了 flex布局 ，那么就会有人认为既然有 flex布局 了，好像没有须要去了解 Grid布局 。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行大概一列。Grid 布局是将容器分别成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而到达我们布局的目标。
https://i-blog.csdnimg.cn/img_convert/ab6d77ffba2c6db612360507ca6b978a.png
网格布局是由一个父元素以及一个或多个子元素构成
https://i-blog.csdnimg.cn/img_convert/7c81390668e09f274b513fdd7cdcbe7c.png
(二)容器属性
2.1 display 属性
我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。
声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素
2.2 grid-template-columns 和 grid-template-rows 属性
[*] grid-template-columns 属性设置列宽
[*] grid-template-rows 属性设置行高
.wrapper {
display: grid;
/*声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/*声明了两行，行高分别为 50px 50px*/
grid-template-rows: 50px 50px;
}
https://i-blog.csdnimg.cn/img_convert/088c2306fbbe83d66adf7e19c2c34349.png
repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。好比上面行高都是一样的，我们可以这么去实现，实际效果是千篇同等的。
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 2行，行高都为 50px*/
grid-template-rows: repeat(2, 50px);
} auto-fill 关键字：表示自动填充，让一行（大概一列）中尽大概的容纳更多的单位格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数目是不固定的，只要浏览器能够容纳得下，就可以放置元素
.wrapper-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 5px;
grid-auto-rows: 50px;
}
https://i-blog.csdnimg.cn/img_convert/59a103e7ce559c502f0aec7ca6636e25.gif
fr 关键字：Grid 布局还引入了一个别的的长度单位来帮助我们创建机动的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，背面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
.wrapper-3 {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}
https://i-blog.csdnimg.cn/img_convert/9ab43bb783f8b3d12488dcfa11d29e8f.gif
minmax() 函数：我们偶然候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。
auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以容易实现三列大概两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度
2.3 grid-row-gap、grid-column-gap、 grid-gap 属性
[*] grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距
[*] grid-gap 属性是两者的简写形式。
grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的
2.4 grid-template-areas 属性
grid-template-areas 属性用于界说区域，一个区域由一个大概多个单位格构成。
一般这个属性跟网格元素的 grid-area 一起利用，我们在这里一起先容。
grid-area 属性指定项目放在哪一个区域。
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas:
". headerheader"
"sidebar content content";
background-color: #fff;
color: #444;
}
上面代码表示划分出 6 个单元格，其中 . 符号代表空的单元格，也就是没有用到该单元格。每行由撇号定义,每行的列都在撇号内定义，以空格分隔。 .sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
} 表示将类 .sidebar .content .header地点的元素放在上面 grid-template-areas 中界说的 sidebar content header 区域中
https://i-blog.csdnimg.cn/img_convert/19605918238fede7270578220ab318c1.png
参考
1.网格布局 Grid
2.css【详解】grid布局—— 网格布局（栅格布局
四、调试CSS
东北师范大学官网 F12
在调试工具中 , 左侧是 HTML 结构 , 右侧是 CSS 样式
https://i-blog.csdnimg.cn/img_convert/cd84a12403f994f83134745ade90b0e8.png
点击左上角的 选择工具 , 可以在页面选择想要查看的元素
https://i-blog.csdnimg.cn/img_convert/d503fecde1e542301a99f277716c29b0.png
参考
开辟者调试工具
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]