- 博客(20)
- 收藏
- 关注
RSS订阅原创 css笔记
（1）、rem单位：相对单位，相对于html根元素的字体⼤⼩，通过更改html⽂字的⼤⼩，改变⻚⾯的。第⼀步：拿到多⼤的设计稿，将root font size 改成 ：设计稿的⼤⼩/10。max-width 视⼝的最⼤宽度（视⼝⼩于指定宽度时就⽣效，⼩于等于xxxpx）媒体类型（可以同时⽤多个媒体类型，⽤逗号隔开,这样他们之间就是或的关系）第三步：正常根据设计稿的⼤⼩去开发，将所有的px值换算为rem的值。min-width 视⼝的最⼩宽度（视⼝⼤于指定宽度时就⽣效）
2023-03-17 19:27:14
35
原创 3d和弹性盒子
设置视⻆深度 （景深）：perspective [pə'spektiv] 设置当前⽹⻚的视距为800px，⼈眼距离⽹⻚的距离，⼀。rotateX(⻆度) rotateY(⻆度) rotateZ(⻆度) 沿着元素中⼼点穿过的某个轴旋设置的⻆度。容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴⽅向缩放相应的倍数。rotate3d（x,y,z,deg）:沿着⾃定义轴旋转deg为⻆度()
2023-03-14 20:40:55
45
原创 css动画
默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素变。动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发，两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。可以单独对x轴y轴z轴进⾏设置：这⾥的X/Y/Z也是是需要⼤写的。单独对x轴y轴进⾏设置：同样这⾥的X/Y/Z也是是需要⼤写的。可单独对x轴y轴进⾏设置：这⾥的X/Y也是是需要⼤写的。1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于。
2023-03-13 20:59:19
41
原创 css背景相关知识
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验。默认情况下，圆心是根据元素的形状来计算的。- 如果指定的是一个正值，则图片会向右移动指定的像素。- 如果指定的是一个负值，则图片会向左移动指定的像素。- 如果指定的是一个正值，则图片会向下移动指定的像素。- 如果指定的是一个负值，则图片会向上移动指定的像素。
2023-03-10 20:11:06
44
原创 css笔记
opacity、transparent、rgba(r,g,b,a)设置透明，几者的区别是什么。当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；opacity是样式名，transparent、rgba(r,g,b,a)是设置样式值。transparent、rgba(r,g,b,a)必须跟在特定的样式名后，例如。transparent、rgba(r,g,b,a)没有继承的，给谁设置，谁会生效。opacity是通过样式进行设置的，所以有一定的继承性。
2023-03-09 20:55:53
20
原创 css定位
（2）、在绝对定位的情况下，四个方向偏移量都为0px，宽度也为固定值，让margin为auto，一般情况下，水平方向的偏移量，垂直方向的偏移量，只用一个值确定，不会同时使用两个值，容易出问题。width 和left，right其中一个值，调整left/right。四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,d:开启相对定位，元素的性质不会发生改变，块还是块，行内还是行内，b:开启绝对定位后，元素的性质就发生了改变，不再区分块，行内块，行内元素。
2023-03-07 20:56:52
30
原创 css高度塌陷问题
也可以解决高度塌陷，但宽度丢失，而且会带来三像素问题，也一定程度上影响页面的布局。子元素会脱离文档流，就不能再撑开父元素的高度，从而导致父元素的高度丢失，导致页面布局的混乱。开启BFC后，就相当于把元素单独隔离，成为一个独立的区块，不影响页面的其他元素。当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素。一般情况，我们的父元素是不设置高度的，让其被内容自动撑开，如果子元素设置浮动了，元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失。
2023-03-06 19:10:09
103
原创 css浮动
布局方式：元素在文档流中，浮动，定位，弹性盒子，·····1、浮动概念：是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流就不再具有元素在文档流中的特点，从而帮助我们布局2、设置浮动：float样式名可选值：none 不浮动 默认值left 向左浮动right 向右浮动。
2023-03-03 20:43:09
37
原创 css盒子布局
2:这7个值中width，margin-left，margin-right，这三个值可以设置auto。2、7个值当中，有3个值可以被设置为auto，分别是margin-left，width，margin-right。margin-left，width，margin-right为auto 调整的width。如果有设置auto，则浏览器会自动调整auto的值，以使等式成立。border-radius 后跟多个值，4个，3个，2个，1个。
2023-03-02 19:36:40
49
原创 ccs盒子模型
所对应的元素的特点自然也就没有，块元素也不会独占一行了，行内元素也可以设置宽高了，网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层。margin-bottom 盒子本身不动，盒子下方的元素，正值向下，负值向上。元素的分类前提是在文档流中，才分成块元素、行内块元素，行内元素，margin-left 正值，盒子是向右移动，负值，盒子是向左移动。边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。border-xxx:边框的大小 边框的样式 边框的颜色;
2023-03-01 20:49:45
252
原创 css字体样式
语法：hsla(hue, saturation, lightness, alpha)色相，饱和度，亮度，透明度。也是个相对单位，它是相对于根标签（html）标签的字体大小变化而变化,如果根标签没有设置字体大小，父元素或者祖先元素的字体大小，直到继承根标签（html）的字体大小,如果根标签没有设置字体大小，也是个相对单位，它相对于自身字体大小的变化而变化，如果自身没有设置字体大小，就会继承其。获取颜色：来到截屏的模式，将鼠标箭头对准你要的颜色，然后进行提取即可，（1）、直接长度单位 60px。
2023-02-28 17:15:52
24
原创 css笔记
指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址。并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素。优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式。2.对比选择器权重的时候，如果是并集选择器的话，单独计算选择器权重，谁高听谁的。表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，3.对比选择器权重的时候，如果选择器权重是相同的话，谁靠下，用谁的。
2023-02-27 20:09:56
109
原创 html+css笔记
属性名^=属性值]{} 选择属性值以指定值开头的元素。[属性名=属性值]{} 选择含有指定属性和属性值的元素。[属性名$=属性值]{} 选择属性值以指定值结尾的元素。[属性名*=属性值]{} 选择属性值含有某值的元素。2、:last-of-type 选中最后一个子元素。3、:nth-of-type() 选中第n个子元素。-比如：第一个元素，被点击的元素，鼠标移入的元素···1:属性选择器 通过指定的属性名或属性值来选中对应的内容。-伪类不特指某一个元素，指的是一个元素的特殊状态。
2023-02-24 20:07:36
24
原创 css文字样式
font：文字简写的时候记得一定要写文字字体、文字大小，并且这二个属性值在后面二个,除了字体颜色,可以在字体大小后用/添加行高。设置文字默认一行显示（white-space）=》文本溢出的样式text-overflow。设置元素的宽高=》内容溢出是隐藏（overflow）=》单行文本垂直居中：line-height==height。x=>在水平方向的偏移量，正值向右。y=>在垂直方向的偏移量，正值向下。overflow-x:设置水平方向的溢出。overflow-y:设置垂直方向的溢出。
2023-02-13 20:28:58
65
原创 CSS笔记
通过css设置元素：一般用于要实现某些效果，但是直接添加在html中会打乱结构::before：在...之前添加元素::after：在...之后添加元素注意：伪元素选择器必须与content属性一起使用display：设置元素的性质background-color:设置背景颜色content:设置元素的性质。
2023-02-10 19:16:44
32
原创 css基础
方法一：在head标签内通过link标签引入，称为链接式，推荐使用链接式。方法二：在style标签内同@import导入css文件，称为导入式。缺点：使html语句过于冗长，不利于浏览器编译。在head标签内通过style标签设置值。缺点：还是没有与html文件完全分离。4、减少网页代码量，增加网页的浏览速度；3、丰富的样式，使页面布局更加灵活；标签内部通过style属性来设置。2、网页的表现统一，容易修改；5、有利于网页被搜索引擎收录。1.内容与表现分离；
2023-02-06 18:34:17
71
原创 HTML笔记
表格的结构标签：常用于长表格，可以确定表格在浏览器的位置thead:代表表格的头部 表格的头部，与书写位置无关tbody:代表表格的主体 表格的主体，与书写位置无关tfoot:代表表格的底部 表格的底部，与书写位置无关网页的结构标签都是块元素，并且在页面显示的位置与书写位置有关header：网页头部nav:网页导航main：网页主体article:文章aside:和主体相关的内容，但显示位置不在主体上section：普通的布局。
2023-02-03 20:56:08
37
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人