![](https://img-blog.csdnimg.cn/2021011313043947.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML&CSS
文章平均质量分 94
HTML&CSS
YK菌
大家好,我是YK菌 ,一个微系前端 ,爱思考,爱总结,爱记录,爱分享 ,欢迎关注我呀
展开
-
【青训营】月影老师告诉我写好JavaScript的三大原则之——组件封装
月影老师告诉我们写好JavaScript(包括其他语言)的三大原则 ① 各司其责 ② 组件封装 ③ 过程抽象今天我们来学习写好JavaScript的另一个原则:组件封装原创 2021-08-26 13:14:54 · 702 阅读 · 0 评论 -
【青训营】HTML基础 - 语义化标签 - 浏览器渲染过程 - 笔记及拓展
HTML是接触前端所学习的第一个技术栈了,可以说是前端学习的启蒙技术栈(哈哈哈) 博主还是很久之前学习的,这次趁着字节跳动青训营的活动,就再学习一遍HTML。一小时的课程,巩固了之前的一些知识,也学到了很多新知识。我把这次课程的内容与我这一年来学习前端的经验相结合,重新整理了字节老师上课的内容,产出这篇笔记,来和大家一起学习~原创 2021-08-20 13:30:24 · 578 阅读 · 0 评论 -
【CSS】flex实战 - 移动版携程网首页制作 - CSS3 - flex布局
flex实战原创 2021-08-07 19:36:40 · 707 阅读 · 0 评论 -
【CSS】看了C站CSDN源码,这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding
双飞翼布局圣杯布局原创 2021-07-06 14:41:50 · 351 阅读 · 0 评论 -
【CSS】面试题总结 - 基础知识总结 - 复习专用 - 前端面试必备 - 吐血整理
文章目录1. 基础知识类CSS的层叠性继承性哪些属性可以继承常用选择器选择器优先级伪类选择器与伪元素选择器关于伪类 LVHA 的解释块级元素行内元素伪类与伪元素的区别4. 什么是盒子模型1. 什么是标准流2. 什么是浮动?用处3. 什么是定位?用处display 有哪些值?说明他们的作用。负外边距BFC2. CSS3新特性新增伪类flex网格布局CSS3 新增伪类有那些CSS3 有哪些新特性?(根据项目回答)3. 实际应用类1. 如何让盒子垂直居中2. 用纯 CSS 创建一个三角形的原理是什么?一个满屏品字原创 2021-05-22 20:39:27 · 1172 阅读 · 1 评论 -
【CSS】实现盒子居中对齐的七种方法
文章目录让盒子垂直居中让盒子垂直居中有一个盒子div { width: 200px; height: 200px; background-color: pink;}让盒子水平居中比较简单加上margin: 0 auto;即可上面有缝隙,清除一下祖先元素的默认样式html,body { margin: 0; padding: 0;}让盒子垂直居中...原创 2021-05-12 19:04:54 · 5431 阅读 · 3 评论 -
【CSS】十分钟彻底弄懂flex布局 - 弹性盒 - 伸缩盒 - 代替浮动
flex 基础 + 实战原创 2021-03-08 19:41:14 · 1101 阅读 · 1 评论 -
【CSS】css的预编译语言less的基本使用指南-esay less插件使用-浏览器调试less-mixins混合函数
less的基本使用1. less是什么?1.1 CSS的一些问题1.2 less的作用1.3 vscode好用的less插件2. less 的(最)基本使用2.1 注释2.2 变量2.2.1 变量的语法2.2.2 几个注意点2.2.3 引用其他属性的值2.3 & 表示外层父元素2.4 extend 扩展2.5 mixin混合复制样式作为函数可以传参数内置的mixins函数2.6 可计算2.7 import2.8 调试1. less是什么?官方中文网址 https://less.bootc原创 2021-01-23 21:06:21 · 586 阅读 · 0 评论 -
【CSS】CSS3新特性-新增选择器-盒子模型-滤镜-过渡-2D-3D-透视-动画-浏览器私有前缀等
文章目录1. 现状2. 新增选择器2.1 属性选择器2.2 结构伪类选择器2.3 伪元素选择器(重点)使用场景2.3.1 伪元素字体图标2.3.2 仿土豆效果2.3.3 伪元素清除浮动3. 盒子模型4. 其他特性4.1 滤镜 filter4.2 calc函数4.3 过渡transition (重点)5. 2D转换5.1 translate 位移5.2 rotate 旋转5.3 2D转换中心点 transform-origin5.4 缩放scale5.5 2D转换综合性写法5.6总结6. 动画 animati原创 2020-12-20 09:04:53 · 346 阅读 · 2 评论 -
【CSS】高级技巧-精灵图-字体图标-三角-常用布局技巧-初始化等
文章目录1. 精灵图 Sprites1.1 为什么需要精灵图1.2 使用精灵图Sprites1.3 示例2.字体图标 iconfont2.1 为什么需要字体图标2.2 步骤2.2.1 下载2.2.2 引入2.2.3 追加3. CSS三角4. CSS用户界面样式4.1 更改用户的鼠标样式 cursor4.2取消表单轮廓 outline4.3防止拖拽文本域 resize5. vertical-align 属性应用解决图片底部默认空白缝隙问题6. 溢出的文字省略号显示6.1 单行文本溢出显示省略号6.2 多行文本原创 2020-12-20 09:02:40 · 370 阅读 · 1 评论 -
【CSS】字体font-文本text-元素显示与隐藏display-背景设置background
文章目录字体1. 字体系列2. 字体大小3. 字体粗细4. 文字样式5. 复合属性6. 总结文本1.文本颜色2.对齐文本3. 装饰文本4. 文本缩进5. 行间距元素显示1. 什么是元素显示模式2. 块元素3. 行内元素4. 行内块元素5. 元素显示模式总结6. 元素显示模式转换7. 小技巧 单行文字垂直居中的代码背景设置1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图像固定6. 背景属性复合写法7. 背景颜色半透明8. 总结字体1. 字体系列font-familyfont-f原创 2020-12-20 08:58:32 · 1592 阅读 · 1 评论 -
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录1. 为什么需要2. 定位组成定位 = 定位模式 + 边偏移2.1 定位模式2.2边偏移3. 静态定位 static (了解)4. 相对定位 relative (重要)5. 绝对定位 absolute (重要)6. 子绝父相的由来子级使用绝对定位,父级则需要相对定位相对定位经常用来作为绝对定位的父级因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到6. 固定定位 fixed (重要)小技巧:固定版心右侧位置7.原创 2020-12-06 14:46:49 · 2863 阅读 · 0 评论 -
【CSS】浮动float-清除浮动-标准流-浮动布局
文章目录1. 传统网页布局三种方式1.1 标准流(普通流/文档流)1.2 浮动网页布局第一准则:多个块级元素纵向排列找标准流,横向排列找浮动2. 浮动特性3. 浮动元素经常和标准流父级搭配使用网页布局第二准则:先设置盒子大小,之后设置盒子的位置4. 浮动布局注意点5. 清除浮动5.1 为什么要清除浮动5.2 清除浮动本质5.3 清除浮动方法5.3.1 额外标签法(隔墙法)5.3.2 父级添加overflow属性5.3.3 父级添加after伪元素5.3.4 父级添加双伪元素1. 传统网页布局三种方式普原创 2020-12-06 14:44:42 · 455 阅读 · 0 评论 -
【CSS】盒子模型-边框-内外边距-外边距合并-清除内外边距-圆角边框-盒子阴影-文字阴影
文章目录1. 盒子模型(Box Model)组成2. 边框 border表格的细线边框边框会影响盒子的实际大小3. 内边距 paddingpadding会影响盒子大小盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小4. 外边距 margin让块级盒子水平居中让行内元素、行内块元素水平居中5. 外边距合并相邻块元素垂直外边距合并解决方法嵌套块元素垂直外边距的塌陷解决方法6. 清除内外边距7. 圆角边框8. 盒子阴影9. 文字阴影1. 盒子模型(Box Model)组成b原创 2020-12-01 09:16:36 · 1081 阅读 · 0 评论 -
【CSS】入门-特性-基础选择器&复合选择器-类-id-通配符-后代选择器-子元素选择器-伪类选择器-并集选择器
文章目录1. 选择器的作用2. 选择器分类3. 基础选择器3.1 标签选择器3.2 类选择器 .class3.3 id选择器 #idid和class的区别3.4 通配符选择器*3.5 总结4. 复合选择器4.1 后代选择器4.2 子元素选择器 >4.3 并集选择器 ,4.4 伪类选择器 :4.4.1 链接伪类选择器4.4.2 :focus 伪类选择器4.5 总结1. 选择器的作用选择标签2. 选择器分类基础选择器标签选择器类选择器id选择器通配符选择器复合选择器3. 基原创 2020-11-30 16:04:33 · 404 阅读 · 0 评论 -
【HTML】HTML5新增更加丰富的语义化,多媒体标签
IE9+以上版本才支持文章目录1. 新增的语义化标签2. 新增的多媒体标签2.1 视频 video2.2 音频 audio3. 新增的input类型4. 新增的表单属性1. 新增的语义化标签之前都是用没有语义的div标签<header> /*头部标签*/<nav> /*导航标签*/<article> /*内容标签*/<section> /*定义文档某个区域*/<aside> /*侧边栏标签*/<footer> /.原创 2020-11-30 15:50:18 · 194 阅读 · 0 评论 -
【HTML】最基础最常用的html标签 (入门初学必备的html标签)
文章目录1. 标题标签2. 段落标签Paragraph3. 换行标签Break4.文本格式化标签加粗斜体删除线下划线5. 盒子标签6. 图像标签image7. 超链接anchor8. 注释标签9. 特殊字符10. 表格标签10.1 相关标签10.2相关属性10.3合并单元格11. 列表标签11.1 无序列表11.2 有序列表11.3 自定义列表11.4 列表总结12. 表单标签12.1 表单域12.2 表单控件(表单元素)12.2.1 input 收集用户信息12.2.2 label 标注/标签12.2.3原创 2020-11-30 15:48:15 · 850 阅读 · 0 评论