随堂总结

最新推荐文章于 2023-08-11 16:54:09 发布

Red youth

最新推荐文章于 2023-08-11 16:54:09 发布

阅读量269

点赞数

分类专栏： html 入门基础文章标签： html

本文链接：https://blog.csdn.net/NNNNNNI/article/details/127063228

版权

入门同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

基础

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

随堂一

表单

form:创建表单

语法：

  <form action="#" method="GET"></form>

action属性: url路径，将表单提交至哪里。

method属性：指定表单提交数据的方式。 GET / POST

input ：定义输入框，按钮

语法：

 <input type="submit">

type：核心属性，值不同对应input的功能，样式都会发生相对应的改变。

text：文本输入框。

password：密码输入框，输入内容将会被掩码。

checkbox：复选框。

radio：单选框。

button：定义可点击的按钮。

submit：自动提交按钮。

reset：重置按钮，会清空 form表单数据。

HTML属性 name ：定义input名字。 value ：定义input的值。 placeholder ： input输入框的提示语“只能用在输入框”。 autofocus : 自动成为输入焦点 autocomplete ：是否启用自动完成功能，on开启"默认值"，off关闭。 required ：输入框的字段是必填的。 readonly ：只读模式。 disabled ：禁用一个input。

<input type="text" name="user" value="111" placeholder="电视 家电"autofocus autocomplete="off" required readonly
            disabled>

value讲解 input标签的value属性的作用是由input标签type属性的值决定的。

当type值为 button，reset，submit中的其中一个时，value的值表示按钮上的文本描述。
当type值为 text，password，hidden中的其中一个时，value的值表示输入框中的初始值，初始值可以更改在提交表单的时候可以把value属性的值发送给服务器（即是初始值，也是提交至服务器的值）。
当type值为 checkbox，radio中的其中一个时，value的值表示提交给服务器的值“携带的数据”,或者复选框被勾选的状态，默认为on。
当type值为 image, value的值表示用户的点击位置“鼠标位于图片的x和Y坐标”并提交给服务器。

name讲解 name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过JS引用表单数据. 只有设置了name属性的表单元素才能在提交表单的时候传递它们的值，因为服务器端获取表单数据通过元素的name属性的值而得到的，没有name属性就无法得到表单元素提交给服务器的值。

获得焦点

语法：

<label for="user">user</label>
<input type="text" id="user" value="921024317">

label：给input添加标注。扩大input的使用范围。

作用：label的for值与input的ID值一致，点击label会让input获取焦点。

fieldset

将表单内的元素进行分组，会产生一个边框。

legend : 为fieldset元素定义标题

   <fieldset>

       <legend>定义标签：</legend>

  </fieldset>

下拉菜单

select：定义下拉菜单

multiple属性：规定输入字段可以选择多个值

optgroup ：定义下拉菜单的选项组。

label属性：添加选项组的描述

option ：定义列表中的一个选项内容

selected属性：在页面加载的时候预先选中的选项。

 <select name="skill" id="skill">
            
            <optgroup label="客户">
               
                <option value="">帮助中心</option>
                <option value="">售后服务</option
                <option value="" selected>在线客服</option>
            </optgroup>
            <optgroup label="商户">
                <option value="">合作招商</option>
                <option value="">学习中心</option>
            </optgroup>
        </select

清除下拉列表右侧的小箭头

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

textarea

textarea：定义多行文本输入，文本区域可以容纳无限量的文本

cols：定义文本区域的宽，容纳的字符数量

rows：定义文本的高，容纳文本的字符数量

<textarea name="" id="" cols="30" rows="10"></textarea>

调整文本输入框的宽高

resize ：规定用户是否可以调整元素的大小

auto：允许用户调整元素。

none：不允许用户调整。

horizontal:允许用户调整宽度。

vertical :允许用户调整高度

语法

textarea{
   resize:auto
}

注意：当元素宽高由clos/rows设置，字体大小会影响元素大小

表格

table：表格定义标签
thead：头部
tbody：身体
tfooter：底部
tr：行
th：头单元格
td：标准单元格

