css入门知识点总结三--布局+动画

凭栏听雨客

已于 2023-06-11 11:16:41 修改

阅读量888

点赞数

分类专栏：前端语言知识点文章标签： css 动画 css3

于 2022-02-28 00:19:45 首次发布

本文链接：https://blog.csdn.net/qq_43720551/article/details/123162053

版权

前端语言知识点专栏收录该内容

34 篇文章 1 订阅

订阅专栏

一、布局

1.多栏布局

语法

columns：<column-width> || <column-count>

列宽和列数
请添加图片描述
实现：

columns:150px 3;

列间距

列与列之间的距离

column-gap ：3em

请添加图片描述

列表边框

请添加图片描述
为了有效区分栏目之间的关系

column-rule:2px solid grey

column-rule-width
column-rule-style
column-rule-color

跨列设置，比如标题

请添加图片描述

/*默认是none*/
column-span:all;

2.盒模型

CSS中每一个元素都是一个盒模型，包括html和body标签元素。

块级元素：每个块级元素都从新的一行开始，并且其后的元素也另起一行. div h1 ul li table
内联元素特点：和其他元素都在一行上，不能够设置宽高,是由内容决定的。<span> a strong
元素的高度、宽度及顶部和底部边距不可设置；
内联元素a–>块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块状元素–>内联元素：

p{display: inline;}

行级块元素：多个元素占一行，而且可以设置宽高。

p{display: inline-block;}

display none的时候是隐藏了并且不占位置，如果隐藏了还想占位置，可以使用visibility：hidden.。

/*此元素不会被显示，当想要元素隐藏的时候可以使用此值。*/
 p {
        display:none;
    }

