CSS的学习（二）

标签：flex 定位 color 100px 学习 grid background CSS

本篇呢，我们接着学习CSS，浮动和定位是两者常用的布局方式，可以实现更加丰富和灵活的网页效果。有实操代码和效果方便理解

一、浮动

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

普通流（标准流）
浮动
定位

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

1.1标准流

标准流，就是默认的排列顺序；又称普通流和文档流

块级元素，默认的排序就是从上到下，一行一行排的
行级元素，就是竖列排序，从左到右，碰到父级元素的自动换行。

1.2浮动（float）

浮动就是完成标准流做不到的

浮动最典型的应用：可以让多个块级元素一行内排列显示。

页布局第一准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

语法格式：

选择器 { float: 属性值; }

属性值：

none：默认的，不浮动
left：向左浮动
right：向右浮动

展示：正常给带块元素是这样排序的，浮动就是让他横着排，给到float：left

<style>

         div{background-color: antiquewhite;

        width: 100px;

    height: 100px;

margin-bottom: 10px;}

    </style>

   

</head>

<body>

    <div>1</div>

    <div>2</div>

</body>

</html>

 margin-right: 10px;

        float: left;}

1.2.1脱离（浮动特性）

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
浮动的元素会一行内显示并且元素顶部对齐。（如果到达父级边缘，比父级的宽度大自动另起一行对齐）
浮动的元素会具有行内块元素的特性
浮动元素的大小根据内容来决定浮动的盒子中间是没有缝隙的

脱标：

<style>

        .a2{background-color: antiquewhite;

        width: 200px;

        height: 200px }

        .a1{background-color: aquamarine;

        width: 100px;

        height: 100px;

    float: left;}

 </style>

</head>

<body>

    <div class="a1">标准流</div>

    <div class="a2">脱标</div>

</body>

</html>

无缝隙

 div{background-color: aliceblue;

        width: 200px;

        height: 300px;

        float: left;}

<div>1</div>

    <div>2</div>

    <div>3</div>

练习：

<!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>

        div{width: 800px;

        height: 400px;}

        .c1{width: 200px;

        height: 400px;

        background-color: blueviolet;}

        .c2{width: 600px;

        height: 400px;

        background-color: aqua;

        float: right;}

        .a1{width: 140px;

        height: 190px;

        background-color: pink;

        margin-left: 10px;

        margin-bottom: 20px;

        float: left;}

    </style>

</head>

<body>

    <div>

        <div class="c1"></div>



        <div class="c2">

            <div class="a1">1</div>

            <div class="a1">2</div>

            <div class="a1">3</div>

            <div class="a1">4</div>

            <div class="a1">5</div>

            <div class="a1">6</div>

            <div class="a1">7</div>

            <div class="a1">8</div>

        </div>

    </div>

</body>

</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>

    <style>

        .c{width: 500px;

        height: 400px;

        border: 2px solid black;

        background-color: antiquewhite;}

        .c1{width: 400px;

        height: 150px;

        border: 3px solid black;

        background-color: azure;

        margin-top: 20px;

        margin-left: 20px;}

        .c2{width: 400px;

        height: 150px;

       background-color: azure;

        border: 3px solid black;

        margin-top: 20px;

        margin-left: 20px;}

        .a1{width: 100px;

            height: 80px;

            background-color: white;

            margin-top: 20px;

            margin-left: 20px;

            border: 5px solid black;



            float: left;}

        .a2{width: 100px;

            height: 80px;

            background-color: white;

            margin-top: 20px;

            margin-right: 20px;

            border: 5px solid black;

            float: right;}

        .b1{width: 200px;

            height: 50px;

            background-color: white;

            margin: auto;

            margin-top: 10px;

            border: 5px solid black;}

        .b2{width: 200px;

            height: 50px;

            margin: auto;

            background-color: white;

            margin-top: 10px;

            border: 5px solid black;}

    </style>

</head>

<body>

    <div class="c">

        <div class="c1">

            <div class="a1"></div>

            <div class="a2"></div>

        </div>

        <div class="c2">

            <div class="b1"></div>

            <div class="b2"></div>

        </div>

    </div>

</body>

</html>

1.2.2清除浮动

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了

语法格式：

