web学习笔记(六)

这篇具有很好参考价值的文章主要介绍了web学习笔记(六)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.CSS 2D转换

1.1translate移动:

1.2rotate()旋转:

1.3scale()缩放

1.4skew()反转

1.5transition过渡

1.6transform-origin

1.7 perspective透视

1.8 backface-visibility背面元素不可见

2.flex布局(弹性布局)

2.1flex布局的定义及格式

2.2flex布局常用属性

1.flex-driection

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items 


1.CSS 2D转换

 transform: ; 该语句需要复合,否则会被后面的语句覆盖,语句之间用空格隔开。

eg:transform:translatex(200px) scale(30deg);。

1.1translate移动:

  • 格式:transform:translate();
  • 也可以写为transform:translatex();表示在x轴上移动
  • 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动,移动后所占空间的大小和位置不会发生改变。

1.2rotate()旋转:

  • 格式:transform:rotate();
  • 默认以平面的中心点顺时针进行旋转。
  • 括号内跟旋转度数,eg:transform:rotate(30deg); deg表示度数
  • 可以将正方形通过旋转得到菱形,然后对菱形进行定位。给父元素加溢出隐藏等一系列操作。可以得到所需的三角形图标。
  • 旋转后多出来的区域不会占用空间,在页面上显示多出来的部分会浮在上面,对其他元素的部分进行了遮挡。eg:

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

1.3scale()缩放

  • 格式:transform:scale();
  • scale括号内跟的值是一个倍数,可以同时跟多个数值,不需要带单位。
  • 可以改变元素的宽度和高度,但元素的实际所占空间并不会发生改变。
  • eg: transform:scale(2.3);表示将宽度放大为原来的两倍,高度放大为原来的三倍,但是进行缩放后所占空间依旧是原来的空间。
  • 要注意位移和缩放的顺序,在前面的先被执行。

1.4skew()反转

  • 括号内跟具体的度数,和旋转的格式一样。
  • 可以将长方形通过x轴或者y轴的反转得到平行四边形。

1.5transition过渡

  • 格式:transition:all 0.5s; (all表示将所有设置的样式都进行一个过渡,此时不需要再区分是对旋转还是缩放效果进行过渡操作,后面跟上过渡所需的时间,单位是秒)
  • 在实现鼠标放到某元素上时,实现特定效果常用。
  • 在实际操作过程中通常将过渡语句写到要发生变化的这个盒子的css样式中去,而不是写到:hover{}里面。两者的区别表现在当鼠标离开的时候前者依旧会进行一个过渡,但后者没有过渡操作。

1.6transform-origin

  • transform-origin可以改变元素发生改变的坐标点,反转和缩放等属性默认是以中心点作为改变的参照点,我们可以用transform-origin来指定中心点。

  • 格式:transform-origin:center center;(默认是center,可以根据需要修改为其他的属性值)。

  • 可以用数字、百分比或者英文坐标单词来表示,eg: transform-origin:0 0 ;

1.7 perspective透视

  • 当值为0的或无穷大的时候则没有透视感。
  • 值越小,3d效果越明显。
  • 在视觉上满足近大远小的准则。
  • 用于转换元素上。
  • 得写在父元素上,子元素才会有透视感。

1.8 backface-visibility背面元素不可见

  • 可以将值设置为visible(背面元素可见,允许显示正面镜像) 或者hidden(指定背面元素不可见),默认为visible 
  • 不可继承。

2.flex布局(弹性布局)

2.1flex布局的定义及格式

flex布局表示弹性布局,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

  • 格式:
    .box{
         display:flex;
     
    }
  • 在webkit内核的浏览器上必须加上webkit前缀。 
.box{
     
    display:-webkit-flex;
}
  • 当使用弹性布局之后,里面的float、clear、vertical-align属性将失效。
  • 给父级盒子设置了弹性布局,那么子级盒子不需要设置浮动和定位就可以实现左右排列。
  • 当父级盒子的宽度不够时,子级盒子也不会实现换行,父级盒子也不会被撑大,里面的子元素会实现挤压的效果,但依旧是同一行展示。
  • 当给父级盒子设置了弹性布局,那么再给子盒子设置浮动就和清除浮动都不会生效了。
  • 使用弹性布局可以消除行内标签自带的小边框。
  • 当块状元素外面的父级盒子高度没有设置时,给块状元素设置上下内边距的值,在页面观察时可以看到上下的内边距确实有生效,但父盒子的高度并没有发生变化,证明块级元素设置上下内边距不占用空间,当把父盒子改为弹性盒子模型时就可以解决这个问题了。

2.2flex布局常用属性

1.flex-driection

  • flex-driection可以设置项目的排列方向,
  • flex-driection的属性值包括row、row-reverse、column、column-reverse,默认属性值为row,

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

当设置为flex-driection:column-reverse;效果:

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

2.flex-wrap

  • 设置项目是否在一条线上。
  • flex-wrap的属性值包括wrap、nowrap、wrap-reverse,默认属性值为nowrap,

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

3.flex-flow

flex-flow属性是flex-driection和flex-wrap属性的简写形式,默认值为 row nowrap。

