随笔分类 - Web前端基础学习
零基础到进阶
摘要：6.8、移动端布局 6.8.1、移动端浏览器及内核 1、浏览器： UC浏览器、QQ浏览器、百度浏览器、夸克浏览器、360浏览器... safari、chrome... 2、内核：webkit... 6.8.2、viewport **解决移动端浏览器的屏幕分辨率大小问题** ###1、 视口 PC端视
阅读全文
摘要：6.7、预处理 6.7.1、什么是预处理 一种新语言 基本思想：用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用预处理语言进行编码工作 ##6.7.2、less less是什么 less是一种编程语言，主要是为为css增加一些编程的特性，将css作为目标生成
阅读全文
摘要：6.6、弹性盒子 6.6.1、弹性盒子简介 ###1、特点 flex布局 简单、快速、高效页面布局 ###2、flex布局与传统布局对比 传统布局: 1、兼容性好 2、PC端页面更多使用传统布局 3、布局繁琐 4、有局限性，不能在移动端有很好的布局 flex布局： 1、 IE11及更早版本的不支持或
阅读全文
摘要：6.5、css3背景属性 6.5.1、多背景 background-image: url(图片路径), url(图片路径); 多背景中背景图书写越靠前，显示越靠前 6.5.2、background-size属性 背景图尺寸 background-size: 数值; 按比例缩放 background-
阅读全文
摘要：六、CSS3学习 6.1、css3特点 ###1、特点 css的升级版本，在css2基础上新增许多特性，弥补css2不足 css3按照模块进行设计，比较重要的模块包含：选择器、框模型、背景和边框、2D|3D变换、动画、多列布局、用户界面 ###2、css3现状： 1、部分属性在浏览器中需要添加兼容性
阅读全文
摘要：五、HTML5 5.1、HTML5历史 经历web1.0 → web2.0时代 1999 出现 2004 提出 2007 被W3C接纳 2008 第一份正式草案 2014 官方推荐 2020 完成最终测试 2022 正式发布 5.2、HTML5的新特性 新增语义化的标签 新增表单元素和表单属性 新增
阅读全文
摘要：4.25、多列布局 自适应 解决不同设备提供不同版本的页面问题 自适应布局 屏幕分辩率发生变化时，页面中的元素的位置会变化而大小不变 4.25.1、两列自适应布局——左侧宽度固定，右侧宽度自适应 1）左右两个盒子，左侧盒子宽度固定，右侧盒子宽度设置为100% 2）左侧盒子设置绝对定位position
阅读全文
摘要：4.24、IE兼容问题 4.24.1、IE8中图片边框问题 解决方案： img{ border: none; } 4.24.2、IE8中背景复合属性写法问题 现象： background: url(images/esWe.jpg)no-repeat 0 0; 解决方案： background: ur
阅读全文
摘要：4.23、表单 用于采集用户输入数据 发送服务器 实现用户和服务器之间数据交互 一个完整表单包含：表单域、表单元素--表单控件、提示信息--文本 4.23.1、表单标签--form 块级元素 用于声明表单，定义数据采集范围 一个页面中可以有多个form标签，多个form标签为并列关系，不能嵌套 用户
阅读全文
摘要：4.22、文本溢出处理 text-overflow属性 text-overflow: clip;/* 溢出裁剪 */ text-overflow: ellipsis;/* 溢出显示省略号 */ text-overflow: string;/* 溢出内容用字符串表示，仅在火狐浏览器中有效 */ tex
阅读全文
摘要：4.20、BFC 4.20.1、什么是BFC？ BFC-block formatting context 块级格式化上下文 W3C css2.1 概念 页面中的一个渲染区域 web页面可视化，css视觉渲染的一部分，用于决定块级盒子的布局或浮动相互影响范围的一个区域 本质：一个封闭的盒子 4.20.
阅读全文
摘要：4.18、css sprites精灵图 4.18.1、css sprites？ 精灵技术、雪碧技术，也可以解释为css图像拼合或css贴图定位 将一堆小图整合在一张大图上，通过css属性“background-image、background-repeat、background-position”将
阅读全文
摘要：4.17、ps--photoshop的简单使用方法 测图、获取图片、修改图片 4.17.1、文件操作 新建文件 文件菜单--新建 或 ctrl + n 工作区中的灰白格子表示背景透明 打开文件 文件菜单--打开 或 ctrl + o 4.17.2、设置单位 编辑菜单--首选项--单位与标尺--将标尺
阅读全文
摘要：4.13、显示与隐藏 如何让元素隐藏： 方法一： opacity属性 opacity: 0; 元素透明，占位依然存在（实现隐藏） opacity: 1; 元素不透明 方法二： display属性 display: none; 元素隐藏，不占位（实现隐藏） display: block|inline|
阅读全文
摘要：4.12、定位 css定位机制：普通流、浮动、定位 4.12.1、定位原理 css的定位属性允许相对于元素本身，相对于父元素，相对于浏览器窗口位置调整 网页中 覆盖关系 定位偏移属性 left属性|right属性 top属性|bottom属性 属性值：auto|数值|inherit 定位偏移属性不能
阅读全文
摘要：4.11、透明度 4.11.1、rgba(r,g,b,a) 颜色模式 兼容性：IE8及以下版本的浏览器中不支持，IE9+支持 使用： background-color属性、color属性、border-color属性中设置透明度 语法： rgba(r,g,b,a) r-red 取值范围0-255 g
阅读全文
摘要：4.10、vertical-align属性 垂直对齐方式 4.10.1、属性 vertical-align: top; 顶端对齐 vertical-align: middle;中部对齐 vertical-align: bottom; 底端对齐 vertical-align: baseline; 默认
阅读全文
摘要：4.9.5、清浮动的方法 (1) 为浮动元素的父级盒，设置固定的高度——不够灵活，适用于高度固定的布局中 (2) 为浮动元素的父级盒，加浮动——会产生新的浮动问题 (3) 为浮动元素的父级盒，加overflow属性，属性值hidden|auto|scroll——可能会导致内容显示不完全，代码简洁
阅读全文
摘要：4.8、标签分类 Html中标签众多，一般来说会根据标签的特性进行分类，比较块级标签、行级标签、行块级标签以及几个特殊标签。 4.8.1、块级标签 block level 特性 宽度默认撑满整个父元素 高度由内容撑开 独立成行——垂直布局 具有盒模型特征（默认可以设置宽、高、padding、bo
阅读全文
摘要：#前端学习——基础篇 ##四、CSS学习 4.7、css三大特性 一、继承性 子元素继承父元素的样式 不是所有的属性都能被继承（width、height、background、padding、border、margin、text-decoration） 可以继承的属性（部分）： 字体系列属性 fon
阅读全文