选择器{clear：属性值；}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧

1.2.3、父级添加 overflow

属性可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

例如：

 overflow:hidden | auto | scroll;

优点：代码简洁缺点：无法显示溢出的部分

注意：是给父元素添加代码

1.2.4、父级添加after

伪元素 :after 方式是额外标签法的升级版。

给父元素添加：

 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } 
 .clearfix { /* IE6、7 专有 */ *zoom: 1; }

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝网、网易等

10.2.5、父级添加双伪元素

给父元素添加

.clearfix:before,.clearfix:after { content:""; display:table; } 
.clearfix:after { clear:both; } .clearfix { *zoom:1; }

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

总结为什么需要清除浮动？

1. 父级没高度。

2. 子盒子浮动了。

3. 影响下面布局了，我们就应该清除浮动了。

二、定位介绍

浮动可以让多个块级盒子一行没有缝隙排列，显示经常用于横向排列盒子。

定位则是可以让盒子自由的在和某个盒子内某移动位置或固定屏幕中某个位置，并且可以压住其他盒子。

1.1定位组成

由两部分组成，定位=定位模式+边偏移

定位模式，用于指定一个元素在文档中的定位方式。

边偏移量，决定偏移的大小，确定最终位置。

1.2定位模式（position）

语法格式：

选择器{position：属性值；}

1.2.1position属性：

值
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.2.2边偏移（方位名词）

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

属性	示例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom：80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left：80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

效果如图：

1.3、定位模式介绍

1.3.1、静态定位（static）

静态定位是元素默认的定位方式。也就是无定位。

语法：

选择器 { position: static; }

静态定位按照标准流特性摆放位置，它没有边偏移。几乎不用的

1.3.2、相对定位（relative）

定义：

相对定位就是在给到偏移量时，是相对自己原来的位置移动，并且它原来的位置还是占有的。

相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

语法：

选择器{position：relative；}

 .d1{background-color: aqua;

        position: relative;

        left: 80px;

        top: 50px;}

 <div class="d1">2</div>

2正常是和一三一样排列的，给到相对定位发生偏移可以看出2是相对自己原来的位置移动

1.3.3、绝对定位（absolute）

定义:

绝对定位是元素在移动位置的时候，相对于祖先元素，也就是父级元素，相对于父级盒子的位置移动。

语法：

选择器{position：absolute；}

特点：

完全脱标，不占由原先的位置；
如果父级元素没有定位，以浏览器界面为准定位
父级元素要有定位。元素将依据最近的定位的父元素进行定位偏移。

给到大盒子1相对定位，然后给到2和3绝对定位，当给到2偏移量的时候，3会自动向上补位，2原来的位置是不被占有的。

.d1{width: 500px;

        height: 500px;

        background-color: aqua;

      position: relative;}

.d2{background-color: rgb(145, 30, 207);

        width: 300px;

        height: 300px;

        position: absolute;

        top: 20px;

        left: 200px;}

.d3{background-color: aliceblue;

            width: 100px;

         height: 100px;

            position: absolute;}

子绝父相

子级是绝对定位的话，父级要用相对定位。

绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

因为父级需要占有位置，因此是相对定位。子盒子不需要占有位置，则是绝对定位。

父盒子需要加定位限制子盒子在父盒子内显示。

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

1.3.4、固定定位（fixed）

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

选择器 { position: fixed; }

特点：

以浏览器的可视窗口为参照点移动元素，跟父元素没有关系。
不随滚动条滚动
固定定位不再占有原先位置，也是脱标的。可以看作一种特殊的绝对定位。
完全脱标，完全不占位置，只认浏览器的可视窗口。

<!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>

        .d1{background-color: aliceblue;

        width: 400px;

        height: 400px;

        margin: 0 auto;

        }

        .fix{width: 30px;

        height: 140px;

        background-color: aqua;

        position: fixed;

        left: 50%;

       margin-top: -400px;

    }

    </style>

</head>

<body>

    <div class="d1">

       

    </div>

    <div class="fix"></div>

</body>

</html>

1.3.5粘性定位（sticky）了解

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器 { position: sticky; top: 10px; }

特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效跟页面滚动搭配使用。兼容性较差，IE 不支持。

