css

这是我参与更文挑战的第3天，活动详情查看： 更文挑战 实现效果 触发 hover 时，卡片翻转，实现正反切换 关键 动画效果：添加 transition 过度 正反重叠：最外层相对定位，内部正反两面绝

white-space 这个属性是用来控制空白字符显示的，同时还能控制是否自动换行 值 换行符 空白符 自动换行 <br> normal 默认 当作空白符 合并 × √ nowrap × 合并 √ √

响应式 & 自适应 响应式 Responsice design 媒体查询 媒体查询可以针对不同的媒体类型定义不同样式 关键在于选择屏幕大小的分割点，常见分割点： 600px,900px,1200px,

圣杯布局 & 双飞翼 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局来源于文章 In Search of

使用 span 标签 通过伪类 before after 添加两个左右倾斜 45 度的长条构成关闭按钮 通过 hover 实现鼠标移动上去变色

只列举最简单最常用的水平居中行内元素：text-align:center块级：margin:0auto外层是非position:static，内部设置position:absolute，然后先left

基础盒模型（basic box model）：当浏览器对一个render tree进行渲染时，浏览器的渲染引擎就会根据基础盒模型将所有元素划分为一个个矩形的盒子，这些盒子的外观由样式决定。 每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-leve…

在CSS中所有元素都被一个个盒子包围，理解盒模型的基本原理是使用CSS实现准确布局、处理元素排列的关键。 通过设置 display 来控制盒子外部显示类型。 盒子内部显示类型决定盒子内部元素如何布局，默认情况是正常流布局。 你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦…

在项目过程中会发现一些样式没有生效，通常原因是你创建类两个规则同时对相同的元素生效，决定发生冲突的时候应该使用哪条规则由规则的优先级决定。 现在来看看浏览器如何计算优先级。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配（简单的说…