CSS学习笔记（02）

浮动

块元素：可以设置宽度和高度,独占一行

<h1></h1>	<p></p>	<div></div>	<ul></ul>	<li></li>

行内/内联元素：不可以设置宽度和高度，不独占一行

<span></span>	<a></a>	<strong></strong>

行内块元素：可以设置宽度和高度，不独立成行

<img>	<input>	<button></button>

display属性（改变元素的分类）

block：转换为块元素
inline：转换为行内元素
inline：block：转换为行内块元素
none：隐藏元素

两个div在同一行显示

将元素设置为浮动元素（float），块元素可以在同一行显示，脱离文档流

==float属性的值：none\left\right==

行内元素可以被包含在块元素中，反之不可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            width: 100px;
            height: 100px;
            border:2px solid red;
            display: inline-block;
            float: right;
        }
        span{
            width: 100px;
            height: 100px;
            border:2px solid red;
            display:inline-block;
            /*浮动*/
            float: right;
            /*
            clear:何处不允许有浮动元素
            both:左右两侧
            right:右侧
            left:左侧
            */
            clear: both;
        }
        h1{
            display: none;
        }
    </style>
</head>
<body>
    <div>div块元素</div>
    <span>span行内元素</span>
    <h1>消失不见</h1>
</body>
</html>

父级边框塌陷问题解决方案（清除浮动造成的不良影响）

增加父级元素的高度

#father{
    height: 100px;
}

增加一个空的div标签

<style>
    .clear{
        clear: both;
        margin: 0;
        padding: 0;
    }
</style>

<div id="father">
<!--在父级元素内部最下面-->
    <div class="clear"></div>
</div>

在父级元素中加一个溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 1px solid red;
            overflow: hidden;
        }
        #father div img{
            float: right;
        }
    </style>
</head>
<body>

<div id="father">
    <div>
        <img src="../../Resources/image/aimiliya.webp">
    </div>
    <div>
        <img src="../../Resources/image/kl.jpg">
    </div>
</div>

</body>
</html>

在父类中加伪元素(推荐)