注意：
1. 设置table元素的大小会影响单元格宽高尽量不设置
2. th单元格默认文本加粗，水平居中
3. 设置某单元格的大小会影响一行/一列的单元格大小

表格合并

colspan：跨列合并
rowspan：跨行合并

表格的边框合并

设置单元格之间的间距，默认为2px ，0没有，1有*/

border-spacing: 0;
- 设置单元格边框是否合并 separate不合并，collapse合并
border-collapse: collapse;

流式布局

流式布局：

默认的：根据元素的特性，从上至下，从左至右排列。

重要：

1. 元素特点：布局方式

块元素：div，p ，独占一行，多个块级元素从上至下排列，设置任何的css样式均有效。

行内元素：span，a，img 多个元素按照从左至右的顺序排列，设置宽高无效，margin上下无效。

行内块：input ，多个元素按照从左至右的顺序排列，设置宽高margin均有效。

元素的转换：display: block, inline, inline-block;

盒子

盒子模型：content + padding + border + margin

content ：元素的宽高。

content ：内边距，调整边框到内容之间的距离 “撑大盒子”。

border ：边框，撑大盒子。

margin ：外边距，从自身边框开始到另一个元素边框之间的间距“垂直方向，margin的合并问题”,水平方向从自身到另个元素margin之间的距离，没有margin合并。

盒子的塌陷

margin穿透问题：“第一个子元素的上margin和最后一个元素的下margin会穿透父元素”。

会造成父盒子塌陷问题，

解决方案三个：

1. overflow: hidden; (推荐，溢出内容的部分会隐藏)

2. padding：0.1px; (值不小于等于0即可)

3. border:1px solid; (麻烦)

盒子分成两种：

content-box 标准盒子(元素大小 = content + padding + border)

border-box 怪异盒子(元素大小 = content(content + padding + border) )

随堂二

选择器

标准选择器

标签选择器
类名选择器
id选择器
通配符选择器

复合选择器

后代选择器

<style>
    /* 把ol的li改成红色*/
    ol li{
        list-style:none;
        color:red;
        
}
    /* 把ol的a改成blue*/
    ol li a{
        color:blue;
    }
</style>
<body>
    <ol>
       <li>ol的孩子</li>
       <li>ol的孩子</li>
       <li>ol的孩子</li>
       <li><a href "#">ol的孙子</a></li>
    </ol>
    <ul>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
    </ul>
</body>

元素ol 和元素li 中间用空格隔开
元素li可以是儿子也可以是孙子

子代选择器

<style>
    div>a{
        
    }
</style>
<body>
    <div>
        <a href= "#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

元素div和元素a 用> 隔开
元素a必须是元素div儿子级的其他的不归他管

并集选择器

<style>
    /* 把鸡狗改成红色 */
    div,p{
        color:red;
    }
    /* 把鸡狗改成红色 小猪一家改红色*/
    div,p,.pig li{
        color:red;
    }
</style>
<body>
    <div>
        鸡
    </div>
    <p>
        狗
    </p>
    <span> 兔</span>
    <ul class="pig">
        <li>小猪</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

并集选择器可以多组标签
元素用英文逗号隔开

伪类选择器

超链接伪类

a:link：选择所有未被访问的链接

a:visited：选择所有已被访问的链接

a:hover：选择鼠标位于其上的链接

a:active：选择活动链接

<style>
    /* 未访问的链接*/
    a:link{
        color:#333;
    }
    /*访问过的链接*/
    a:visited{
        color:red;
    }
    /* 选择鼠标经过的那个链接*/
    a:hover{
        color:blue;
    }
    /* 选择是我们的鼠标按下还没有弹起的链接*/
    a:active{
        color:#369;
    }
</style>
<doby>
    <a href="#">链接</a>
</doby>

为了确保生效，清按照LVHA的顺序声明:link :visited :hover :active.

:focus ：伪类选择器用于选取获得焦点元素

<style>
    /*获得光标的input表单元素选取出来*/
    input:focus{
        background-color: red;
        color: blue;
    }
</style>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

UI伪类

