随笔分类 - 04-CSS基础
摘要：一. CSS中的内置函数 1. var 使用CSS定义的变量; 属性名需要以两个减号（--）开始; 属性值则可以是任何有效的CSS值; 注：自定义属性的可见作用域(只在选择器内部有效)，所以推荐将自定义属性定义在html中，也可以使用 :root 选择器; <style> :root { /* 定义
阅读全文
摘要：一. 定位 1. 常见网页布局形式 (1).标准文档流： A.块级元素独占一行 → 垂直布局 B.行内元素/行内块元素一行显示多个 → 水平布局 (2).浮动 可以让原本垂直布局的 块级元素变成水平布局 (3).定位 A. 可以让元素自由的摆放在网页的任意位置 B. 一般用于 盒子之间的层叠情况 2
阅读全文
摘要：一. 伪元素 1. 定义 一般页面中的非主题内容可以使用伪元素 2. 与普通元素的区别 (1). 元素：HTML 设置的标签 (2). 伪元素：由 CSS 模拟出的标签效果 3. 种类 (1) ::before 在父元素内容的最前面添加一个伪元素 (2) ::after 在父元素内容的最后添加一个伪
阅读全文
摘要：一. 选择器 1. 伪类选择器 (1). first-child 第一个 last-child 最后一个 (2). nth-child(x)，正着数 ①. 表示单个元素， 比如nth-child(2),表示第二个元素 ②. 表示多个元素 A. nth-child(2n)、nth-child(even
阅读全文
摘要：一. 字体 1. 字体大小：font-size 数字+px，谷歌浏览器默认文字大小是16px 2. 字体粗细：font-weight (1). normal(对应400)、bold(对应700) (2). 100--900的整百数 3. 字体样式：font-style (1). 正常(默认值)：no
阅读全文
摘要：一. 简介 历时4个月，边学习，边整理 ES6-ES11可参考之前的系列：https://www.cnblogs.com/yaopengfei/p/14291045.html 后续计划从面试的角度整理一下JS专题，相对侧重于基础 【已完成】 二. CSS系列 阶段一：CSS基础总结 第一节：字体、文
阅读全文
摘要：一. 简介 1. 移动端常见布局 (1). 移动端单独制作 A. 流式布局（百分比布局） B. flex 弹性布局（强烈推荐） C. less+rem+媒体查询布局 D. 混合布局 (2). 响应式 A. 媒体查询 B. bootstarp PS. 流式布局：就是百分比布局，也称非固定像素布局。 通
阅读全文
摘要：一. 定位介绍 谈到定位，顾名思义，就确定元素的位置，定位分为三种：相对定位、绝对定位、固定定位；分别用 position：relative、position：absolute、position：fixed来表示，它们分别有着不同的用法和使用场景，比如：相对定位通常用来微调元素的位置，用来做字绝父相
阅读全文
摘要：一. 浮动的性质 1. 脱标 无论是块级元素还是行内元素，一旦浮动了，就脱离标准流了，就可以设置宽和高了。 下面事例是两个div，其中第一个div浮动了。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></
阅读全文
摘要：一.标准文档流 标准文档流包括：块级元素和行内元素。 (1). 块级元素 特点： 一个元素单独一行，不与其他元素并行，可以设置其宽度和高度，如果不设置宽度，宽度默认为其父元素的100%。 (2). 行内元素 特点：与其他元素并行，不能设置其宽度和高度，默认宽度为内容的宽度。 二.相互转换 (1).
阅读全文
摘要：1. 盒模型的五个属性 盒模型主要涉及的属性有：width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。 2. 盒模型的两种模式 模式一：width=盒子自身的width （正常情况） 模式二：width=盒子自身的width+左paddi
阅读全文
摘要：一. 继承性 1. 含义：从自己开始直到所包裹的最小的元素，都可以继承一些特有的属性。 2. 作用范围： a. color、text-开头的、line-开头的、font-开头的，均可以继承。 b. 文字样式的，都能继承；所有关于盒子的、定位的、布局的都不能继承。 3. 实例： 二. 层叠性 1. 背
阅读全文
摘要：1.七个基本属性 颜色：color，背景颜色：background-color，字体大小：font-size，加粗：font-weight:bold，倾斜：font-style:italic， 文字居中：text-align:center，下划线：text-decoration：underline。
阅读全文
摘要：一.背景 这里将陆续介绍前端CSS中相关知识，先介绍CSS2.1，后续会介绍CSS3的相关属性，通过该系列的文章，希望能给准备转战前端的人员一些帮助，同时也帮助自己梳理知识，文章中如有错误，欢迎指出。 下面是CSS2.1第一个阶段的知识框图，后面会陆续更新该系列后续文章。 二.整体介绍 (一).基础
阅读全文
摘要：1.设置浏览器兼容版本 <meta http-equiv="X-UA-Compatible" content="IE=8"> 表示IE浏览器默认版本为8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 表示IE浏览器默认选择最高版本 2.
阅读全文