在盒子模型中最重要的就是 margin，border，padding，content(width和height）。

元素实际宽度公式如下：
请添加图片描述

两种盒子模型（重要）
box-sizing：content-box（default）和border-box
第一种设置的width是内容的width。
第二种设置的width是content的宽度+padding+border的宽度。
这两种盒子模型与margin都没有关系。

为盒子添加边框border

设置粗细，样式（点线、实线、虚线）红色。

 border:2px  solid  red;

为盒子设置下边框

{border-bottom:1px solid red;}

使用border-radius设置圆角

/*左上、右上、右下、左下 顺时针*/
{border-radius: 20px 10px 15px 30px;}

四个角都是一样的：

{ border-radius:10px;}

左上角和右下角圆角：

 {border-radius:10px 20px;}

一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。

padding设置盒子内边距

元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

使用margin为盒子设置外边距（边界）

元素与其它元素之间的距离可以使用边界（margin）来设置。

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

但是上下相邻的两个块元素相遇时，如果上面的元素有下外编剧margin-bottom，下面元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和，而是两者取最大值，这种现象称为外边距塌陷。

在自适应布局当中，在元素基础上添加内距padding，按照标准盒模型解析，往往会将布局撑破，但使用box-sizing的border-box值，可以让你轻松完成。

3.布局模型

流动模型（flow）

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）。

浮动模型（float）

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
如下代码可以实现两个div元素在一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

效果图
请添加图片描述
设置两个元素一左一右可以实现一行显示吗？当然可以：

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

请添加图片描述

层模型（layer）

如何让html元素在网页中精确定位:position

static

默认的

绝对定位（position：absolute）

这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如果想要相对于其他元素(而不是浏览器窗口）进行定位：
1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

相对定位（position：relative）

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。偏移前的位置还在，因此本来放在偏移前的位置后面或前面的东西的位置不变。

固定定位（position：fixed）

它的相对移动的坐标是视图（屏幕内的网页窗口）本身。无论页面如何滚动，都只能定位在同一位置，适合用于导航条，固定弹窗的布局。

z-index

如果有两个absolute元素，后定义的absolute元素会覆盖在新定义的上面，如果想要先定义的浮在上面则把z-index设置得大一点，默认值是0.

4.flex弹性模型

flexbox布局，用来提供一个更加有效的方式指定、调整和分布一个容器里的项目布局，即使他们的大小是未知的或者动态的。

Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小.

创建一个flex容器

display:flex;

flex需要添加在父元素上，改变子元素的排列顺序。可以把块级元素在一排显示，默认为从左往右依次排列,且和父元素左边没有间隙。

flex项目列/行（row, 默认）显示

 flex-direction: column;

Flex项目移动到顶部

如果主轴是垂直的方向，通过justify-content设置横轴的排列方向；如果主轴是水平的方向，通过align-items设置在纵轴的排列方向。

justify-content：

flex-start	flex-end	center	space-between	space-around
左	右	中心	两端对齐，项目之间的间隔都相等	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

space-between
请添加图片描述

space-around
请添加图片描述

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

请添加图片描述
align-items

flex-start	flex-end	center	baseline	stretch
上	下	中心	项目的第一行文字的基线对齐	如果项目未设置高度或设为auto，将占满整个容器的高度。

css样式设置小技巧—

水平居中设置

行内元素：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

div是文本元素的父元素
因此我们对div元素设置text-align:center

<style>
  .txtCenter{
    text-align:center;
  }
</style>

定宽块状元素
通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中.
定宽高实现盒子水平垂直居中—面试常考题

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

不定宽高实现盒子水平垂直居中 --面试常考题
通过定位+translate

 .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;

    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

二、变形和动画

彻底分清楚transform、transition、animations 三兄弟

1.变形transform

旋转 rotate（）

使元素相对原点中心旋转
正值：顺时针
负值：逆时针

transform: rotate(45deg);

扭曲 skew（）

transform:skew();

skewX(30°) x轴扭曲
skewY(10°)y轴扭曲
skew(30°，10°)x轴y轴同时扭曲

缩放 scale（）

transform:scale();

让元素根据中心原点对对象进行缩放。大于1是放大，0-1是缩小

scale(X,Y)使元素水平方向和垂直方向同时缩放
scaleX(x)元素仅水平方向缩放（X轴缩放）

请添加图片描述 - scaleY(y)元素仅垂直方向缩放（Y轴缩放）

位移 translate（）

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
在不知道自身高度时可以用

transform:translate();

向指定方向移动，右，下为正方向

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

transform-origin

任何一个元素都一个中心点，默认中心的X轴和Y轴的50%处。
请添加图片描述
top bottom left right 都是在边边的中心。

2. 动画transition

通过简单的事件触发元素的外观变化。比如通过点击鼠标、获得焦点、被点击或对元素任何改变中触发。并且通过动画效果改变css的属性值。

transition-property	transition-duration	transition-timing-function	transition-delay
color	动画效果持续实际时间	ease	在开始动画前的延迟时间，整个过渡在transition-delay后触发

transition-timing-function 请添加图片描述

div {
  width: 200px;
  height: 200px;
  /*在默认样式中声明元素的初始状态样式*/
  background-color:red;
  
  margin: 20px auto;
  /*在默认样式中添加过渡函数*/
  transition: background-color .5s ease .1s;
}
/*通过事件触发*/
div:hover {
/*声明过渡元素最终状态样式*/
  background-color: orange;
}

3. 动画animation

animation实现动画效果主要由两个部分组成：
首先，通过关键帧声明动画
然后，在animation属性中调用关键帧声明的动画。

关键帧 @keyframe

/*通过关键帧声明动画,0%==from,100%表示to*/
@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{

/*调用*/
  animation: wobble 5s ease .1s;
  
}

animation-name	animation-duration	animation-delay	animation-iteration-count	animation-play-state	animation-fill-mode
需要和keyframe的名字同，区分大小写	时间	开始执行动画之前等待的时间	定义动画的播放次数	控制元素的播放状态	定义动画开始之前和结束之后发生的操作。
none（缺省）	-	-	infinite（无限次数）	running、paused