input:enabled：选择元素启用后的状态

input:disabled：选择被禁用的input元素

input:focus：input获取输入焦点后的状态

input:checked：选择被选中的input元素（使用与checkbox，radio，option）

伪元素选择器

伪元素选择器：

简称：伪元素，相当于创建了一个html元素。

伪类选择器和伪元素选择器的区别：

前缀不同，伪类: ，伪元素:: 。
伪类用于向选择器添加特殊的效果。伪元素将特殊的效果添加到某些元素上进行操作。

::berfore 增加前缀
::after 增加后缀
:: fist-letter 第一行第一个文本
::first-line 第一行
::-webkit-input-placeholder 设置input元素内的placeholder属性的文本
::selection 用户选中的文本内容

描点

特点：像迅速定位器，可以迅速找到与之绑定的元素

使用方式：a标签的href和元素的id值绑定

作用：当点击某一个a可以迅速找到与之帮等的元素

语法

<body>
    <ul>
        <li><a href="#box1">1</a></li>
        <li><a href="#box2">2</a></li>
        <li><a href="#box3">3</a></li>
        <li><a href="#box4">4</a></li>
    </ul>
    <div id="box1" style="background-color: purple;">1</div>
    <div id="box2" style="background-color: olive;">2</div>
    <div id="box3" style="background-color: orangered;">3</div>
    <div id="box4" style="background-color: orchid;">4</div>
</body>

随堂三

基线对齐

基线：多个元素水平方向排列，元素的垂直方向按照基线进行对齐。

基线：空块或图片默认的基线在底部，文本元素基线在四线三格的第三线“文本的中下部分”。

解决方案：vertical-align: middle“基线调整至中线” top“基线调整至顶部” bottom“基线调整至底部” baseline“四线三格的第三线”;

使用场景：1.流式布局中元素一行排列。 2.图片和文本在一行排列，不对齐问题。

雪碧图

什么是雪碧图：也叫精灵图

就是将很多个图片放置到一个大的图片上面，精灵图主要是当做背景图使用的。

之所以要将多个图片放到一张大图上，是因为很多时候我们的背景图片都是放在服务器上的，当需要使用某个图片时需要向服务器发送请求资源，如果图片过多服务器压力会比较大，所以精灵图可以减轻服务器压力。

使用方式：背景插入

背景插入：background-image: url();

背景图片的位置 background-position:-100% 100%；

1.关键字取值

2.百分比取值

3.像素取值

方式一：跟距图片的大小设置精灵图片的大小

默认背景图平铺

x为正值，显示的是左侧拼接的图片“Y轴同理”

查找某个精灵图：遵循正值“倒着找”，负值“正着找

方式二：窗口的大小给定情况。

原理：设置显示范围的固定大小，设置背景图的大小符合一张小图的显示宽高即可

隐藏显示

隐藏

隐藏，清除元素。隐藏后不占据原来的位置。

display: none;

隐藏元素：隐藏后还占据原来的位置。

visibility: hidden;

设置元素的透视度，取值范围0-1，0为完全透视，1为完全不透视。

opacity: 0;

显示

配合display none; 作为显示元素使用“值是除了none以外的任何一个均可

display: block;

配合 visibility: hidden; 显示元素

visibility: visible;

配合opacity: 0; 作为显示元素使用

opacity: 1;

tooltip

toopltip：提示工具在鼠标移动到指定的元素后触发

代码实现

 <style>
        .tooltip {
            display: inline-block;
            border: 1px solid #000000;
            border-radius: 10px;
            padding: 5px;
        }
        .tooltiptext {
            width: 80px;
            background-color: olive;
            padding: 5px;
            border-radius: 6px;
            position: absolute;
            top: 50px;
            left: 100px;
            visibility: hidden;
        }
        /* 鼠标移入到元素后显示提示 */
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
</head>

<body>
    <div class="tooltip">鼠标移动到这
        <span class="tooltiptext">提示文本</span>
    </div>
</body>

定位

定位的由来，将盒子定在某一位置上，所以定位也是摆放盒子，按照定位的方式移动盒子