总结：

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute 绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

学习定位重点学会子绝父相。
注意：

边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；
left 和 right 不要同时使用。

练习-广告滑动：

<!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>

        /* div{width: 1200px;

            height: 1000px; */

        div{

            display: flex;

            border: 1px solid black;

            margin: auto;}

        .a1{width: 250px;

        height: 300px;}

        .d2,.d4{width: 250px;

        height: 300px;

        position: fixed;

        margin-top: 300px;}

        .a2{width: 1000px;

        height: 1500px;

        margin-left: 0px;}

        .d4{right: 0;}

    </style>

</head>

<body>

    <div class="d1">

        <div class="d2">

            <img src="D:\VS web\img\广告1.png" alt="" class="a1">

        </div>

        <div class="d3">

             <img src="D:\VS web\img\box.png" alt="" class="a2">

        </div>

       <div class="d4">

            <img src="D:\VS web\img\广告2.png" alt="" class="a1">

       </div>

       

    </div>

</body>

</html>

三、定位应用

3.1、固定定位

小算法：

1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

3.2、堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：

选择器 { z-index: 1; }

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

2. 如果属性值相同，则按照书写顺序，后来居上；

3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

<!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>

        .d1{width: 200px;

        height: 200px;

        background-color: blueviolet;

    position: absolute;

    left: 50px;

    z-index: 2;

top: 20px;}

        .d2{width: 200px;

        height: 200px;

        background-color: rgb(3, 80, 7);

        position: absolute;

        top: 70px;z-index: 4;

    left: 40px;}

        .d3{width: 200px;

        height: 200px;

        background-color: rgb(95, 30, 4);

        position: absolute;

        top: 50px;

        left: 80px;

        z-index: 1;}

    </style>

</head>

<body>

    <div class="d1">熊大</div>

    <div class="d2">熊二</div>

    <div class="d3">强哥</div>

</body>

</html>

3.3、绝对位置的盒子居中

加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

1. 可以用inline-block 转换为行内块
2. 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
3. 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。、

3.4、脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

（我们以前是用 padding border overflow 解决的）

我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

3.5、绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字。

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

四、弹性盒子布局

4.1flex布局

flex 布局中有坐标系的概念

默认水平方向为 main axis(主轴) 。主轴起始位置(与 flex container 边框交叉)为 main

start，终止位置为 main end，主轴沿 flex container 所占尺寸为 main size。

同理，垂直方向为 cross axis(交叉轴) 。交叉轴起始位置(与 flex container 边框交叉)为

cross start，终止位置为 cross end，交叉轴沿 flex container 所占尺寸为 cross size。

默认 flex item 沿主轴从 main star 到 main end 依次排列。

4.2、Flex父元素属性

属性

属性值

含义

display

flex/inline-flex(行内)

Flex-direction

row:默认值，主轴方向从左到右、ow-reverse:主轴方向从右到左、column: 主轴方向从上到下、columnreverse:主轴方向从下到上

决定主轴方向

justify-content

flex-start、flex-end、 center、space-between、 space-evenly、spacearound

决定 flex items 在主轴上的

对齐方式

align-items

normal、stretch 效果同

normal、flex-start、flex

end 、center、baseline

决定 items 在交叉轴上的对

齐方式

flex-wrap

nowrap 默认值、wrap 换

行、wrap-reverse、

定 flex items 是否换行

align-content

flex-start、flex-end、

center、space-between、

space-evenly、space

around

决定 items 多行时在交叉轴上的对齐方式

属性值与 justify-content 相

同

2.1、flex-direction:决定主轴方向

1、row：默认值，主轴方向从左到右

display: flex;

flex-direction: row;

2、row-reverse：主轴方向从右到左

3、column：主轴方向从上到下

4、column-reverse：从下到上

2.2、justify-content 决定 flex items 在主轴上的对齐方式

align-self优先级比align-items高，用于某一个

flex-start:默认值，flex items 以 main start 对齐

flex-end:flex items 以 main end 对齐
center:沿 main axis 居中对齐（比margin:0 auto;好用得多）
space-between:两边对齐中间间隔平均分
space-evenly:两边不对齐所有间隔平均分
space-around:两边间隔为中间间隔的1/2

