前端与 CSS（2） | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第3天。
本堂课重点内容：
- CSS 布局方式及相关技术
CSS布局
布局是什么？
CSS布局允许我们通过选择网页中的元素，控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。页面布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
布局相关技术
正常布局流
浏览器默认的 HTML 布局方式
<p>TodoList</p>
<ol>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ol>
display 属性
block：块级盒子inline：行级盒子inline-block：本身是行级，可以放在行盒中;可以设置宽高；作为一个整体不会被拆散成多行none：使元素不显示
弹性盒子（FlexBox）
盒子是并列的，通过指定宽度来创建、调整横向或纵向的页面布局
要使用 FlexBox，只需要在想进行 Flex 布局的父元素上应用display: flex
经典的三栏布局：
<style>
.container{
height:200px;
width: 200px;
display: flex;
}
.left{
background-color: red;
flex: 1;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
flex: 1;
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class=middle></div>
<div class=right></div>
</div>
</body>
Grid布局
Grid 布局（即网格布局）用于在两个维度上把元素按行和列排列整齐
要使用 Grid 布局，只需要指定 display 的值display: flex
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 4;
grid-row: 1 / 3;
background: #8CC7B5;
}
.two {
grid-column: 1;
grid-row: 3/5;
background: #E6CEAC;
}
.three {
grid-column: 2 / 4;
grid-row: 3;
background: #BEE7E9;
}
.four {
grid-column: 2 / 4;
grid-row: 4;
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
</style>
<body>
<div class="wrapper">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
</div>
</body>
float浮动
float 属性可以有如下值：
left— 将元素浮动到左侧。right— 将元素浮动到右侧。none— 默认值，不浮动。inherit— 继承父元素的浮动属性。
<style>
.one {
width: 300px;
height: 200px;
font-size: 200%;
color: #fff;
text-align: center;
background: #8CC7B5;
float: right;
}
.item {
text-align: center;
line-height: 200px;
font-size: 170%;
color: #000;
}
</style>
<body>
<div>
<div class="one">One</div>
<p class="item">为One这个div添加float: right使之右浮动</p>
</div>
</body>
position
position 属性可以有如下值：
static— 默认值，非定位元素relative— 相对自身原本位置偏移，不脱离文档流absolute— 绝对定位，相对非static祖先元素定位fixed— 相对于视口绝对定位
根据Mdn示例：
<style>
body {
width: 500px;
margin: 0 auto;
}
p {
background-color: rgb(207,232,220);
border: 2px solid rgb(79,185,227);
padding: 10px;
margin: 10px;
border-radius: 5px;
}
.positioned1 {
position: relative;
background: rgba(255,84,104,.3);
border: 2px solid rgb(255,84,104);
top: 30px;
left: 30px;
}
.positioned2 {
position: absolute;
background: #E6CEAC;
border: 2px solid rgb(230, 206, 0);
top: 30px;
left: 30px;
}
</style>
<body>
<h1>Positioning</h1>
<p>I am a basic block level element.</p>
<p class="positioned1">I am a basic block level element.</p>
<p class="positioned2">I am a basic block level element.</p>
</body>