定位的组成：定位=定位模式+边偏移

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

定位模式他是通过css的position属性来设置的，值可以分为五个：static静态定位

relative相对定位，absoulute 绝对定位，fixed固定定位，sticky 粘性定位

边偏移：定位的盒子移动到最终位置。有top.bottom.left.right四个属性

静态定位（了解）static

是元素默认的定位方式，简单理解无定位的意思

静态定位按照标准流特性摆放位置，它是没有偏移的

相对定位：position:relative

1.他是相对于子级原来的位置来移动的

（移动位置的时候参照点是原来的位置）

2.原来在标准流位置继续占有，后面的盒子依然

以标准流方式对他（不脱离文档流，继续保留

原来的位置）

绝对定位： positive:absolut

1.如果没有祖先元素或者祖先元素没有定位

择以浏览器为准定位

2.如果这个父元素有定位（相对.绝对.固定）

则以最近一级的有定位的祖先元素为参考点移动位置

3.不占有原来的位置（脱离文档流，不保留原来位置）

相对定位和绝对定位倒是有什么使用场景

子绝夫相：子级使用绝对定位，父级则需要使用相对定位

子绝：子级用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，

不会影响盒子里的其他兄弟

父相：父盒子布局时，需要占有位置，因此父亲只能是相对定位

总结：因为父级需要占有位置，因此是相对定位，

子盒子不需要占有位置，则使用绝对定位

子绝父相不是永远不变的，也可以子绝父绝，子绝父固，子绝父粘

固定定位：positive:fixed

固定定位使用场景：可以在浏览器页面滚动时

元素的位置不会改变

特点1.以浏览器的可视窗口为参照点移动元素。跟父元素

没有任何关系，不随滚动条滚动

特点2.固定定位不占有原先位置（脱离文档流）

粘性定位：positive:sticky

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

特点2.占有原先的位置不脱离文档流（相对定位）

特点3.必须添加top.left.bottom.right.其中一个才有效果

随堂四

浮动

浮动：让元素按照指定的方向进行运动，直到遇到父级元素的边界停下。

特点：

1.元素使用浮动后，脱离文档流，在流式布局的上层显示。

2.文本和浮动元素相遇，文本会在其周围环绕停留“不被覆盖”。

3.多个浮动元素相遇，会按照“内联排列”方式在一行展示。

清除浮动：

1.父级元素定义height，解决父元素不能被浮动元素撑出高度问题，height要>=浮动元素“把浮动元素关起来”。

2.添加属性clear:both; 可以给浮动元素添加，或者两个浮动元素之间添加空块添加，让多个浮动元素不内联排列。

3.浮动元素的结尾处添加空块并设置clear:both;，会让父级后元素自动获取高度。

4.使用overflow；

清除浮动

元素设置浮动后会脱离文档流，会对流式布局或文本内容产生影响，所以要清除浮动“控制浮动元素”。

1.父级元素定height

原理：给父元素内块定义height，解决父元素因子元素浮动无法获取高度的情况。
优点：简单，代码少，容易掌控。
缺点：只适用于有固高的布局，父元素高度和浮动子元素的高度不同也会有影响。
建议：不建议使用，只建议有固高的布局使用。

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

3，父级div定义伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。 /清除浮动代码/ .clearfix:after{content:"";display:block;clear:both;visibility:hidden;height:0} .clearfix{zoom:1}

4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5，父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6，父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。

7，父级div定义 display:table

原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题。
建议：不推荐使用，只作了解。

8，结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both
建议：不推荐使用，只作了解。

随堂五

css同胞选择器，获取同级元素中的某个元素

不区分类型：

:first-child 匹配同级元素中的第一个元素。

:last-child 匹配同级元素中的最后一个元素。

:nth-child(n) 匹配指定的位置的同级元素，参数可以是number/even/odd

区分类型：

:first-of-type 匹配同级元素中的第一个元素。

:last-of-type 匹配同级元素中的最后一个元素。

:nth-of-type(n) 匹配指定的位置的同级元素，参数可以是number/even/odd

