- 博客(28)
- 收藏
- 关注
RSS订阅原创 、CSS 定位
left：设置元素距离参照元素的左侧位移，正值往右，负值往左right：设置元素距离参照元素的右侧位移，正值往左，负值往右top：设置元素距离参照元素的顶部的位移，正值往下，负值往上bottom：设置元素距离参照元素的底部位移，正值往上，负值往下。相对定位相对于元素本身的位置进行一个位置调整，占位依然在原来的位置，也就是说，元素设置相对定位后，其原来的位置还占位。注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素。元素的位置相对于浏览器窗口是固定位置。
2023-02-23 19:54:14
128
原创 CSS 精灵（雪碧图、精灵图）
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。1.减少网页的http请求，提高页面的性能。2.减少在图片上的命名困扰。
2023-02-23 19:48:46
126
原创 overflow属性详解
溢出显示，默认值overflow: hidden;溢出隐藏overflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示overflow: auto;自动，内容溢出时，显示滚动条。overflow-y 只包括垂直方向。/* overflow-x 只包括水平方向。overflow-x 只包括水平方向。overflow-y 只包括垂直方向。概述：溢出元素内容区的内容会如何处理。
2023-02-23 19:38:58
361
原创 外边距问题及解决方法
2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'1.元素嵌套关系，子元素的margin-top值会叠加给父元素；原因：并列关系的两个元素共用了一个外间距区域。2.为父元素设置overflo：hidden；父元素和子元素公用一个上外边距区域。1、兄弟关系外间距塌陷问题。兄弟关系外间距塌陷问题。
2023-02-23 19:34:11
58
原创 CSS显示模式与元素特性总结
概述：显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素。特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。行内元素只能容纳文本或者其他行级元素（此处请注意，不要在行级元素中嵌套块级和行内块元素）。本身属性为display:inline-block的元素称为行级块元素。的元素 称为块级元素。
2023-02-23 19:31:50
68
原创 七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜色、背景图片、背景图片的平铺方式和显示位置等。如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。background-position 属性，设置背景图像（由 background-image 定义）的起始位置。background是背景复合属性，在一个声明中设置所有背景属性。background-color 属性，设置元素的背景颜色。background-image 属性，为元素设置背景图像。
2023-02-23 19:27:22
1258
原创 CSS 盒模型
要那个梯形，他的对边为none，他相邻的边框的颜色为透明色，transparent */实现上梯形，对边为none，也就是下边框为none，左右边框的颜色为透明色 */实现上边三角形，对边为none，也就是下边框为none，左右边框的颜色为透明色。实现左梯形，对边为none，也就是右边框为none，上下边框的颜色为透明色。要那个三角形，他的对边为none，他相邻的边框的颜色为透明色，transparent。
2023-02-23 19:18:12
58
原创 常用复合选择器
我是第a二span个我是第a二span个/* 鼠标悬停到.box3上，让p标签和h3标签的文字颜色都变为blue */我是第一个span我是第三个span我是第一个span我是第三个span
2023-02-23 19:15:09
119
原创 、什么是选择器
多个单词可以以驼峰式（newsCont）、中划线连接（news-cont）、下划线连接（news_cont）等。：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始。CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式。/* 页面上所有元素都被选择 */作用：选择所有同一元素名称的所有元素。/* 选择页面上所有的div *//* 选择页面上所有的p */
2023-02-23 19:12:00
66
原创 新增其他标签
min、max、step属性最小值、最大值、合法的数字间隔用于包含数字的input类型，规定数值范围，如:input的number类型等。注意：由于H5是向后兼容的，所以在H5中使用这些标签也不会报错或出现异常，但这些元素在H5中已不被W3C标准推荐，建议尽量不要使用。用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）问题概述：IE8浏览器中还没有添加对HTML5新标签的支持，当在页面中使用HTML5新标签时，新标签不兼容。
2023-02-22 19:53:37
106
原创 HTML5
语义：定义整个文档或文档中一个节段的的头部（页眉）。典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目。作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。向后兼容， 就是本设备（或者软件）跟更老的设备比较， 是否可以读取更老设备的数据。典型应用：主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等。表示页面中一个内容区块或整个页面的脚注 , 包含友情链接、版权等。定义文档中的节（页面中内容的区段、文章中的章节）。
2023-02-22 19:51:47
52
原创 PS的基础
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））
2023-02-22 19:46:40
86
原创 3D变形：平移、旋转、缩放
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。
2023-02-22 19:39:00
419
原创 css3过渡动画——transition属性
1.linear 相同的速度从开始到结束，也就是匀速2.ease 默认值 慢速度开始--速度变快--慢速度结束3.ease-in 慢速度开始的过渡效果，也就是以低速度开始4.ease-out 慢速度结束的过渡效果，也就是以低速结束5.ease-in-out 以慢速度开始和结束的过渡效果。transform: translate(x,y) 沿着x轴和y轴移动。transform: scale(x,y) 沿着x轴和y轴缩放。transform: skew(x,y) 沿着x轴和y轴倾斜。
2023-02-22 19:34:27
230
原创 移动端布局方案
在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px。比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px。
2023-02-22 19:28:37
136
原创 移动端web开发
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px。移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等。在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；
2023-02-22 19:25:20
626
原创 阿里矢量图标(字体图标)
添加新的图标下载文件后，把原来的文件替换掉，再把iconfont.css和iconfont.js文件链接替换一下即可。如果添加新的图标，可以把这些图标添加到已有的项目文件，这样原来的图标和这次新添加的图标就可以在新的一个文件里了。如果添加新的图标，需要再新下载一个文件，且这个文件的图标与上个文件的图标不能在一个文件中，是两个独立的文件。3.解压文件，把文件放到代码中(此时下载的这个文件包括上次选的图标，也包括这次选的新的图标)这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。
2023-02-22 19:24:48
189
原创 弹性盒 2
(当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度。flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）flex-grow属性：子元素的放大比例（子项宽度和
2023-02-22 19:18:51
51
原创 弹性盒1
子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效。align-content属性：折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式（去掉了中间的间隙）justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。默认值，主轴顶端对齐。
2023-02-22 19:11:26
52
原创 浮动css
网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式`clear:both`说明：左侧列固定，左侧浮动，右侧列使用margin-left预留位置，1、父元素固定高度法：给浮动元素的父元素固定高度。子元素浮动导致父元素高度塌陷。描述：给浮动标签的父标签添加。
2023-02-12 19:42:21
29
原创 CSS三大特性
a标签不能继承字体颜色colorh标签不能继承font-weightb.strong不能继承font-weighti,em不能继承font-style。
2022-11-18 20:25:20
255
原创 外边距（day6）
2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；1.元素嵌套关系，子元素的margin-top值会叠加给父元素；原因：并列关系的两个元素共用了一个外间距区域。父元素和子元素公用一个上外边距区域。两个值一样大，取当前值。overflow-y 只包括垂直方向。两个值不同，取较大值。概述：溢出元素内容区的内容会如何处理。1.为父元素设置上边框或者上填充。
2022-11-18 20:14:07
62
原创 css显示隐藏的方法
第一个值设置宽度，第二个值设置高度。background-position 属性，设置背景图像（由 background-image 定义）的起始位置。如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-color 属性，设置元素的背景颜色。background-image 属性，为元素设置背景图像。左上角是 0% 0%；
2022-11-18 19:55:28
3309
原创 css背景（day04）
background-position 属性，设置背景图像（由 background-image 定义）的起始位置。100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上；右下角是 100% 100%。CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜。如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示；默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-color属性，设置元素的背景颜色。
2022-11-10 22:57:16
57
原创 边框（day03）
css盒模型本质就是一个盒子封装周围的html元素包括:实际的宽高+内填充+边框+外边距CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）1、 设置宽度- 取值auto默认值。浏览器可计算出实际的宽度。px百分比2、height作用：设置高度取值auto默认值。
2022-11-08 20:49:49
86
原创 标签（day2）
标签的结构1、并列关系:兄弟关系2、嵌套关系:父子关系head定义文档头部一头部信息一其中内容不会显示在网页中包含:title、可以放文档的脚本文件，<Js)样式(style) meta 信夏标签.tdk.UTF-8→（万国码）字符集:次多个字符的集合 便于计算识别和存各种文字。常用的字符集GB2313:简体中文(包含6763个汉字)GBK:全部的中文字行-加入3体字支持。BIG5:繁体字港澳台地区Document网页的标题标签body网页的主体内
2022-11-06 18:38:36
151
1
原创 html（day.01）
1.了解什么是网页，能够说出网页的组成部分2.了解web标准，w3c组织3.掌握主流浏览器即内核 网页 （网站） 在因特网上用于展示特定内容相关的网页集合（网页） 网页是网站中一页，是构成网站的基本元素 它通常由图片、链接、文字、声音、视频等元素组成 网页要使用网页浏览器来阅读 网页是网站中的一
2022-11-03 20:41:40
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人