HTML5
小豆很优秀
后续会继续更新关于前端基础知识以及更深入技术
展开
-
十七、 网格布局
网格布局Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。1、基本概念(1)容器采用grid布局(display:grid)的元素就成为容器(2)项目容器下面的直接子元素就是项目(3)行容器中的水平区域就是行(4)列容器中的垂直区域就是列(5)单元格行与列的交叉的区域就是单元格有一个m行n列的网格,会产生m*原创 2020-12-10 19:13:16 · 322 阅读 · 0 评论 -
十六、响应式布局的概念、 响应式布局的概念、通过媒体查询来适配样式、百分比布局、响应式图片的处理、响应式的优缺点
一、响应式布局的概念2010年5月提出二、响应式布局的概念1、标签设置<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!-- 如果可能,调用 chome 内核,或者高版本的 IE 内核 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&原创 2020-12-10 19:11:50 · 250 阅读 · 0 评论 -
十五、less语法、移动端浏览器及内核分析、viewport、移动端适配方案、移动端重置样式、移动端特殊处理、移动端其他适配方案设备像素、独立像素和css像素、
一、less语法1、注释less共有两种注释风格。标准的CSS注释,多行注释 /* comment */ ,会保留到编译后的文件。单行注释 // comment,只保留在less源文件中,编译后被省略。// 单行注释,这种只会在less文件中存在,不会编译到css里面去/* 注释内容,可以被编译到css文件中去的 */2、导入@import "导入文件的地址";.css 后缀名不能省略,引入 .less 文件可以省略扩展名3、变量定义@变量名:值;使用原创 2020-12-05 03:08:08 · 394 阅读 · 0 评论 -
十四、css3动画库的使用、css3弹性盒子、calc()、css3预处理、什么是less以及好处是什么。
一、css3动画库的使用animate.css css3动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等动画效果;官网地址:https://daneden.github.io/animate.css/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"原创 2020-12-05 03:05:31 · 417 阅读 · 0 评论 -
十三、线性渐变、径向渐变用户界面属性、多列布局、css3过度效果、css3中的变换效果、css3帧动画
一、线性渐变重复线性渐变background: repeating-linear-gradient(red 10%,yellow 20%);线性渐变的兼容性: ie10+.box3 { background: -webkit-linear-gradient(left,red 10%,yellow 20%); background: -moz-linear-gradient(left,red 10%,yellow 20%); background: -o-linear-gra原创 2020-12-05 03:02:15 · 233 阅读 · 0 评论 -
十二、css简介、浏览器兼容的前缀、css3新增选择器、css3新增属性、css3背景属性。
一、css3简介CSS3 是最新的 CSS 标准。CSS3 模块:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面CSS3的优点:CSS3将完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。渐进增强和优雅降级:渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。区别:优原创 2020-12-05 02:56:38 · 214 阅读 · 0 评论 -
十一、HTML5新增的元素、HTML5新增的其他标签、HTML5兼容、HTML5新增的多媒体标签、HTML5新增的表单元素、HTML5新增的表单属性
一、HTML5新增的元素1、HTML5新增的结构标签(1)header标签 网页的头部标签、页眉标签,可以放logo、搜索框等<header></header> (2)footer标签网页的底部标签、页脚标签,可以放版权信息、相关阅读链接等<footer></footer>(3)nav标签导航标签,可以放导航条、侧边导航、页内导航等<nav></nav>(4)article标签文档中独立的内容,例如:一篇原创 2020-12-01 01:00:45 · 367 阅读 · 0 评论 -
九、多栏布局方案、三栏自适应布局、等高布局1
一、多栏布局方案pc端多栏布局: 宽度自适应布局1、两栏自适应布局两栏自适应布局分为:左侧宽度固定,右侧宽度自适应右侧宽度固定,左侧宽度自适应左侧宽度固定,右侧宽度自适应为例,技术原理如下:左侧盒子设置固定的宽度(绝对单位),右侧盒子设置宽度100%;左侧盒子设置绝对定位给右侧盒子添加一个子盒,并且子盒设置padding-left:左侧盒子的宽度<!DOCTYPE html><html lang="en"><head> <m原创 2020-11-27 13:24:01 · 329 阅读 · 1 评论 -
八、精灵技术、css小箭头、css滑动门技术。
一、精灵技术英文名css sprites精灵技术也叫做精灵图、雪碧图、css贴图定位、css图像拼合1、技术原理将很多的小图片拼合到一张大图上,通过background-image、background-repeat、background-position属性将需要显示的小图标正确显示出来就可以了2、优缺点(1)优点减少网页htttp请求次数,提高页面的响应速度(加载速度)减少命名困扰更换风格比较方便(2)缺点必须要限制显示容器的尺寸,需要计算二、css小箭头制作思路:制作两个原创 2020-11-27 13:22:23 · 289 阅读 · 0 评论 -
七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用
一、css其他属性1、vertical-align属性设置元素的垂直对齐方式,适用于行级元素、行块级元素。(1)语法vertical-align: top | bottom | middle | baseline;top 顶部对齐,将元素与父元素中最高的元素的顶部对齐bottom 底部对齐,将元素与父元素中最低的元素的底部对齐middle 居中对齐,将元素放在父元素的中间baseline 基线对齐,将元素放置在父元素的基线的位置上(默认值原创 2020-11-27 13:20:33 · 1758 阅读 · 2 评论 -
六、定位、定位技巧、层级属性、浮动与定位的对比、表单、表单属性、
一、定位1、css的三大布局机制标准流块级元素:垂直方向上一个接一个的排列行级、行块级元素:水平上依次排列(换行或者空格会被解析为一个小空隙)浮动使元素实现水平排列(没有间隙)定位可以使元素自由摆放自己的位置2、定位定位是由定位模式和边偏移属性构成3、偏移属性left 距离左侧的偏移量right 距离右侧的偏移量top 距离顶部的偏移量bottom原创 2020-11-27 13:16:32 · 421 阅读 · 0 评论 -
五、标签相互转换、内联块标签垂直对齐方式、溢出内容的处理、伪元素、浮动
一、标签相互转换1.标签分类(1) 块标签特点: 默认宽度100%,独占一行,可设左右样式div h1-h6 p hr table caption tr thead tbody tfoot ul li ol dl dt dd(2)内联标签特点:默认宽度由内容撑开,多个标签在一行显示,部分样式无效(宽高,上下内外边距)span strong b em i a br del sub sup(3)内联块标签特点:原创 2020-11-27 13:12:51 · 184 阅读 · 0 评论 -
四、margin存在问题、内联标签使用边距、最大最小宽高、背景相关样式、进阶选择器、css三大特性
一、margin存在问题1.重叠问题问题:两个兄弟元素同时设置margin-top和margin-bottom,会出现重叠,取最大值解决办法:避免两个同时设置,只给其中一个方向设置给其中一个盒子套一个大盒子括起来,给大盒子设置overflow:hidden;形成私有区域2.塌陷问题问题:父元素里的第一个子元素设置margin-top,会传递给父元素解决办法:避免使用margin-top给父元素设置padding-top:1px;给父元素设置border-top:1p原创 2020-11-27 13:10:30 · 444 阅读 · 0 评论 -
三、文字样式、文本样式、颜色与单位、盒模型
一、文字样式(可继承)继承: 给父元素设置样式后,里边的子元素也可以应用上继承来的样式优先级没有自己本身优先级高1.文字大小浏览器默认字体大小16px 支持最小字体是12px font-size: 30px;2.行高技巧:行高的值和盒子高度一致时,可实现单行文字垂直方向居中line-height: 80px;3.文字是否倾斜font-style: italic; 倾斜font-style: normal; 不倾斜4.文字是否加粗font-weight:原创 2020-11-27 13:08:54 · 241 阅读 · 0 评论 -
二、HTML表格、列表、css引入方式、基本选择器
一、表格用途: 之前是用来布局的,现在明显是表格的数据才用1.标签块标签table 整个表格的容器tr 表示一行caption 表格标题 一个表格里只能有一个标题thead 有表格表头的语义tbody 有表格主体的语义tfoot 有表格页脚的语义内联块标签th 表示一个单元格 , 有表头的语义,自带文字加粗和居中的样式td 表示一个普通的单元格2.属性width / height设置到单元格上 , 设置宽度,该单元格所在一列的宽度原创 2020-11-27 13:05:51 · 183 阅读 · 0 评论