Mark

目录1、认识 flex 布局2、flex 布局模型3、flex 相关属性4、flex container 相关属性5、flex items 相关属性1、认识 flex 布局flex 布局（Flexible 布局，弹性布局，弹性盒子），是CSS3的一种新布局模式。flex 布局是目前 web 开发中使用最多的布局方案，目前在移动端用的最多，PC端也使用越来越多了。在认识 ...

1、认识 grid 布局grid 布局（网格布局） 和 flex 布局一样，都是 CSS3 的新布局模式，但 flex 布局是一维布局，grid 布局是二维布局，相比传统布局 gtid 布局在页面整体划分上更加出色，而且它并不是只能单独使用，依然可以搭配 flex 布局以及传统定位布局一起使用。总之 grid 布局功能强大，虽然目前存有部分浏览器兼容问题，但问题不大。先来了解几个 grid...

描述 1 如果图片下面有奇怪的底部margin，可以添加一个 vertical-aligh：middle。 2 以后使用：margin-left：auto，margin-right：auto 来代替 margin 0 auto 实现居中效果吧。 3 float 布局最好不要给外层的 container 设置宽度，让其自由撑开，或者不要给内部的横向最后的元素设...

目录1、渲染前准备：2、三个渲染步骤3、浏览器渲染过程总结1、渲染前准备：浏览器在渲染页面前，会首先解析 HTML 和 CSS 代码，根据代码构建相应的 HTML 树（DOM） 和 CSS 树（CSSOM），然后将两棵树合并称为一棵渲染树（render tree）。过程如下图所示：2、三个渲染步骤浏览器渲染的步骤分为三个：布局（Layout）、绘制（Paint）、...

目录1、常见定位方案2、BFC 是个啥？3、创建 BFC 的方式4、BFC 特性及应用5、总结1、常见定位方案在讲BFC 之前，先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案：（1）普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元...

1、static：静态定位，所有标准文档流中的元素默认值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。2、relative：相对定位，不脱离标准文档流。该关键字指定元素会相对于自身标准文档流中的位置进行相应的偏移，可以给元素设置 top、right、bottom、left 值；主要用途：微调元素...

在 CSS 的盒子模型中，有两个重要的选项：box-sizing:content-box 和 box-sizing:border-box，content-box 被称为正常盒子模型，采用标准模式解析计算，也是默认模式；border-box 被称为怪异盒子模型，采用怪异模式解析计算；两种模式的区别：标准模式会被设置的 padding 撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。...

目录1、div 宽高已知—进行水平垂直居中1、div 宽高未知—进行水平垂直居中<div class="parent"> <div class="child"></div></div>1、div 宽高已知—进行水平垂直居中（1）子绝父相 与 负边距实现.parent { position: relative;...

目录1、transition 过渡2、animation 动画3、transition 和 animation 的区别1、transition 过渡transition 是 css 过渡动效属性，它可以让元素变化的有一个过渡过程而不至于突然出现或者改变样式，参数如下：属性 描述 transition 属性名 | 时长 | 过渡方式 | 延迟 transi...

目录1、文本溢出显示省略号2、鼠标浮动查看全部内容1、文本溢出显示省略号今天做项目时遇到一种需求：文本溢出截断省略，上网查阅了一下，还是挺简单的，但是考虑到自己疑似老年痴呆的大脑，就在这里整理一下，以备以后碰到这种同样的需求。如果是单行溢出显示省略可以使用如下代码：div { white-space:nowrap; /* 设置文字在一行显示，不能换行 */ ...

1、三个属性分别是什么？1.1、opacity属性：指定了一个元素的透明度，值：number 类型的值，0~1。1.2、visibility属性：显示或隐藏元素而不更改文档的布局，值：visible、hidden、collapse。1.3、display属性：指定了元素的显示类型，被设置成none的元素，将从可访问性树中移除，包括其子元素在内。2、三个属性的区别2.1、结构上：...