随笔分类 - Web前端从入门到精通
摘要：弹性盒简介 1、基本概念 弹性盒 flex（弹性盒、伸缩盒、弹性盒子，弹性布局，弹性空间） 是c3中的又一种布局手段，它主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 2、弹性容器的属性 主轴与侧轴 主轴：弹性元素的排列方向称为主轴 侧轴：与主轴垂
阅读全文
摘要：变形：平移、旋转与缩放 变形就是指通过 css 来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 translateX() 沿着由方向平移 translateY() 沿着 y 轴方向平移 translateZ() 沿着 z 轴方向平移平移元素 百分
阅读全文
摘要：过渡与动画 1、过渡 过渡（transition） 通过过渡可以指定一个属性发生变化时的切换方式 通过过渡可以创建一些非常好的效果，提升用户的体验 属性值 transition-property：指定要执行过渡的属性 多个属性间使用,隔开； 如果所有属性都需要过渡，则使用all关键字； 大部分属性都
阅读全文
摘要：背景 1. 背景 background-color 设置背景颜色 background-image 设置背景图片 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满 如果背景图片大小大于元素，则背景图片一部分会无法完全显示 如果背景图片大小等于元素，则背景图片会直接正常显示 backg
阅读全文
摘要：字体 1. 字体相关的样式 我们前面讲过字体的两个属性 color用来设置字体颜色 font-size字体的大小 em 相当于当前元素的一个font-size rem 相对于根元素的一个font-size 2. font-family font-family 字体族（字体的格式） 我们经常使用的一些
阅读全文
摘要：定位的简介 需求分析 按照我们之前所学知识，可以怎么实现呢？ 应该来说不难，很容易实现 CSS .box2 { width: 200px; height: 200px; background-color: yellow; /* 左外边距、上外边距 */ margin-left: 200px; mar
阅读全文
摘要：高度塌陷与 BFC BFC： 全称:Block Formatting Content;是一个与上下文无关的独立的渲染区域；（块级格式化上下文） 是一种布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生
阅读全文
摘要：浮动 1. 浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 作用： -> 可以实现元素并列显示的效果； -> 实现环绕布局的效果； 注意 元素设置浮动以后，水平布局的等
阅读全文
摘要：1. 文档流（normalflow） 网页是一个多层的结构，一层摁着一层 通过 CSS 可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流 文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列 对于我们来元素主要有两个状态 在文档流中 不在文档流中（
阅读全文
摘要：1. 继承 样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上 继承是发生在祖先后后代之间的，继承的设计是为了方便我们的开发 利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式 注意，并不是所有的样式都会被继承： 比如背景相关
阅读全文
摘要：CSS 语法与选择器 1. CSS 简介 层叠样式表 网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层 总之一句话，CSS 用来设置网页中元素的样式 使用 CSS 来修改元素样式的方式大致可以分为 3 种 内联样式（行内样式） 在标签
阅读全文
摘要：一、文本标签：针对文字设定的一些标签 1、标题标签： <h1></h1> 一级标题 最重要的标题（一般会用来放logo） <h2></h2> 二级标题 <h3></h3> 三级标题 <h4></h4> 四级标题 <h5></h5> 五级标题 <h6></h6> 六级标题 注：h1 - h6 默认自带
阅读全文
摘要：一、网页的基本结构 meta 主要用于设置网页中的一些元数据，元数据并不是给用户看的 charset ：指定网页的字符集 name ：指定的数据的名称 keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开 description：表示网站的描述信息 content ：指定的
阅读全文
摘要：1. 软件的分类 1.1. 系统软件 Windows Linux macOS 1.2. 应用软件 Office QQ 1.3. 游戏软件 绝地求生 王者荣耀 2. 客户端与服务器 通常情况下，现在的软件一般由两个部分组成： 客户端：用户通过客户端来使用软件。 服务器：服务器负责在远程处理业务逻辑。
阅读全文