盒子阴影

语法

box-shadow: h-shadow v-shadow blur spreod color inset

h-shadow: 必需，水平阴影的位置，允许负值

v-shadow: 必需，垂直阴影的位置，允许负值

blur：可选。模糊距离

spreod：可选。阴影尺寸

color ：可选阴影的颜色，请参阅css颜色值

inset：可选，将外部阴影改为内部阴影

文本阴影

语法

text -shadow: h-shadow v-shadow blur spreod

h-shadow: 必需，水平阴影的位置，允许负值

v-shadow: 必需，垂直阴影的位置，允许负值

blur：可选。模糊距离

spreod：可选。阴影尺寸

背景渐变

线性渐变：linear-gradient() 默认颜色从上至下渐变

background: linear-gradient(pink, lemonchiffon, lightcyan, orange);

第一个参数：可以添加“to 方向” 控制渐变的方向。 “0-360deg”改变渐变的方向通过角度调整。

background: linear-gradient(120deg, pink, lemonchiffon, lightcyan, orange);

后面的参数：颜色，任意的数量(颜色后面跟“number + 单位”用来控制颜色的面积

background: linear-gradient(to right, pink 200px, lemonchiffon 60%, lightcyan, orange 85%);

重复线性渐变 repeating-linear-gradient()

background: repeating-linear-gradient(#000 0% 10%, red 10% 30%);

径向渐变：从中心动出发以椭圆形往外渐变，至最远的角落。

circle : 改变为圆形渐变。

background: radial-gradient(circle, pink 20%, lemonchiffon 50%, lightcyan, orange);

重复径向渐变

background: repeating-radial-gradient(#fff, #000 10%);

border-radius: 50%;

文本排列

writing-mode 定义文本在元素内水平或垂直方向的排版方式。

horizontal-tb 默认值，默认水平方向排列。

vertical-lr 垂直方向，自左而右的书写方式。

vertical-rl 垂直方向，自右而左的书写方式。

语法

writing-mode:vertical-rl

调整字间距

letter-spacing: 10px;

设置首行缩进，每一段文本开始的位置设置的间距

text-indent: 50px;

站点favicon

favicon.ico 是显示在浏览器网页标题旁边的小图标，显示在浏览器标签/地址栏左边和收藏夹。

作用：用来展示网站个性的缩略logo标志。

最早是由IE发明的，只支持ico格式。现代浏览器已经支持png/jpg格式

注意：图片格式尽量选择 1616,3232…… 的小图片

语法

<link rel="shortcut icon" href="./baidu.ico" type="image/x-icon">

2D图转换

2D：在2维平面内元素进行的平移，缩放，旋转，倾斜等效果。

transform 设置图形转换

translate() 平移

参数number+单位，正值负值均可，从当前的位置开始平移。

两个值: 第一个参数作用X轴，第二个作用域Y轴。

一个值: 该值作用于X轴，Y轴默认为0。

transform: translate(100px);

设置单轴的位置移动

 transform: translateX(50px);
 transform: translateY(-20px);

多值同时使用

transform: translateX(50px) translateY(-20px);

scale() 缩放，参数number,元素放大或缩小的倍数“文本随同缩放”。

两个参数分别作用X，Y轴。一个参数两个轴相同。

transform: scale(2, 1);

单独设置某个方向的缩放。

transform: scaleX() scaleY();

rotate() 旋转，参数为number+deg，默认沿中心点顺时针/逆时针旋转

transform: rotate(30deg);
transform: rotateX(0deg);
transform: rotateY(0deg);

默认元素旋转的原点在center center的位置

两个值作用于X，Y轴。

一个值作用X轴，Y轴默认为center。

值可以是number+单位“调整X,Y轴” 或使用 “方向调整”

transform-origin: center center;

 transform-origin: 10px;

transform-origin: top left;

skew() 倾斜，值number+deg ，沿指定的轴倾斜多少度

transform: skew(10deg, 0deg);

过度

设置需要过渡的css属性名

 transition-property: all;

设置过渡效果花费的时间

transition-duration: 2s;

设置延迟执行过渡的时间

transition-delay: 0.5s;

设置过渡的速度类型 linear ：匀速。 ease：默认值，逐渐减速。 ease-in：加速。 ease-in-out先加速后减速。

transition-timing-function: linear;

缩写式

transition: all 5s linear;

过渡：从一种样式逐渐转换为另一种样式的过程。

使用需求：配合事件触发实现过渡。

注意：过渡事件取消后会按照指定的时间原路返回。

随堂六

3D转换

3D : 在3维空间内对元素进行的转换。

使用条件：盒子嵌套关系(观察者位置盒子， 3D盒子，盒子的面)

<!-- 观察者位置 -->
<section class="wrap">
        <!-- 3维空间盒子 -->
        <div class="box-3d">
            <!-- 盒子的面设置定 -->
            <p class="p1">正面</p>
            <p class="p2">反面</p>
            <p class="p3">左侧</p>
            <p class="p4">右侧</p>
            <p class="p5">顶部</p>
            <p class="p6">底部</p>
        </div>
    </section>

transform-style:设置元素是在平面还是在三维空间

flat：默认值，二维平面内。

preserve-3d 指定元素在3D空间内

transform-style: preserve-3d;

rotate3d设置3D旋转：前三个参数分别为X，Y，Z轴是否旋转“0/1” 第四个参数为旋转的角度

transform: rotate3d(1,1,0,240deg);

translate3d 设置3D平移：分别作用于X, Y, Z轴

transform: translate3d(0,0,200px);

scale3d 设置3D缩放：分别作用于X，Y，Z轴的缩放比例

transform: scale3d(0.5, 0.5, 0.5) rotateX(260deg) rotateY(160deg );

perspective :设置景深。设置透视距离。即观察者距离平面[z=0]的距离，让元素形成透视效果，不允许负值。

perspective: 2000px;

设置观察者位置的原点，值与transform-origin相同

perspective-origin: top left;

动画

动画：让指定的元素在指定的时间之内做出不同的样式改变。

设置动画名

animation-name: move;

设置动画的执行时间

animation-duration: 3s;

设置动画的速度类型

animation-timing-function: linear;

设置动画的执行次数，默认执行1次，值number“次数” / infinite"无限次"

animation-iteration-count: 1;

设置动画延迟执行时间

animation-delay: 0s;

设置动画结束的状态。 backwards“返回到起点”，forwards“保持结束的状态”

animation-fill-mode: forwards;

设置动画的运动方向。 normal“默认值。从开始到结束” reverse“反方向，从结束到开始” alternate"先正常方向再反方向" alternate-reverse“相反” 注意：这两个值在动画次数为多次时有效。

animation-direction: alternate;

缩写

常用属性：只要前两个名称和时间添加后即可执行，后面的顺序可打乱不影响。

 animation: name duration timing-function delay iteration-count direction fill-mode;

设置动画的状态。 running“播放动画”。 paused“暂停动画”

animation-play-state: paused;

keyframes 创建动画，关键帧。 identifier 动画名。 { }设置动画的每一帧状态。

语法：@keyframes identifier {}

 0% {
                transform: translateX(0) translateY(0) rotate(0deg);
            }

            /* 动画的结束状态，注意：开始状态的属性要和结束状态的属性保持一致。*/
            90% {
                transform: translateX(500px) translateY(0) rotate(1000deg);
            }

            91%,
            93% {
                transform: translateX(500px) translateY(100px) rotate(1000deg);
            }

            94%,
            97% {
                transform: translateX(500px) translateY(-50px) rotate(1000deg);
            }

            98%,
            100% {
                transform: translateX(500px) translateY(60px) rotate(1000deg);
            }

随堂七

多重背景

添加多个背景，使用逗号隔开即可

 background: url(../作业/tp/16.正方体美景图/1\ \(1\).webp),
                url(../作业/tp/16.正方体美景图/1\ \(2\).webp),
                url(../作业/tp/16.正方体美景图/1\ \(3\).webp);

注意：多重背景设置，调整图片的效果，可以多个值使用逗号隔开，如果只设置一个值默认所有图片使用

background-size: 100px 80px, 200px 160px, 100% 100%;

背景裁剪:根据元素的盒子模型范围设置背景的展示的区域

background-clip:控制背景的渲染区域

border-box ：默认值，渲染至边框区域

padding-box：渲染至内边距区域

content-box:渲染至内容区域

语法：

background-clip: content-box;

filter滤镜

filter属性，用来定义元素“通常设置img的可视效果”

背景滤镜

把图片变成灰色效果，就是“黑色”和“白色”两种颜色。

参数：默认值为100%，值越小颜色越接近于原图。

filter: grayscale(100%);

sepia，把图片变成褐色效果，复古风滤镜，值越大越重。

filter: sepia(100%);

opacity ，设置图片的透视度，取值范围0-1之间

 filter: opacity(0.5);

hue-rotate，色相设置，改变图片的色调。参数?deg"色相旋转"

filter: hue-rotate(0deg);

saturate，图片饱和度，值越大饱和度越高

filter: saturate(5);

brightness，图片的亮度调整。值越大亮度越高0为不亮

filter: brightness(2);

invert 效果类似于照相机底片的效果

filter: invert(100%);

blur 设置模糊度，值越大越模糊，参数number+单位

filter: blur(1px);

设置图片的阴影，可以根据图片的轮廓添加阴影。

filter: drop-shadow(10px 10px 10px red) blur(5px);

注意：多个效果同时使用，可使用空格隔开即可。

弹性布局

弹性布局：flex布局，是Css3新出的布局方式，能够代替传统的float布局。

使用条件："父子嵌套" 父元素指挥，子元素排版方式，父元素称为“容器”,自元素称为“项目”。

弹性布局中依赖两根轴进行排列，“主轴” 和 “交叉轴” ，开启弹性布局后默认元素按照主轴方向排列“X轴”。

轴决定了元素排列的方向，决定元素未设置大小的时候“主轴方向靠内容撑出，交叉轴铺满整个容器”。

开启弹性布局，子元素默认会按照从左至右的顺序排版。

display: flex;

改变主轴方向

row：默认值，主轴为X，从左至右排列。

row-reverse：主轴为X，从右至左排列。

column：主轴为Y，从上至下排列。

column-reverse ：主轴为Y，从下至上排列。

flex-direction: row;

限制元素最大化和最小化的属性设置 max- / min-*/

 max-width: 500px;

min-height: 200px;

flex-basis 设置项目的伸缩基准，(占据主轴方向的多大空间)

当元素设置此属性时，元素的width/height值会被替代，但是不能控制max-/min-宽高*/

flex对齐方式

主轴方向对齐

center:居中

 justify-content: center;

flex-start:头部对齐

justify-content: flex-start;

flex-end：尾部对齐

 justify-content: flex-end;

right：尾部对齐

 justify-content: right;

space-evenly：分散对齐1 元素之间间距和元素容器之间间距，距离等分

 justify-content: space-evenly;

space-around：分散对齐1 元素之间间距，距离等分。元素容器之间间距是元素之间间距的一半

justify-content: space-around;

pace-between：俩端对齐元素之间间距，距离等分。元素容器之间间距和元素之间间距没有间距

justify-content: space-between;

交叉轴方向对齐

center:居中

align-items: center;

flex-start/left:头部对齐

align-items: flex-start;

flex-end/right：尾部对齐

align-items: flex-end;

baseline:基线对齐

align-items: baseline;

弹性换行

开启弹性布局之后，如果我们不设置换行，我们的项目不会自动换行，会自动收缩自身大小

换行属性nowrap默认值不换行

wrap换行。wrap-reverse换行后逆序排列。换行后，从溢出容器的元素开始换行

flex-wrap: wrap;

space-evenly：分散对齐1 元素之间间距和元素容器之间间距，距离等分

space-around：分散对齐1 元素之间间距，距离等分。元素容器之间间距是元素之间间距的一半

pace-between：俩端对齐元素之间间距，距离等分。元素容器之间间距和元素之间间距没有间距

flex-start /left:头部对齐

flex-end/right：尾部对齐

center:居中

align-content: space-evenly;

随堂八

flex空间分配

flex-grow:设置元素的放大比例，默认值为零，将主轴剩余空间按照比例grow的值划分给每一个grow的元素

flex-grow: 1;

flex-shrink:设置项目的收缩比例，当我们的空间b不足项目多占空间缩小，默认为一根据元素的大小平均收缩值设置为0不收缩，值越大收缩的速度越快（可通过调整容器的大小来测试）

flex-shrink: 10;

单位

px ：像素，固值，页面中最小的显示单位。

% ：相对单位，相对父级的元素的字号或大小作为标准计算。

cm：厘米，固值。

mm：毫米，固值。

pt：磅，印刷单位。

rem：相对单位，以根元素“html”的字号为标准进行计算，倍数关系“是根元素的几倍”。

em: 相对单位，以父级元素的字号作为标准计算，倍数关系“多层元素都使用此单位会形成逐级相乘状态”

vw：相对单位，以浏览器窗口的宽度大小为标准计算“把窗口宽度分为100份，占其中几份？”。

vh：相对单位，以浏览器窗口的高度大小为标准计算“把窗口高度分为100份，占其中几份？”。

视口

响应式布局

响应式开发：在同一页面下不同的屏幕尺寸，页面结构发生不同的变化。

响应式开发方案：媒体查询。(Css3 Media Query)

@media 媒体查询，可以针对不同的"媒体类型"定义不同的css样式

screen ："Media Type" 媒体类型，表示电脑，平板，智能手机显示器，包含有关用户的显示屏幕信息。

and: 操作符，所有的条件都成立时，才能使用样式表。

(): 条件判断，max-width 判断宽度，其中“max- 相当于<=” or “min- 相当于>=” (原因是html页面中不能解析><符号)

 @media screen and (max-width: 800px){
            .box{
                background-color: red;
            }
        }

not 排除，取反。

排除媒体类型：没有条件在媒体类型前面添加not为排除。

条件取反：媒体类型后面跟的有条件时使用。

 @media not screen and (max-width: 1200px){
            .box{
                background-color: green;
            }
        }

媒体查询

媒体查询的三种使用方式

和css一起书写，缺点css代码太多，没有章法。
通过@import 导入外部css文件，再关联media信息使用，不推荐使用。
使用link引入外部样式表，在link标签内添加media属性绑定信息使用，推荐。

使用link引入外部样式边表，添加meida属性

orientation:landscape 横屏状态

orientation:portrait 竖屏状态

 <link rel="stylesheet" href="./index.css" media="screen and (orientation:portrait)">

Red youth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随堂总结

随堂总结
复制链接

扫一扫

专栏目录

随堂 总结

随堂一

表单

获得焦点

fieldset

下拉菜单

textarea

表格

表格合并

流式布局

盒子

盒子的塌陷

随堂二

选择器

标准选择器

复合选择器

伪类选择器

伪元素选择器

描点

随堂三

基线对齐

雪碧图

隐藏显示

隐藏

显示

tooltip

定位

静态定位（了解）static

相对定位 ：position:relative

绝对定位 ： positive:absolut

随堂四

浮动

清除浮动

1.父级元素定height

2，结尾处加空div标签 clear:both

3，父级div定义 伪类:after 和 zoom

4，父级div定义 overflow:hidden

5，父级div定义 overflow:auto

6，父级div 也一起浮动

7，父级div定义 display:table

8，结尾处加 br标签 clear:both

随堂五

css同胞选择器，获取同级元素中的某个元素

盒子阴影

文本阴影

背景渐变

文本排列

站点favicon

2D图转换

过度

随堂六

3D转换

动画

随堂七

多重背景

filter滤镜

弹性布局

flex对齐方式

弹性换行

随堂八

flex空间分配

单位

视口

响应式布局

媒体查询

“相关推荐”对你有帮助么？

随堂总结

相对定位：position:relative

绝对定位： positive:absolut

3，父级div定义伪类:after 和 zoom