4.justify-content

  • 定义项目在主轴上的对齐方式(补充:在弹性布局中x轴为主轴,y轴为侧轴,父级盒子里面包裹的子级元素统称为项目)
  • justify-content的属性值包括flex-start、flex-end、center、space-between、space-around,默认属性值为flex-start,

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

5.align-items 

  • 定义项目在侧轴上的对齐方式(多行的弹性盒模型容器)。
  • align-items的属性值包括flex-start、flex-end、center、baseline(以文字为基准对齐)、stretch(盒子会发生伸展),默认属性值为flex-start,

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记

web当父级盒子尺寸过小,容纳不了子集盒子,会出现什么效果,笔记,学习,笔记文章来源地址https://www.toymoban.com/news/detail-795451.html

到了这里,关于web学习笔记(六)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 100M服务器能同时容纳多少人访问?

    前言 服务器的用户访问量是指在特定时间内访问服务器的用户数量。用户访问量通常以每分钟、每小时或每天的访问次数来衡量。 这个指标对于网站和应用程序的运营和性能监控非常重要,它能够帮助开发人员和运维团队了解服务器的负载情况,从而决定是否需要增加服务

    2024年02月08日
    浏览(47)
  • 【Web前端开发基础】CSS的盒子模型

    能够认识不同选择器的优先级公式 能够进行CSS权重叠加计算,分析并解决CSS 冲突问题 能够认识盒子模型的组成部分 能够掌握盒子模型的边框、内边距、外边距的作用及简写形式 能够计算盒子的实际大小 能够了解外边距折叠现象,并知道如何解决盒子塌陷问题 2.1 CSS三大特

    2024年01月22日
    浏览(45)
  • 4-web前端 盒子模型、行内块、浮动问题、无意义标签

    1、图文对齐(搜索框) 图片标签是典型的行内块元素 除此之外行内块元素还有表单元素input、button (行内块元素既可以设置宽高又可以和行元素在一行 行内块的转换问题 display (block块、inline行、inline-block行内块、none隐藏   转换后两个块中间存在空隙问题 2、浮动的元素参

    2024年02月08日
    浏览(42)
  • 3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

    html和css的关系:   HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。   CSS (Cascading S

    2024年02月08日
    浏览(65)
  • web学习笔记(五)

    目录 1.补充css选择器 1.1:nth-child() 选择器 1.2 z-index 1.3 vertical-align:center; 1.4元素显示或隐藏。 1.用透明度实现隐藏: 2.display:none; 3. visbility:hidden; 1.5设置圆角: 1.6首行缩进: 2.定位 2.1固定定位 2.2相对定位 2.3绝对定位 2.4粘性定位 2.5静态定位 2.6当宽高不固定时元素定位居中:

    2024年01月17日
    浏览(28)
  • web学习笔记(六)

    目录 1.CSS 2D转换 1.1translate移动: 1.2rotate()旋转: 1.3scale()缩放 1.4skew()反转 1.5transition过渡 1.6transform-origin 1.7 perspective透视 1.8 backface-visibility背面元素不可见 2.flex布局(弹性布局) 2.1flex布局的定义及格式 2.2flex布局常用属性 1.flex-driection 2.flex-wrap 3.flex-flow 4.justify-content 5.al

    2024年01月16日
    浏览(28)
  • WEB学习笔记3

    输入输出语句  外部js:这种写法有一个不好的地方就是,两个不同的开发人员在使用不同的js写function的时候有可能造成重复,导致程序紊乱。在这推荐一种用json格式方式书写js函数的方法 变量: 变量命名规范: let和var的区别: const常量: 字符串类型: 布尔类型: 1.nosh

    2024年02月16日
    浏览(29)
  • web学习笔记(四)

    目录 1.超链接的伪类 1.1link 1.2visited 1.3hover 1.4active 1.5超链接伪类总结 1.6补充:nth-child() 选择器 2.字体图标 2.1在线字体图标 2.2本地字体图标 3.背景 3.1背景颜色透明度 3.2背景图片 1.将图片设置为背景: 2.设置背景图片不平铺: 3.背景图片定位: 4.设置背景图片大小: 5.总结: 格

    2024年02月02日
    浏览(27)
  • web学习笔记(一)

    目录 1.HTML的基础认识 1.1 什么是HTML 1.2 vscode快速生成基本骨架 1.3 HTML基本骨架的含义 2.HTML的基础语法 2.1 HTML的注释 2.2标签的分类 (1) HTML标签分为三类:块状元素、行内元素和行内块元素。 (2) 元素模式的转换 2.3 标题标签 2.4 段落标签 2.5图像标签 2.6超链接标签 2.7锚点链接

    2024年02月03日
    浏览(29)
  • web学习笔记(十五)

    目录 1.Date对象 1.1日期对象的概念 1.2Date()方法的使用  1.3Date()常用方法汇总 1.4例题:用函数编写一个倒计时 2.函数 2.1函数的概念 2.2函数的使用 2.3函数的参数 2.4函数的声明   2.5函数的返回值 2.6异步函数 3特殊函数类型 3.1匿名函数 3.2箭头函数  3.3 函数形参和实参个数不匹

    2024年02月02日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包