2.3、align-items: 决定 items 在交叉轴上的对齐方式

效果与主轴效果类似，不再做演示

①normal 无高度默认值，如果flex item不设高度默认会被拉伸为cross size

②stretch 效果同normal

③flex-start 有高度默认值，flex items 在交叉轴上以cross strat 对齐

④flex-end flex items 在交叉轴上以 cross end

⑤center 交叉轴居中对齐 ⑥baseline 交叉轴基线对齐基线为内容第一行

2.4、flex-wrap 决定 flex items 是否换行

:默认的,flex-items 沿着主轴从头到尾依次排列若排列一行超出 container 宽度不会换行而是flex items被压缩

nowrap	默认
wrap	换行
wrap-reverse	反向换行

2.5、align-content 决定 items 多行时在交叉轴上的对齐方式

属性值与 justify-content 相同

①flex-start 在交叉轴上以cross start 对齐会清除行间距

②flex-end 在交叉轴上以cross end 会清除行间距这里主要区别align-items与align-content 的细微区别：可以直观的看出 align-items 换行后以某个位置对齐会产生行间距，而 align-content 不会有行间距

flex-wrap: wrap;

align-items: flex-start;

 flex-wrap: wrap;

 align-content: flex-start;

4.3、flex子元素属性

order	决定 flex item 的排列顺序值越小越靠前
align-self	改变某一个flex item 在 cross axis 上的对齐方式
flex-grow默认值 0	增长规则设定相同值相当于等比例增长
flex-shrink 默认值 1
flex-basis

3.1、order 决定 flex item 的排列顺序值越小越靠前

  .c5{order: 9;}

        .c3{order: 5;}

        .c1{order: 6;}

        .c2{order: 11;}

        .c4{order: 7;}

        .c6{order: 0;}

3.2、align-self 改变某一个flex item 在 cross axis 上的对齐方式

①flex-start flex item 在交叉轴上以 cross strat 对齐

②flex-end flex item 在交叉轴上以 cross end

③center 交叉轴居中对齐

④baseline 交叉轴基线对齐基线为内容第一行

3.3、flex-grow

当一行flex item 占不满整个flex container 宽度时可以使用 flex-grow增长。增长规则设定相同值相当于等比例增长

①:flex-grow 和大于 1时每个item增长多余宽度/sum(flex-grow)*(flex-grow)

②:flex-grow 和小于等于1时每个item增长多余宽度*flex-grow

.d1 .c5{background-color: rgb(163, 39, 147);

           flex-grow: 0.1; }

.d1 .c5{background-color: rgb(163, 39, 147);

           flex-grow: 5; }

3.4、flex-shrink默认值为1

当一行 flex-items 宽度超出 flex-container 最大宽度时，进行收缩。收缩数值计算方法和 flex-shrink 相同

3.5、flex-basis 设置 flex-item 的宽度

flex 布局中宽度的优先级:min-width/max-width>flex-basis>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>

        .d1{width: 500px;

            height:500px;

            background-color: red;

            display: flex;

            flex-direction: row;

            flex-wrap: wrap;

            justify-content: space-evenly;

            }

        .d1 div{width: 150px;

            height: 150px;

           /* border: 8px solid red; */

            align-self: center;

        }

        .c1,.c4,.c8{background-color: yellow;}

        .c2,.c5,.c9{background-color: green;}

        .c3,.c6,.c7{background-color: blue;}

    </style>

</head>

<body>

    <div class="d1">

        <div class="c1"></div>

        <div class="c2"></div>

        <div class="c3"> </div>

        <div class="c4"></div>

        <div class="c5"></div>

        <div class="c6"></div>

        <div class="c7"></div>

        <div class="c8"></div>

        <div class="c9"></div>

    </div>

</body>

</html>

五、Grid布局

gird 布局很强大，采用网格布局的区域，称为"容器"（container）。

容器内部子元素，称为" 项目"（item），即container -> item

注意：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素

1、显示网格属性

属性	含义	属性值
grid-template-rows	规定行的尺寸。	单位包括：绝对值px，百分比值%，比例值fr， repeat()
grid-template-columns	规定行的尺寸。
grid-template-areas	规定使用特定命名的栅格布局

