带你了解CSS基础知识,样式
目录什么是CSS在HTML页面中嵌套使用CSS的两种方式三种方式代码展示链入外部样式表文件以下是常用的样式总结什么是CSS
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
在HTML页面中嵌套使用CSS的两种方式
第一种方式：在标签内部使用style属 ...
【Web前端HTML5&CSS3】19-弹性盒简介
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录弹性盒简介1、基本概念弹性盒弹性容器弹性元素2、弹性容器的属性主轴属性排列方式自动换行空白空间辅轴属性辅轴对齐空白空间弹性居中3、弹性元素的属性伸展系数缩减系数基础长度排列顺序覆盖辅轴
弹性盒简介
1、基本概念
弹性盒
flex（弹性盒、伸缩 ...
【Web前端HTML5&CSS3】18-less简介
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录less 简介1、安装插件2、编写 less3、less 语法less 注释父子关系嵌套变量其他4、混合函数其他5、补充
less 简介
less是一门css的预处理语言
less是一个 css 的增强版，通过less可以编写更少的代码实现更强大的样式
在less中添加了许多的新特性： ...
HTML5 App Download Page (H5 App 下载落地页) All In One
HTML5 App Download Page (H5 App 下载落地页) All In One
/**
浏览器版本信息
* @type {Object}
* @return {Boolean} 返回布尔值
*/
function browser() {
var u = navigator.userAgent.toLowerCase();
var app = navigator.appVersion.toLow ...
【Web前端HTML5&CSS3】15-表格
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录表格1、表格2、长表格3、表格的样式HTML 代码CSS 代码4、表单文本框密码框提交按钮单选框多选框下拉列表5、表单补充按钮
表格
1、表格
在现实生活中，我们经常需要使用表格来表示一些格式化数据：
课程表、人名单、成绩单...
同样在网页中我们也 ...
【Web前端HTML5&CSS3】13-背景
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录背景1. PS 的基本设置2. 背景练习 1：线性渐变效果的背景图练习 2：按钮点击效果
背景
1. PS 的基本设置
工欲善其事，必先利其器
在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置
这里就不详细介绍 PS 的安装了，因为网上一抓一大把， ...
【Web前端HTML5&CSS3】12-字体
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录字体1. 字体相关的样式2. font-family3. 几种字体手写体艺术体乱码字体中文字体4. @font-face5. 图标字体（iconfont）图标字体简介fontawesome图标字体其他使用方式通过伪元素设置通过实体设置iconfont6. 行高行高line height字体框字体的简写属性7 ...
【Web前端HTML5&CSS3】11-定位的简介
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录定位的简介1. 相对定位偏移量（offset）相对定位的特点2. 绝对定位绝对定位的特点包含块（containing block）水平方向的布局水平居中垂直方向的布局垂直居中水平垂直居中小结3. 固定定位固定定位的特点4. 粘滞定位粘滞定位的特点5. 几种定位的对比6 ...
【Web前端HTML5&CSS3】10-高度塌陷与BFC
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录高度塌陷与 BFC1. 高度塌陷2. BFC3. clear4. after5. clearfix
高度塌陷与 BFC
1. 高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高 ...
【Web前端HTML5&CSS3】09-浮动
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录浮动1. 浮动的简介2. 浮动的特点3. 脱离文档流的特点4. 简单布局5. 练习：w3school 导航条
浮动
1. 浮动的简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置于元素的浮动
none 默认值，元素不浮动
left 元素向左浮动
ri ...
浅谈CSS不规则边框的生成方案
目录需求背景，给不规则图形添加边框尝试使用 drop-shadow 添加边框使用 SVG feMorphology 滤镜添加边框feMorphology 滤镜总结需求背景，给不规则图形添加边框
在我们日常开发中，时长会遇到一些非矩形、非圆形的图案。类似下面这些：
使用纯 CSS，搭配一些技巧，是可以制作出上面的图形的，当然这只是需求的第一步。
紧接 ...
详解CSS故障艺术
目录概述使用混合模式实现抖音 LOGO图片的 Glitch Art 风动态类抖音风格 Glitch 效果Glitch Art 风格的 404 效果clip-path 登场使用 clip-path 实现文字断裂动画clip-path 的 Glitch Art总结概述
本文的主题是 Glitch Art，故障艺术。
什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻 ...
详解CSS不受控制的position fixed
目录失效的 position:fixedStacking Context -- 堆叠上下文创建堆叠上下文的方式一探position:fixed失效的最终原因不同内核的不同表现position:fixed的其他问题失效的 position:fixed
在许多情况下，position:fixed将会失效。MDN用一句话概括了这种情况：
当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先 ...
详解CSS伪元素的妙用单标签之美
目录:before和::before的区别哪些标签不支持伪元素？利用 after 清除浮动伪元素与css sprites 雪碧图单个颜色实现按钮 hover 、active 的明暗变化变形恢复伪元素实现换行，替代br换行标签增强用户体验，使用伪元素实现增大点击热区more magic -- 单标签图案:before和::before的区别
在介绍具体用法之前，简单介绍下伪类和伪 ...
解析原生JS getComputedStyle
目录getComputedStyle 与getPropertyValueIE 下的 currentStyle与getAttributestyle 与getComputedStylegetComputedStyle 与defaultView原生JS实现CSS样式的get与setgetStyle(elem, style)opacity 透明度的设定float 样式的获取width | height 样式的获取获取样式的驼峰表示法setStyle(elem, style, value)getComputedStyle ...
浅谈由position属性引申的css进阶讨论
目录1.normal flow 2.containing block 3.BFC 1.normal flow
normal flow(正常流):正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。
在这种方式里，块级元素在它们的包含 ...
web前端-HTML5
HTML5简介
HTML(Hyper Text Markup Language)(超文本标记语言)。基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
页面部分内容
</body>
</html>
HTML5的语法变化
标签不再区分大小写
元素可以省略结束标签
空元素语法的元素
空元素语法的 ...
【Web前端HTML5&CSS3】07-实战练习
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录实战练习1. 京东图片列表开发准备布局剖析结构搭建样式添加方式 1方式 2细节完善背景色外边距最终效果核心代码2. 京东左侧导航条开发准备布局剖析结构搭建样式添加细节完善文字调整符号调整悬浮样式最终效果核心代码存疑问题3. 网易新闻列表结构搭 ...
【Web前端HTML5&CSS3】06-盒模型
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录盒模型1. 文档流（normalflow）2. 块元素3. 行内元素4. 盒子模型盒模型、盒子模型、框模型（box model）内容区（content）边框（border）内边距(padding）外边距（margin）5. 水平方向布局6. 垂直方向布局元素溢出边距折叠兄弟元素父子元素脱离文档 ...
【Web前端HTML5&CSS3】04-CSS语法与选择器
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录CSS 语法与选择器1. CSS 简介层叠样式表内联样式（行内样式）内部样式表外部样式表2. CSS 基本语法注释css 中的注释html 中的注释JS(JavaScript)和 JQuery 中的注释基本语法选择器声明块3. CSS 选择器通配选择器（Universal selector）元素选择器（ ...
