【前端学习笔记Html5&css】
文章平均质量分 66
尚硅谷【Htlm5&css从入门到精通】前端学习笔记
SevgiliD
流水不争先
展开
-
【前端学习笔记】05盒模型(上)—三种盒子及box-sizing详解
在编写css时会发现大多数工作都是围绕着一个盒子一个盒子展开的,如设置尺寸,颜色位置等。页面里的大部分html元素都可以被看作若干层叠的盒子。content: 盒⼦的内容,显示⽂本和图像padding:即内边距,围绕着内容(⽐如段落)的空间。border:即边框,紧接着内边距的线。margin:即外边距,围绕元素外部的空间。块级盒子和内联盒子是css中使用最广泛的两种盒子。这两种盒⼦会在⻚⾯流(page flow)和元素之间的关系⽅⾯表现出不同的⾏为:⼀个被定义成块级的(block)盒⼦会表现出以下⾏为:原创 2022-06-08 17:48:42 · 582 阅读 · 0 评论 -
【前端学习笔记】14-移动端入门之VW适配
屏幕上是由一个一个发光的小点构成,这每一个点就是一个像素;分辨率:1920x1080说的就是屏幕中小点的数量。又称设备像素,它的数量是固定的,如上述说的小点就是物理像素,指的是设备屏幕上的像素点个数。解决方法:按上述方法设置font-size后,在less中就可以轻松使用rem进行移动端布局了,在设计图中元素大小除以40后以rem为单位即可。less示例:...原创 2022-07-08 14:42:31 · 419 阅读 · 0 评论 -
【前端学习笔记】13-less简介
less是css的一门预处理语言less是css的一个增强版,通过less可以编写更少的代码实现更强大的样式在less中增添了许多新特性:像对变量的支持丶对mixin的支持less的语法大体上和css语法一致,但是less中增添了许多对css的扩展所以浏览器无法直接执行less代码,要执行必须先将less转换成css,然后再有浏览器执行ctrl+s保存后生成对应style.css,代码如下在HTML中引入文件,有如下效果关系嵌套在less中,父子关系可以直接嵌套,书写起来结构更加清晰原创 2022-07-08 10:01:13 · 187 阅读 · 0 评论 -
【前端学习笔记】12-css动画学习总结之3D立体盒子
css动画学习总结—3D立体盒子原创 2022-07-04 10:31:50 · 252 阅读 · 0 评论 -
【前端学习笔记】10-高度塌陷和外边距重叠原理及解决方案
1.设置元素的浮动(不推荐)2.将元素设置为行内块元素(不推荐)3.将元素的overflow值设置成一个非visible的值( 常用方式:为元素设置overfolow:hidden使其可以包含浮动元素 )原创 2022-06-27 19:58:34 · 229 阅读 · 0 评论 -
【前端学习笔记 11-CSS动画简介
Translate - 2D 转换Translate 属性值可以使得元素进⾏⽔平或者垂直移动例如:以下代码表示将 logo 元素⽔平向右平移 100px,垂直向下平移 100px如希望设置水平向左或垂直向上时,将px值设为对应的负值即可若希望分别控制水平和垂直方向上的移动,则使用以下代码分开控制Scale - 缩放概念:Scale 可以⽤来放⼤或者缩⼩⼀个元素用法示例:以下代码表示将 logo 元素整体放⼤了 10 倍如果需要实现水平放大,垂直缩小等功能时,则需要通过以原创 2022-06-14 13:29:02 · 244 阅读 · 0 评论 -
【前端学习笔记】09全方位了解flex布局
一个最直观的例子,当有以下HTML代码时默认状态显示为:当给⽗元素设置成 flex 容器后效果变化如下:可以看到变成横向排列了,类似于 inline-block 的效果:我们使⽤ flexbox 的所有属性都跟这两根轴线有关, 所以有必要在⼀开始⾸先理解它。主轴由 flex-direction 定义,⽽另⼀根轴(交叉轴)垂直于它。flex-direction 主要有两个值:row 、column。上文已介绍,此处省略html代码css代码效果展示css代码效果展示html代码css代码效果原创 2022-06-12 14:33:00 · 196 阅读 · 0 评论 -
【前端学习笔记】08-文字与盒子的水平垂直居中
单行文字水平垂直居中margin:0 auto 设置对象上下间距为0,左右自动。可拆分: margin:0 auto 0 auto(上下);还可拆分为:margin-left:auto;margin-right:auto;margin-top:0;marg-inbottom:0;利用绝对定位和margin负值缺点:需要知道子元素的具体大小...原创 2022-06-11 16:09:27 · 83 阅读 · 0 评论 -
【前端学习笔记 07-CSS布局,定位总结
定位 (positioning) 能够让我们把⼀个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另⼀个位置。定位(positioning) 并不是⼀种⽤来给你做主要⻚⾯布局的⽅式,它更像是让你去管理和微调⻚⾯中的⼀个特殊项的位置。......原创 2022-06-11 15:41:47 · 108 阅读 · 0 评论 -
【前端学习笔记】04-HTML中<img>标签的路径语法
刚学习HTML时,对img的路径语法总是含糊不清,当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:总结下从本机文件夹导入图片时候相对路径与绝对路径的规则。所谓相对路径,就是相对于自己的目标文件位置。如图片问html文件的在同个目录下时则只需要输入文件的图像名称即可如果是上在一级目录或是上一级目录images里的子目录则分别为:由此可见,若图片位于下一级路径时(即图像文件位于HTML文件同级文件下时),例如在img下时,则为:绝对路径以Web站点根目录为参考基础的目录路径。之因此称为绝对,原创 2022-06-03 13:47:13 · 1983 阅读 · 0 评论 -
【前端学习笔记】06盒模型(下)—overflow属性值及应用
我们知道,CSS 中万物皆盒⼦,因此我们可以通过给 width 和 height 赋值的⽅式来约束盒⼦的尺⼨。溢出是在你往盒⼦⾥⾯塞太多东⻄的时候发⽣的,所以盒⼦⾥⾯的东⻄也不会⽼⽼实实待着。CSS 中可以通过 overflow 属性来默认值。溢出内容不会被修剪,会呈现在元素框之外。溢出内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。溢出内容会被修剪,并且其余内容是不可见的。如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。规定应该从父元素继承 overflow 属性的值。总结设置o原创 2022-06-11 14:35:35 · 183 阅读 · 0 评论 -
【前端学习笔记】02-css入门常用的的几种选择器
分组选择器,在需要将相同样式应用于几个或多个不同标签时,将标签用,隔开书写比较方便基本语法代码示例如下类选择器类选择器作为css最主要两大选择器之一,它的用法十分简单和人性化,使用方法分为两个步骤:1.先在标签里定义一个类(样式名可以自定义,但不能用数字或特殊字符开头)2.在style标签或css文件中写入ID选择器作为另一主要选择器之一,ID选择器的写法与类选择器相似,也分为两个步骤:1.先在标签里定义一个ID(ID名可以自定义,但同一html文档中只能有唯一ID值)2.原创 2022-06-05 14:40:52 · 114 阅读 · 0 评论 -
【前端学习笔记】01-css的三种引入方式
外部的css文件,利用link标签引入到html5文件内部,实际开发中应用较多。操作方式分为两步新建文件及样式写入在HTML中引入文件`行内样式表。通过放在需要设置css样式的那一行,只要格式如下:优缺点:书写方便,优先级高;但结构与样式未分离,后期维护不方便...原创 2022-06-04 15:20:20 · 318 阅读 · 0 评论 -
【前端学习笔记】03-HTML中的三种列表用法
效果展示:效果展示:效果展示:三种列表的使用在写项目时用的频繁,但在实际编写网页时很少用到默认样式,了解用法后还要进一步掌握对列表的css样式设置。原创 2022-06-06 16:57:10 · 132 阅读 · 0 评论