绝对值 px：在容器内划分出3列，每列宽度为100px

grid-template-columns: 100px 100px 100px;

百分比值 %：将容器等分为3列，每列宽度为容器总宽度/3

grid-template-columns: 33.33% 33.33% 33.33%;

比例值 fr：将容器划分为2列，第1列的宽度：第2列的宽度 = 1:2

grid-template-columns: 1fr 2fr;

可以与绝对长度的单位结合使用

grid-template-columns: 150px 1fr 2fr;

 .d1{width: 400px;

            height: 400px;

            display: grid;

   grid-template-columns: 100px 100px 100px;

            grid-template-rows: 100px 100px 100px;  }

.d1 div{background-color: antiquewhite;

         border: 1px solid rgb(255, 255, 255);

            }

 <div class="d1">

        <div class="c1">1</div>

        <div class="c2">2</div>

        <div class="c3">3 </div>

        <div class="c4">4</div>

        <div class="c5">5</div>

        <div class="c6">6</div>

        <div class="c7">7</div>

        <div class="c8">8</div>

        <div class="c9">9</div>

    </div>

1.1、repeat()

受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值

grid-template-columns: repeat(3,100px);

 grid-template-rows:  repeat(3,100px);

repeat还可以重复某种模式，像这样简写

grid-template-columns: repeat(3,200px 100px);

代码意思是定义了6列，分别是200，100，200，100，200，100

grid-template-rows: repeat(2, 80px 20px 100px);

代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px

1.2、auto-fill

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。当我们只需要确定列宽或者行高，而不用理有多少列时，就可以使用它了每一列200px，列数设置为了auto-fill会自动填充，随着浏览器的拉伸，项目会随之变化。

1.3、fr

fr 单位代表网格容器中可用空间的一等份。

grid-template-columns: 100px 1fr 2fr;

表示第一个列宽设置为 100px，后面剩余的宽度分为两部分，第二给项目占1/3，第三个项目占2/3。也是会随着浏览器页面的拉伸按比例变化，但100px是固定不变的

1.4、minmax（）

minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值,也就是说最大不会超过最大值，最小不能小过最小值。也是会随着浏览器页面的拉伸按比例变化

 grid-template-columns:100px 1fr minmax(200px,1fr);

 grid-template-rows: 100px 100px 100px;

1.5、auto

auto 设置后，将由浏览器自行决定长度，尽可能的会占满剩余空间，除非有其他设置，例如有min-width之类的，利用这个关键字，我们可以轻易实现三列或者两列布局。

grid-template-columns: 100px auto 100px;

  grid-template-rows: 100px 100px 100px;

2、隐式网格属性

属性	属性值	含义
grid-auto-rows		规定行的自动尺寸
grid-auto-columns		规定列的自动尺寸
grid-auto-flow	Column/row/row dense/colum dense	指定在栅格布局中元素怎样自动布局排列

使用网格布局后，项目的 float、display: inline-block、display:table-cell、vertical-align 和 column-*等设置都将失效。

2.1 grid-auto-flow 属性。（补位）

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由 grid-auto-flow 属性决定，默认值是 row，即"先行后列"。也可以将它设成 column，变成"先列后行"。

 .d1 .c6{background-color: aqua;

               

                grid-column-start: 1;

                grid-column-end: 3;

           }

 .d1{

grid-auto-flow: column;

grid-auto-flow: row dense; }

3、间距属性

属性	含义
gap	定义栅格布局的行与列间隙的尺寸
row-gap	定义行间隙的尺寸
column-gap	定义列间隙的尺寸
grid-gap	定义栅格布局中行与列间隙的尺寸

row-gap: 20px;

column-gap: 20px;

row-gap、column-gap 一样值，可用gap:10px代替。

4、使用方法

块级容器（宽度撑满整行）时,容器独占一行

display: grid;

行内容器（宽度随内容自适应）时

display: inline-grid;

4.1网格线

grid是网格布局，使用方括号【】指定每一根网线的名字。

grid-template-columns: [c1]100px [c2]100px [c3]100px;

grid-template-rows:[c1]100px [c2]100px [c3]100px ;

