0
点赞
收藏
分享

微信扫一扫

【WEB】CSS常用基础知识

无聊到学习 2022-02-10 阅读 129

CSS定义与注意事项

CSS

-了解-

层叠样式表,Cascading Style Sheets

注意事项

  • 每个CSS样式由两部分组成 选择符(器)声明

  • 声明由两部分组成 属性属性值

  • 声明必须放在花括号 {} 中(内部样式和外部样式),属性和属性值用 : `连接

  • 每条声明用 ; 结束

  • 当属性有多个属性值时,每个属性值用 空格 分开

  • 空格和换行不影响效果

    选择符{
        属性:属性值;
        属性:属性值;
    }
    

CSS引入方式

行内样式

<div style="width:200px;height:200px">内容</div>

行内样式就是写在html标签中的 style 属性中

内部样式

<head>
    <style>
        div{
            width:200px;
            height:200px;
        }
    </style>
</head>

内部样式是写在 head 标签中的,用 style 标签包裹

外部样式 其一

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式就是在 head 标签中,使用 link 标签链接外部CSS文件

外部样式 其二

-了解-

<head>
    <style>
        @import url(mystyle.css);
    </style>
</head>

使用@import引入css文件

CSS选择器

-重点-

标签选择器

<style>
        div{
            width:200px;
            height:200px;
        }
</style>

直接使用html标签

类选择器

<head>
    <style>
        .box{
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
  • html 标签中定义属性 class 并用 = 命名(假设为className)
  • html 存在多个className,则可以用空格连接
  • style 中使用 .className 引用
  • 当多个class中有重复的属性时,并且权重一样时,最终结果取最后的class的属性的属性值
  • 同样的class可以作用于多个 html 标签

id选择器

<head>
    <style>
        #box{
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
  • html 标签中定义属性 id 并用 = 命名(假设为idName)
  • 一个 html 标签中只能有一个id
  • style 中使用 #idName 引用
  • 同样的id可以作用于多个 html 标签,但是 强烈不建议 ,因为id的作用多数用于JaveScript的调用,需要保持 唯一性

通配符选择器

<head>
    <style>
        *{
            padding:0;
            margin:0;
        }
    </style>
</head>

* 引用,表示所有标签元素,一般用于初始化,去除所有标签的自带样式,有助于自定义CSS样式

群组选择器

<head>
    <style>
        div,.className,#idName{
            padding:0;
            margin:0;
        }
    </style>
</head>

群组选择器只是一种写法,是各种选择器用 , 拼接的写法,并不是一种真正的选择器

当一部分标签样式相同时,可以将这些标签的公共样式提取出来,用各自的选择符(标签选择器类选择器id选择器 等)用 , 拼接,一同作用样式

层级选择器

<div>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
</div>
  • html 是有层级关系的
  • div 内部的所有标签都是div的后代,同理 h3class="p2" 的既是 div 的后代也是 class="p1"p 标签的后代
  • class="p1"class="p3" 是兄弟关系
  • class="p1"class="p3"div 的子代(亲儿子)

后代选择器

<head>
    <style>
        div .className #idName{/*选择div标签内class为className的并且内部id为idName的标签*/
            padding:0;
            margin:0;
        }
        div p{ /*选在div标签下所有的p标签,不限制层级数量*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="className">
            <h3>
                <p id="idName"></p>
            </h3>
        </p>
    </div>
</body>
  • 当 html 标签存在层级关系时,我们一般把内侧的标签称作外侧标签的后代
  • 后代可以多层隔代,不用紧挨着,不像 子代选择器
  • 标签选择器,类选择器,id选择器可以混写
  • 当存在标签不好区分但是又要指定特定标签时,作用样式时可以用 后代选择器 根据层级关系可以用 空格 连接

子代选择器

<head>
    <style>
        div>p{ /*选在div标签下第一层级别p标签,class为p1
        和p3的标签*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
    </div>
</body>
  • 选择的是亲儿子(第一层级)
  • 用大于号 > 拼接

第一兄弟选择器

<head>
    <style>
        .p0+p{ /*选择class=p0的标签,它的兄弟中紧跟在它后
        面的第一个元素*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="p0">吼吼</p>
        <span>嘿嘿</span>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
        <p class="p4">嘻嘻</p>
    </div>
</body>
  • 选择的是紧跟着自己的第一个兄弟标签,不包含自己
  • 若紧跟自己的第一个标签并不是指定的标签,则样式无效,如例子中 class="p0" 的第一个兄弟是 span ,并不是指定的 p 标签,所以样式无效

所有兄弟选择器

<head>
    <style>
        .p0~p{ /*选择class=p0的标签,它的所有兄弟中为p标签的元素*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="p0">吼吼</p>
        <span>嘿嘿</span>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
        <p class="p4">嘻嘻</p>
    </div>
</body>
  • 选择的是自己后面的所有兄弟元素并且是指定标签,不包含自己
  • 例子中选择的是 class="p0" 的所有兄弟中为 p 标签的元素,并不包含自己和 span 标签

属性选择器

<head>
    <style>
        div{
            width: 100%;
            height: 50px;
        }
        [class]{ /*表示只要带有class属性的即可 */
            background-color: red;
        }
        [class][id]{/*表示同时带有class属性和id属性的 */
            background-color: darkcyan;
        }
        div[class]{ /*表示带有class属性的div即可 */
            background-color: rosybrown;
        }
        div [class]{ /*表示div标签的后代中带有class属性的 */
            background-color: yellow;
        }
        div[class="box2"]{ /*完全匹配,只有一个class且class为box2的div
            ,相当于div.box2*/
            background-color: darkorange;
        }
        div[class~="box2"] {/*只要带有class为box2的div就可以*/
            background-color: darkorchid;
        }
        [class^=b] { /*className以b开头的标签元素*/
            background-color: black;
        }
        [class$=b] { /*className以b结尾的标签元素*/
            background-color: black;
        }
        [class*=b] { /*className中包含b的标签元素*/
            background-color: black;
        }
       
    </style>
</head>
<body>
    <p class="p1"></p>
    <div class="box1">
        <div class="box2">
            <div class=box3></div>
        </div>
        <div id="box6"></div>
        <div class="box2 box4 box5"></div>
    </div>
</body>
  • 中括号 [] 表示
  • 可以多重限制,多个 [] 拼接
  • 注意空格,空格代表后代,无空格则表示并且(即上一点注释)
  • 针对标签所有属性都适用,如class,id,name等等

伪类选择器

状态伪类

<head>
    <style>
        a{
            color:red;
        }
        a:link{ /* 初始状态 */
            color:yellow;
        }
        a:visited{ /* 访问之后 */
            color: red;
        }
        a:hover{ /* 鼠标划过或停留 */
            color:orange;
        }
        a:active{ /* 点击激活 */
            color:green;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
  • 写作方式 :伪类
  • 常用于 <a> 标签,但是也可用于其他标签,不限制
  • 如果使用这四个伪类,可以有缺少某一个活多个伪类,但是顺序不能变
  • 一般情况下设置完 <a> 标签自己的属性后,通常只使用 :hover 这个伪类

结构伪类

<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 940px;
            height: 100px;
            margin:0 auto;
            background:yellow;
        }

        .box div{
            float:left;
            width: 300px;
            height: 100px;
            background: red; 
            margin-right: 20px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .box div div{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
        }
        .box div:last-child{ /*选择className为box的后代元素中每个层级为div标签的最后一个元素*/
            margin-right: 0;
            background-color: aqua;
        }
        
    </style>
</head>
<body>
        <div class="box">
            <div></div>
            <div></div>
            <div class="box2">
                <div></div>
                <div class="box3"></div>
            </div>
        </div>
</body>
  • 通过html的元素标签的结构来进行样式的一种方式
  • 用于要选择标签,不会作用于父类
  • 逐层查找,如例子中,第一层级中 class=box2 的div会被作用伪类,再往内部层级中 class=box3 的div会被作用伪类

:only-child 只有一个子元素的元素

:empty 没有后代元素同时没有内容(包括空格和换行)

:root 选择根目录,代指HTML

伪元素选择器

::after

<head>
    <style>
        p::after {
            content:"- say";
            background-color:yellow;
            color:red;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p>I am a duck</p>
    <p>I live in Duckburg.</p>
</body>
  • 在被选元素的内容后面插入内容
  • 使用 content 属性来指定要插入的内容

::before

<head>
    <style>
        p::before {
            content:"- say";
            background-color:yellow;
            color:red;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p>I am a duck</p>
    <p>I live in Duckburg.</p>
</body>
  • 在被选元素的内容前面插入内容
  • 使用 content 属性来指定要插入的内容

::first-letter

<head>
    <style>
        p:first-letter { 
            font-size:200%;
            color:#8A2BE2;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Homepage</h1>
    <p>My name is Donald.</p>
    <p>I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>
</body>
  • 选择元素标签的首字母,并为其设置样式

::first-line

<head>
    <style>
        p:first-line { 
            font-size:200%;
            color:#8A2BE2;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Homepage</h1>
    <p>My name is Donald.</p>
    <p>I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>
</body>
  • 选择元素标签的首行,并为其设置样式

UI元素伪类选择器

  • 说白了就是某个标签在什么状态时,我们要它怎么样
  • 常用于 form 表单
  • 通常使用 appearance:none 去掉默认样式,比如 type=checkbox 时,会受到默认样式的影响,自定义样式会被覆盖

否定选择器

<head>
    <style>
        :not(p) { /*不是p标签的其他*/
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Homepage</h1>
    <p>My name is Donald.</p>
    <p>I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>
</body>
  • 写法 :not(s) ,s代指要否定的属性/类/id/元素标签等

选择器的权重

一般情况下选择器的权重用四位数 0 0 0 0 表示

  • 样式冲突时候,权重高的覆盖权重低的
  • 权重相同时,按照就近原则

属性

文本属性

font-size 文本大小

font-family 字体

color 字体颜色

font-weight 加粗

font-style 倾斜

text-align 文本水平对齐

line-height 行高

letter-spacing 字符间距

word-spacing 单词间距

text-indent 首行缩进

text-decoration 文本线修饰

text-transform 英文大小写转换

text-shadow 文本阴影

<style>
       div{
           text-shadow: 0px -10px 1px red, 0px 10px 1px yellow;
           /* text-shadow: 0px 10px 1px yellow; */
       }

</style>

font 文本属性复合写法

列表属性

list-style-type 列表样式

list-style-image 将图片设置为列表样式

list-style-position 列表样式标记位置

list-style 复合写法

背景属性

background-color 背景色

background-image:url() 背景图片

background-repeat 平铺效果

background-position 背景图片位置

background-size 背景大小

background-attachment 背景图片固定

background 复合写法

浮动

<head>
    <style>
        p { 
            width:200px;
            height:200px;
            background-color: #ff0000;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Homepage</h1>
    <p>My name is Donald.</p>
    <p>I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>
</body>
  • 使独占一行的元素能够在一行显示
  • 浮动会脱离文档流
  • 浮动后,元素内的文字会产生文字环绕的效果

清除浮动

  • 给浮动元素的父类定义同样的高度
  • 给浮动元素的父类的兄弟使用clear
  • 给浮动元素增加一个空兄弟并使用clear
  • 给浮动元素的父类使用overflow:hidden
  • 万能清楚浮动
  • <style>
        div::after{
              content: "";
              clear: both;
              display: block;
              width: 0;
              height: 0;
              visibility: hidden;
          }
    </style>
          
    

盒模型

盒子的宽高由三部分组成

盒子宽高 = 内容宽高 + 内边距 + 边框宽度

内边距

padding 内容和边框之间的距离,不支持负值

边框

border 边框

border-width 边框宽度

border-style 边框样式

border-color 边框颜色

border-radius 边框圆角

支持多值写法

支持水平垂直分别设置长度而产生弧度

将盒子变成圆

复合写法 border:width style color

border 设置为空是0,不是none

外边距

margin 盒子和其他元素的距离,可以负值

margin:0 auto 在屏幕横向居中

img标签特性

<img> 属于行内块元素,初始化margin和padding都设置为0,对此标签作用无效,在和其他标签配合时会产生间距,使用 display:block 转化为块元素即可。

box-sizing

正常情况下,盒子在设置宽高之后,再增加padding或border则需要重新计算内容宽高,否则盒子的总宽高就会改变

盒子阴影

box-shadow

溢出属性

overflow 对于溢出边界的内容如何解决

空余空间

white-space 规定文本显示方式

多余文本显示省略号

 <style>
        div{
            background:yellow;
            width: 200px;
            height: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>
  • 必须设置宽度
  • 必须 white-space: nowrap
  • 必须 overflow:hidden
  • text-overflow:ellipsis(省略号) | clip(不显示省略号)

元素类型转换

display

定位

position

通常会用到“子绝父相”的原则,即子类绝对定位,父类相对定位

使用 top | right | bottom | left 产生position的位置

使用position设置三角号

<style>
    span{
            width: 0;
            height: 0;
            display: inline-block;
            border:5px solid transparent;
            border-top:5px solid black;
            position: relative;
            top:2.5px;
        }
</style>

水平垂直居中

<style>
      /*子绝父相*/
      .box{
          position:relative;
      }
      .box div{ 
          position:absolute;
          top:50%;
          right:50%;
          margin-left:-width/2;
          margin-top:-height/2;
      }
</style>
  • 若针对浏览器,则不需要设置相对定位
  • 子绝父相是相对于子类在父类的位置

定位于浮动区别

  • 浮动是半脱离文档流,会产生文字环绕效果
  • 绝对定位是完全脱离文档流

行内元素变块元素

  1. display:block
  2. position:absolute
  3. float

透明度

opacity

隐藏滚动条

<style>
    ::-webkit-scrollbar {
            display: none;
    }
</style>

锚点

使用<a>标签实现页面不同区域的跳转

<ul>
    <li>
        <a href="#a">A page</a>
    </li>
    <li>
        <a href="#b">B page</a>
    </li>
    <li>
        <a href="#c">C page</a>
    </li>
    <li>
        <a href="#d">D page</a>
    </li>
</ul>

<div id="a"> 
    a page
</div>
<div id="b">
    b page
</div>
<div id="c">
    c page
</div>
<div id="d">
    d page
</div>
  • 通过某区域的 id 关联 <a> 标签的 href 属性

宽度自适应

适用块元素

<style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width: auto; /*不写或者 auto就是自适应*/
            height: 100px;
            padding-left: 100px;
            background:yellow;
        }
</style>

高度自适应

  • 父类高度在不设置的情况下,由内容撑起
  • 一般会设置 min-height 来保证基本布局的合理性和美观性

隐藏属性

  1. display:none 不占位隐藏
  2. visibility:hidden 占位隐藏

字体引入

<style>
        @font-face{
            font-family: fontName;
            src:url(font/ygyxsziti2.0.ttf);
        }
        div{
            font-family: fontName;
            font-size: 50px;
            color:red;
            text-shadow: 5px 0px 0px green;
        }
    </style>
  • 自定义foneName和字体路径
  • 使用 font-family 引用自定义的fontName

窗口自适应

常用于移动端

<head>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
        }
        .child1{
            background:blue;
            height: 50%;
        }
        .child2{
            background:red;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
  1. html,body { height: 100%; }
  2. 元素 { width: 100%; height: 100%; }

动态计算函数-calc( )

width:calc(100% - 20px);

支持 + - * /,遵循运算优先级

弹性盒

适用移动端布局

给父类设置 display:flex

<head>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border:2px solid black;
            margin:100px auto;
            display: flex;/* 弹性盒 */
        }
        .box span{
            width: 100px;
            height: 100px;
            border:1px dashed red;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1111</span>
        <span>2222</span>
        <span>3333</span>
        <span>4444</span>
    </div>
</body>
  • 子元素默认横向排列
  • 行内元素变成了块级元素
  • 只有一个元素的时候,margin:auto 自动居中

弹性盒轴

默认水平向右是主轴,垂直向下是侧轴

更改弹性盒主轴

flex-direction

column 纵向 | column-reverse 纵向反向

容器和项目定义

弹性盒叫容器,内部元素叫项目

弹性容器

主轴对齐方式

justify-content

侧轴对齐方式

align-item

弹性盒折行

默认情况下项目过多,会互相挤压

flex-warp:warp; 产生折行

行间距

align-content

弹性项目

在侧轴上的对齐方式

align-self

调整项目顺序

order

剩余空间

flex

  • 当存在多个项目时,例如box1,box2,box3
    • box1,box2设置width或者height,box3设置flex任意值时,box1和2受宽高影响,box3占满剩余空间
    • 当均设置width或者height,但是同时设置flex时,width或者height失效,根据各自flex值按照比例分配所有空间

挤压空间

flex-shrink

数值型

移动端布局

移动端布局三种方式

  1. 百分比
  2. 弹性盒
  3. rem布局

移动端必备标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

width

initial-scale

user-scalable

分辨率

  1. 开发者模式下的移动端像素是CSS像素,即常使用的px单位
  2. 手机出厂的分辨率是物理分辨率,是设备真正的像素
  3. 在web上,设计图是1px,则代码写1px,但是在移动端,是不一定的,需要转化

浅谈css像素与物理像素

常用单位

px与em与rem

px 像素

em 相对于父元素的字体大小,总是找父元素来定义自己的值

rem 相对于根元素html的字体大小,常用移动端布局

vw和vh

vh view-height

vw view-width

多列布局

多数使用于 瀑布流

<head>
    <style>
        .box{
            column-count: 5;
            /* 设置显示列数 */
        }
        .box img {
            width: 100%;
        }
        .box div{
            border:3px solid green;
            padding:5px;
            margin-bottom: 10px;
            break-inside: avoid;
            /* 禁止盒子内部折行 */
        }
        .box div p {
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="images/1.jpg" alt="">
            <p>title</p>
        </div>
        <div>
            <img src="images/2.jpg" alt="">
            <p>title</p>
        </div>
        <div>
            <img src="images/3.jpg" alt="">
            <p>title</p>
        </div>
        .
        .
        .
        .
        .
        .
    
    </div>
</body>

column-gap 列间距

column-rule 列边框

column-span 跨列

break-inside 设置盒子内部中断(折行)效果

网格布局

display:grid

会将元素变成块级元素

将容器划分为行和列并产生单元格

网格线:网格线的划分用于跨行跨列

  • 要记住网格线的编号

容器属性

行与列的宽度

grid-template-rows 行宽度

grid-template-columns 列宽度

<head>
    <style>
        div.box{
            width: 600px;
            height: 600px;
            border:5px solid gray;
            display: grid;

            /* 1 固定值 */
            grid-template-rows: 200px 200px  200px;
            grid-template-columns: 200px 200px  200px;

            /* 2 百分比 */
            grid-template-rows: 33.3% 33.3% 33.4% ;
            grid-template-columns: 33.3% 33.3% 33.4% ;

            /* 3 repeat */
            grid-template-rows: repeat(3,33.33%);
            grid-template-columns: repeat(3,33.33%);

            /* 4. repeate autofill */
            grid-template-rows: repeat(auto-fill,200px);
            grid-template-columns: repeat(auto-fill,20%);
        
            /* 5. fr 片段 */
            grid-template-rows: 1fr 2fr  1fr;
            grid-template-columns: 1fr 2fr  1fr;
        
            /* 6. minmax */
            grid-template-rows: minmax(100px,200px)  200px 100px;
            grid-template-columns: 200px  200px 200px;

            /* 7 auto */
            grid-template-rows: 100px  200px auto;
            grid-template-columns: 100px  200px auto;
        }
    </style>
</head>
<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>
</body>

auto-fill

fr片段

minmax取值

auto自动占满剩余空间

行/列间距

grid-row-gap 行间距

grid-column-gap 列间距

grid-gap 复合写法

合并单元格

grid-template-area 划分区域

grid-area 指定区域

<head>
    <style>
        .box {
            width: 600px;
            height: 600px;
            /* background:red; */
            display: grid;
            border: 5px solid gray;

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

            grid-template-areas: 'a e e'
                                 'a e e'
                                 'g h i' 
            ;
        }
        .box div{
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }
        .box div:nth-child(1){
            grid-area:g;
        }
        .box div:nth-child(2){
            grid-area:e;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>7</div>
    </div>
</body>
  1. 通过 grid-template-rows grid-template-columns 指定单元格数量和宽度
  2. 通过 grid-template-area 划分区域
  3. 通过给项目用 grid-area 指定区域

对齐方式

项目在容器中的排列方向

grid-auto-flow

column

单元格在容器中的对齐方式

当单元格设置的宽度不能完全占用容器时

<head>
    <style>
        .box{
            width: 600px;
            height: 600px;
            border:5px solid gray;
            display: grid;
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3,100px);
            justify-content: space-around;
            align-content: center;
        }
    </style>
</head>
<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>
</body>

justify-content 横向对齐方式

align-content 纵向对齐方式

place-content 复合写法,align | justify

  • place-content:space-evenly center

space-around

space-between

center

start

end

项目在单元格中的对齐方式

<head>
    <style>
        .box{
            width: 600px;
            height: 600px;
            /* background:red; */
            border:5px solid gray;
            display: grid;
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3,100px);
            place-content: center center;
            justify-items: center;
            align-items:center;
        }

        .box div{
            border:1px solid green;
            width: 50px;
            height: 50px;
        }

       
    </style>
</head>
<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>
</body>

justify-items 单元格内横向对齐方式

align-items 纵向对齐方式

place-items 复合写法,align justify

  • place-items:start center

center

start

end

项目属性

合并单元格

通过网格线合并单元格

grid-row-start 起始网格线编号

grid-row-end 终止网格线编号

grid-row 复合写法,起始/终止

gird-column-start 起始网格线编号

grid-column-end 终止网格线编号

grid-column 复合写法,起始/终止

响应式布局

适用于展示性的页面,不适合电商等页面,效率低下

<style>
     @media screen and (max-width:1000px) and (min-width:500px){
            body{
                background:red;
            }
        }
</style>

逻辑关键字

一些限制常用属性

min-height 最小高度

max-height 最大高度

min-width 最小宽度

max-width 最大宽度

orientation 屏幕方向

常用断点

320px(主) | 480px(次) | 640px(次) | 720px(主) | 768px(次) | 1024px(主)

rem布局

<style>
        *{
            margin:0;
            padding:0;
        }
        html{
            /*基准font-size*/
            font-size: 100px;
        }      
</style>
<script>
        //font-size 计算  px
        document.documentElement.style.fontSize=document.documentElement.clientWidth/750 * 100 +'px'

        //font-size 计算  vw 
        document.documentElement.style.fontSize=100/750 * 100 +'vw'
</script>
  1. 设置html根目录 基准font-size
  2. 设置 script 代码两种方式
    • 动态获得 px
    • 动态获得 vw

渐变函数

线性渐变

background/background-image:linear-gradient(direction, color-stop1, color-stop2, ...)

color:渐变的终止颜色,支持多颜色渐变,并且支持百分比,一般书写方式是 color percent,用空格连接

<head>
    <style>
        div{
            width: 500px;
            height: 500px;
            border:10px solid gray;
            background:linear-gradient(red 10%,yellow 10% ,yellow 30%,green 30%);
        }
    </style>
</head>
<body>
    <div></div>
</body>

径向渐变

background/background-image:radial-gradient(shape size at position,color-stop1,color-stop2, ...)

英文写法

shape:径向渐变形状,但是受外部盒子形状的影响,如果是circle情况下,外部盒子需要是正方形

size:定义渐变的结束原则

color 渐变的终止颜色,支持多颜色渐变,并且支持百分比,一般书写方式是 color percent,用空格连接

<head>
    <style>
        div{
            width: 500px;
            height: 500px;
            border:10px solid gray;
            background-image: radial-gradient(circle farthest-side at 60% 55%, blue, green, yellow, black);
        }
    </style>
</head>
<body>
    <div></div>
</body>

重复渐变

repeating-linear/radial-gradient(......)

动画过渡

transition:被执行动画的标签属性 动画持续时间 时间曲线 延迟时间;
多个动画可以用逗号隔开

设置单个transition

动画属性

transform

支持多动画,各个动画之间用空格相连,一般一定是先做位移再做其他动画

实现过渡动画可以配合transition,否则动画就比较跳跃

坐标系


X、Z轴顺时针为正,Y轴逆时针为正

2D/3D平台

transform-style

3D景深

perspective:800/900px

一般设置为800px或者900px景深度

改变中心位置

transform-origin:(x,y,z)

z:为3d属性时使用,px

x:left | center | right | px | %

y:top | center | bottom | px | %

3D效果必备属性

transform-style:preserve-3d

perspective:800px

位移动画

  1. 2D位移

    translate(X,Y)

    • translateX(px)
    • translateY(px)
  2. 3D位移

    translateZ(px)

  3. 复合写法
    translate3d(X,Y,Z)

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:red;
            transition:all 2s;/*过渡动画*/
            transform: translateX(50px);/*初始就移动一定的位移*/
        }
        div:hover{
            transform: translate(100px,100px);/*产生动画的最后效果*/
        }
    </style>
</head>
<body>
    <div></div>
</body>

缩放

  1. 2D缩放

    scale(倍数)

    • scaleX()
    • scaleY()
  2. 3D缩放

    scaleZ(倍数)

  3. 复合写法
    scale3d(x,y,z)

旋转

  1. 2D旋转

    rotate(deg)

    • rotateZ() 默认
  2. 3D旋转

    rotateX()

    rotateY()

  3. 复合写法

    rotate3d(x,y,z,deg)

    x,y,z取值0-1,根据deg的数值相乘得到最终旋转效果

倾斜

skew(xdeg,ydeg)

  • skewX() 右下角往右边拉动
  • skewY() 右下角往下边拉动

关键帧动画

animation:动画名称 持续时间 时间曲线 重复次数

时间曲线 请参照 动画过渡

声明动画

  1. from和to

     <head>
         <style>
             div{
                 width: 200px;
                 height: 200px;
                 background:red;
                 animation: whchange 2s linear infinite;
                 /* infinite 无限次 */
             }
    
             /* 声明动画 */
             @keyframes whchange {
                 from{
                     width: 200px;
                     height: 200px;
                     background:red;
                 }
    
                 to{
                     width: 400px;
                     height: 600px;
                     background:green;
                 }
             }
         </style>
     </head>
     <body>
         <div></div>
     </body>
    

    格式

     @keyframes 动画名称{
         from{
             属性初始值
         }
         to{
             属性终止值
         }
     }
     
  2. 百分比

     <head>
         <style>
             div{
                 width: 200px;
                 height: 200px;
                 background:red;
                 animation: whchange 2s linear infinite;
                 /* infinite 无限次 */
             }
    
             /* 声明动画 */
             @keyframes whchange {
             0%{
                 transform: translateX(0);
             }
             5%{
                 transform: translateX(-640px);
             }
    
             25%{
                 transform: translateX(-640px);
             }
    
             30%{
                 transform: translateX(-1280px);
             }
    
             50%{
                 transform: translateX(-1280px);
             }
    
             55%{
                 transform: translateX(-1920px);
             }
    
             75%{
                 transform: translateX(-1920px);
             }
    
             80%{
                 transform: translateX(-2560px);
             }
    
             100%{
                 transform: translateX(-2560px);
             }
         }
         </style>
     </head>
     <body>
         <div></div>
     </body>
    

    格式

     @keyframes 动画名称{
         0%{
             属性
         }
         10%{
             属性
         }
         .
         .
         .
         100%{
             属性
         }
     }
     

关键帧动画单一属性

animation-direction:动画运行状态

animation-fill-mode:动画停止状态

逐帧动画

animation: run 5s steps(1,end);

帧状态

  1. end

    保留当前帧,直到动画结束

    当前帧就是正在播放的这一帧,刚开始的帧是0%,当动画进行到最后刚进入100%时候,表示动画已经结束,所以100%这一阵会以肉眼捕捉不到的速度播放过去,回到0%这一帧,所以此值时看不到最后一帧的

    可以增加 forwards 保留最后一帧

  2. start

    保留下一帧,直到动画结束

    保留下一帧导致0%会以很快的速度过去,看不到第一帧

    可以在100%后循环第一帧0%,这样就全部看到了

举报

相关推荐

CSS 基础知识

CSS基础知识

CSS 基础知识-01

CSS基础知识(一)

css基础知识1

CSS基础知识复习

Web前端基础知识

Oracle常用基础知识

0 条评论