.clear::before,.clear::after{
            content: "";
            display: block;
            clear:both;
        }

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clear::before,.clear::after{
            content: "";
            display: block;
            clear:both;
        }
        .aside{
            width: 50px;
            height: 50px;
            border:1px solid red;
            float:left;
            box-sizing: border-box;
        }
        .content{
            width: 50px;
            height: 50px;
            border:1px solid red;
            float:left;
            box-sizing: border-box;
        }
        .box{
            background-color:blue;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container clear">
    <div class="content">
        内容
    </div>
    <div class="aside">
        边栏
    </div>
</div>
<div class="box">
</div>
</body>
</html>

定位（位置）

默认取值为静态

相对定位（相对）

对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
特异性——移动元素后，元素本来占有的位置会保留，然后会相对原来的位置定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div{
            display: block;
            margin: 0 auto;
            padding: 4px;
            border: 2px solid red;
            width: 300px;
            height: 300px;
        }
        a{
            color: white;
            text-align: center;
            line-height: 100px;
            text-decoration: none;
            background-color: pink;
            display: block;
            width: 100px;
            height: 100px;
        }
        a:hover{
            background-color: blue;
        }
        body>div>div:nth-of-type(2){
            position: relative;
            top: -100px;
            right: -200px;
        }
        body>div>div:nth-of-type(4){
            position: relative;
            top: -100px;
            right: -200px;
        }
        body>div>div:nth-of-type(5){
            position: relative;
            top: -300px;
            right: -100px;
        }
    </style>
</head>
<body>
<div>
    <div><a href="?">链接1</a></div>
    <div><a href="?">链接2</a></div>
    <div><a href="?">链接3</a></div>
    <div><a href="?">链接4</a></div>
    <div><a href="?">链接5</a></div>
</div>
</body>
</html>

固定定位（固定）

脱离文档流，默认参照物为浏览器视窗位置
常用于返回顶部等常驻页面的元素。

Z 索引

用整数值来定义堆叠级别。可以为负值。数值大的在前方显示。

动画效果

动画与过渡的区别:
过渡效果通常用户与浏览器进行交互（例如 hover）
动画效果，可以交互，也可以在网页加载时直接执行，并且可以让效果更复杂。

动画属性（animation）

animation-name：规定需要绑定到选择器的 keyframe 名称…
animation-duration: 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线函数.
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。无限无限次

关键帧（定义动画）

按百分比指定动画
从。。。自。。。指定动画

注意：开始与结束相同，可以让动画更平滑

@keyframes anim {
  0% {
    transform: translate(0px, 0px);
  }

  100% {
    transform: translate(900px, 100px);
  }
}

/* from:0%, to:100%  */
    from{
    	transform: rotate(0deg);
    }
    to{
    	transform: rotate(360deg);
    }

停止动画效果

animation-play-state: paused;

旋转唱片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @keyframes spin {
            100%{
                transform: rotate(360deg);
            }
        }
        img{
            height: 300px;
            border-radius: 50%;
            animation: spin 2s linear infinite ;
        }
        img:hover{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
<div class="img">
    <img src="../images/jay.jpg" alt="">
</div>
</body>
</html>

弹性布局

flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。
flex布局的元素会把自己的一级子元素排成一行，并将他们变成可以伸缩，易排列的盒子。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex 布局

flex 布局原理

就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式

.box{
  display: flex;
}

此容器会变成一个flex容器（flex container），容器内部的元素被称为flex项目（flex item），在这个容器内部浮动会失效，通过设置flex容器的css样式，可以改变内部项目的布局方式。

基本概念

将元素设置为 display：flex;元素会变为一个 flex 容器。容器内部的元素为 flex 元素或者叫 flex 项目（flex-item）

主轴：主轴
十字轴：交叉轴

flex 容器中的默认效果

父元素是默认充满宽度的
flex 项目在 flex 容器中延主轴排列。并且块元素不会独立成行
flex 项目高度适应 flex 容器高度（同行内元素）

设置 flex 容器

关于主轴的属性

柔性方向：
设置 flex 项目排列方向，设置主轴的方向
flex-direction是flex控制横向延展还是纵向延展的属性。
值：
row（默认值）：主轴为水平方向，起点在左端。从左到右
row-reverse：主轴为水平方向，起点在右端。从右到左 column：主轴为垂直方向，起点在上沿。从上到下 column-reverse：主轴为垂直方向，起点在下沿。从下到上
注意：使用这个属性之前一定要确定好主轴是哪个
证明内容：
flex 项目在主轴的排列方式
设置主轴上的子元素排列方式
值：
flex-start（默认值）：左对齐从头部开始如果主轴是 x 轴，则从左到右 flex-end：右对齐 从尾部开始排列 center：居中在主轴居中对齐（如果主轴是 x 轴则水平居中） space-between： 两端对齐，项目之间的间隔都相等 平分剩余空间 space-around： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。先两边贴边再平分剩余空间（重要） 类似于每个项目的 margin-left、margin-right 相等。

关于交叉轴的属性

对齐项：
flex 项目在 交叉轴 的排列方式
设置侧轴上的子元素排列方式在子项为单项（单行）时使用
值：
flex-start： 交叉轴的起点对齐。 flex-end： 交叉轴的终点对齐。 center： 交叉轴的中点对齐。 stretch（延申）（默认值）：如果项目未设置高度或设为 auto ，将占满整个容器的高度。
对齐内容：
设置交叉轴上的子元素排列方式（多行）只能用于子项出现换行的情况（多行），在单行下是没有效果的。
值：
flex-start（默认值）：左对齐从头部开始如果主轴是 x 轴，则从左到右 flex-end：右对齐 从尾部开始排列 center：居中在主轴居中对齐（如果主轴是 x 轴则水平居中） space-between： 两端对齐，项目之间的间隔都相等 平分剩余空间 space-around： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。先两边贴边再平分剩余空间（重要） 类似于每个项目的 margin-left、margin-right 相等。

其他属性

柔性包装：
设置子元素是否换行
如果不设置换行，如果一行要满了，则项目的宽度会缩小。
默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面。
值：
nowrap：不换行;
包装：换行。
柔性流：
复合属性，相当于设置了 flex-direction 和 flex-wrap.
flex-flow: row wrap; = flex-direction: row; + flex-wrap: wrap;

设置 flex 项目

flex-grow：属性定义项目的放大比例，默认为 0 ，空间充足，等比例补全。
flex-shrink：定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小。
flex-basis：主轴排列为宽度，交叉轴排列为高度，设置 px ，默认值为 auto。
flex：综合上面的三个样式。flex 属性定义子项目分配剩余空间，用 flex 来表示占多少份数（fraction）。
如果不设每个项目(3 个)的宽度只设容器宽度，那么

/* 1 份 */
flex: 1;
/* 1 份 2 份 1 份 */
flex: 1;
flex: 2;
flex: 1;

align-self：flex 项目的对齐方式，控制子项自己在侧轴上的排列方式。
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch.
值：
自动灵活启动柔性端中心基线伸展
订单属性：
定义项目的排列顺序
数值越小，排列越靠前，默认为 0
注意：与 z-index 不一样

写 flex 布局的大概思路

将容器转换为 flex 容器。显示：柔性
先设置主轴方向（默认的） x 轴弹性方向：行; y 轴弯曲方向：列
设置主轴上子元素的排列方式(水平居中) 对齐内容：弹性开始/弹性结束/中心/间距/周围空间
设置侧轴上子元素的排列方式（垂直居中）单行找 align-items do行找 align-content （单行）对齐项目：弹性开始/弯曲结束/中心/拉伸（多行）前提是要换行 flex-wrap：wrap; 对齐内容：弹性开始/弯曲结束/中心/周围空间/间距/拉伸

结尾

希望这篇文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！

一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

浮动

display属性（改变元素的分类）

两个div在同一行显示

父级边框塌陷问题解决方案（清除浮动造成的不良影响）

定位（位置）

相对定位（相对）

固定定位（固定）

Z 索引

动画效果

动画属性（animation）

关键帧（定义动画）

停止动画效果

旋转唱片

弹性布局

flex 布局原理

基本概念

flex 容器中的默认效果

设置 flex 容器

关于主轴的属性

关于交叉轴的属性

其他属性

设置 flex 项目

写 flex 布局的大概思路

结尾

发送评论 编辑评论

发送评论编辑评论