4.2单元格内容排列（与flex相似）

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）这里只以justify-items 做展示，另一个同理，只是一个水平一个垂直的差别

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

row-gap: 20px;

column-gap: 20px;

justify-items: center;

row-gap: 20px;

column-gap: 20px;

align-items: center;

4.3设置多余网格

显示网格通过grid-template-columns 和 grid-template rows 属性中定义的行和列，

当实际行数或者列数大于设置的行列数时，就会有多余的网格，这些网格的宽高通过grid-auto-columns和grid-auto-rows 属性来设置

grid-template-columns: repeat(4, 100px);

grid-template-rows: 100px 100px;

grid-auto-columns: 80px;

grid-auto-rows: 60px;

9的一行就是隐藏网格

4.4指定项目位置

实现的原理其实是指定项目的四个边框，分别定位在哪根网格线

grid-column-start 属性：左边框所在的垂直网格线

grid-column-end 属性：右边框所在的垂直网格线

grid-row-start 属性：上边框所在的水平网格线

grid-row-end 属性：下边框所在的水平网格线

用法：

.d1{gap:10px；}

 .d1 .c3{

                grid-column-start: 1;

                grid-column-end: 3;

            }

.d1 .c5{grid-column-start: 2;

            grid-row-start: 2;

                grid-row-end: 4;}

也可以使用span关键字，来实现占2个网格这样的效果，可以将它理解为跨越的意思

grid-column-end: span 2;

意思是：1号项目的左边框距到右边框跨越了2个网格

简写：

grid-row: 1 / 4;

grid-column: 2 / 3;

这里/不是除的意思，指开始的网线为第一条网线，结束为第四条网线。

当遇到重叠时，采用 z-index 属性确定上下关系

 .d1 .c3{background-color: aqua;

               grid-column: 2/4;

               grid-row: 2/3;

            }

        .d1 .c5{grid-column-start: 2;

            grid-row-start: 2;

                grid-row-end: 4;}

.d1 .c3{background-color: aqua;

               grid-column: 2/4;

               grid-row: 2/3;

             z-index: 3}

4.5、grid-area属性

grid-template-areas 属性，当时只是知道了怎么划分区域，现在这个grid-area 属性就是怎么把项目指定给区域。

利用grid-template-areas 属性在容器上划分区域，上面划分了4块区域，下面我们通过给项目添加grid-area属性，来给它指定到某个区域当中

 .d1{

                display: grid;

                grid-template-columns: 200px 200px 200px ;

                grid-template-rows: 200px 200px 200px;

                grid-template-areas: 'a a a'

                'b b c'

                'e e c';

                gap: 10px 10px;

                }

                .c1 {

                    grid-area: c;

                    background-color: #55efc4;

                    }

练习：计算器

<!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>
        .d1{width: 600px;
            height: 700px;
            border: 1px solid black;
            border-radius: 20px;}
        .t1{width: 595px;
            height: 80px;
            background-color: black;
            color: white;
            text-align: right;
            font-size:xxx-large;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;}
        .d2{width: 595px;
            height: 520px;
            display: grid;
            grid-template-columns: repeat(5,90px);
            grid-template-rows: repeat(5,90px);  
            row-gap: 20px;
            column-gap: 20px;
            margin-top: 40px;
            margin-left: 30px;
          
        }
        .t2,.t3,.t4,.t5,.t6{border-radius: 20px;
                            font-size: xx-large;
                            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                            text-align: center;
                            border: 1px solid rgb(233, 233, 229);}
        .t2{grid-column: 1/3;
            background-color: rgb(72, 152, 251);
            color: white;}
        /* .t4{background-color: rgb(207, 207, 207);} */
        .t6{grid-column: 1/3;
            grid-row: 5/6;
           }
        .t5{grid-column: 4/6;
            grid-row: 4/6;}
        .t3,.t5{background-color: rgb(241, 180, 13);
                color: white;}
        .t2:hover{background-color: rgb(144, 187, 247);}
        .t3:hover{background-color: rgb(255, 210, 97);}
        .t4:hover{background-color: rgba(255, 253, 253, 0.942);}
        .t5:hover{background-color: rgb(255, 210, 97);}
        .t6:hover{background-color:  rgba(255, 255, 255, 0.942);;}
        
    </style>
</head>
<body>
    <div class="d1">
        <input type="text" class="t1">
        <div class="d2">
            <input type="button" value="AC" class="t2">
            <input type="button" value="+_" class="t3">
            <input type="button" value="(" class="t3">
            <input type="button" value=")" class="t3">
            <input type="button" value="7" class="t4">
            <input type="button" value="8" class="t4">
            <input type="button" value="9" class="t4">
            <input type="button" value="/" class="t3">
            <input type="button" value="x" class="t3">
            <input type="button" value="4" class="t4">
            <input type="button" value="5" class="t4">
            <input type="button" value="6" class="t4">
            <input type="button" value="+" class="t3">
            <input type="button" value="-" class="t3">
            <input type="button" value="1" class="t4">
            <input type="button" value="2" class="t4">
            <input type="button" value="3" class="t4">
            <input type="button" value="=" class="t5">
            <input type="button" value="." class="t4">
            <input type="button" value="0" class="t6">
        </div>
        
    </div>
</body>
</html>

六、元素的显示与隐藏

6.1display显示

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配 JS 可以做很多的网页特效。

实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单

<!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>

        .a1{background-color: aquamarine;

            width: 200px;

            height: 300px;

      display: none;

    }

        div{background-color: aliceblue;

        width: 200px;

        height: 300px;

        float: left;}

 </style>

   

</head>

<body>

    <!-- <div class="a1">标准流</div>

    <div class="a2">脱标</div> -->

    <div>1</div>

    <div class="a1">2</div>

    <div>3</div>

</body>

</html>

6.2visibility可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏

• 特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

6.3overflow溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。 • 但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

这一篇就先学到这里了，下一篇是这部分的最后一个了

标签：flex,定位,color,100px,学习,grid,background,CSS
From： https://blog.csdn.net/2402_86247394/article/details/142996568

一、浮动

1.1标准流

1.2浮动（float）

1.2.1脱离（浮动特性）

1.2.2清除浮动

1.2.3、父级添加 overflow

1.2.4、父级添加after

二、定位介绍

1.1定位组成

1.2定位模式（position）

1.2.1position属性：

1.2.2边偏移（方位名词）

1.3、定位模式介绍

1.3.1、静态定位（static）

1.3.2、相对定位（relative）

1.3.3、绝对定位（absolute）

子绝父相

1.3.4、固定定位（fixed）

1.3.5粘性定位（sticky）了解

总结：

练习-广告滑动：

三、定位应用

3.1、固定定位

3.2、堆叠顺序（z-index）

3.3、绝对位置的盒子居中

3.4、脱标的盒子不会触发外边距塌陷

3.5、绝对定位（固定定位）会完全压住盒子

四、弹性盒子布局

4.1flex布局

4.2、Flex父元素属性

2.1、flex-direction:决定主轴方向

2.2、justify-content 决定 flex items 在主轴上的对齐方式

2.3、align-items: 决定 items 在交叉轴上的对齐方式

2.4、flex-wrap 决定 flex items 是否换行

2.5、align-content 决定 items 多行时 在交叉轴上的 对齐方式

4.3、flex子元素属性

3.1、order 决定 flex item 的排列顺序 值越小 越靠前

3.2、align-self 改变某一个flex item 在 cross axis 上 的对齐方式

3.3、flex-grow

3.4、flex-shrink默认值为1

3.5、flex-basis 设置 flex-item 的宽度

练习

五、Grid布局

1、显示网格属性

1.1、repeat()

1.2、auto-fill

1.3、fr

1.4、minmax（）

1.5、auto

2、隐式网格属性

2.1 grid-auto-flow 属性。（补位）

3、间距属性

4、使用方法

4.1网格线

4.2单元格内容排列（与flex相似）

4.3设置多余网格

4.4指定项目位置

4.5、grid-area属性

练习：计算器

六、元素的显示与隐藏

6.1display显示

6.2visibility可见性

6.3overflow溢出

相关文章

赞助商

阅读排行

2.5、align-content 决定 items 多行时在交叉轴上的对齐方式

3.1、order 决定 flex item 的排列顺序值越小越靠前

3.2、align-self 改变某一个flex item 在 cross axis 上的对齐方式