display 属性除了前面说得这三种属性值之外，还有 flex、grid、table 等值。但目前用得最多的还是 flex 和 grid 这两种，它们可以说是目前主流的 CSS 布局方式。...但是如果我们对元素设置了向左浮动，那么它们就会往左浮动，三个块级元素都浮动到了同一行，如下图所示。...我把文章中涉及到的例子都整理到了 CodePen 上，方便大家尝试，有需要的可以看看：https://codepen.io/Ronald-Chan/pen/wvRdBGL flex 布局 对于 flex...不像 float 布局一样，需要思来想去的，非常麻烦。 考虑到问文章篇幅和主题问题，关于如何使用 flex、grid 进行排版布局，这里就不延展展开了，后续有机会再分享 flex 布局相关内容。...但这次通过将属性之间进行对比，再深入了解了一下 CSS 的发展历程，对 CSS 布局的知识有了整体的了解。知道过去用的是什么方式布局，现在及未来要用什么方式布局，对 CSS 布局就更有底了。
描述：在 HTML 中首先会使用 CSS 来对元素进行定位，我们将学习如何使用 CSS 来控制和定位网页元素的位置、大小和布局。...以下是一些与 CSS 元素定位相关的学习资源和主题, 我们将一一的进行学习实际： 盒子模型：了解 CSS 中的盒子模型（前面简单的提及了），包括内容区域、边框、内边距和外边距，以及如何使用这些属性来控制元素的大小和间距...0x01 CSS 盒子模型 描述：在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。...，可起到突出元素的作用, 在 CSS 中使用 outline 属性来规定元素轮廓的样式、颜色和宽度。...语法参数: /* 在一条声明中设置多个轮廓属性的简写属性 */ /* 属性参数可使用以下一个、两个或三个值来声明，且顺序不重要。
以上 CSS 片段将生成如下数据结构，以便在后续的过程中方便使用： ?...现在浏览器移动到 “Hello world” 文本，这是 DOM 中的文本节点。因此，我们在布局中生成一个 行内盒(line box) 。请注意，文本溢出了正文，我们将在下一步处理这个问题。 ?...我们将使用一个普通布局，其中有一个按钮，内容为 “Share It”，并将其浮动到一段文本的左侧。浮动本身被认为是“shrink-to-fit” 上下文。...在本例中，它使用文本布局一个按钮，因此其最窄的大小(包括所有其他CSS框)将是最长单词的大小。在最宽的地方，它将是一行的所有文本，加上 CSS Box。注意:这里按钮的颜色不是文字的颜色。...这允许最后一行文本(以及它之前的一行)以内联方向开始于content box 的开头。然后浏览器返回到树中，根据需要解析 auto 和百分数。
:有宽高，不在同一行； inline:同一行，无宽高； inline-block: 有宽高又在同一行 这算是个小插曲吧，接着我们的布局之旅；在此之前，读者需可以先阅读下文的float布局和clear的知识再回头来看这知识会容易不少... 我在浮动 .box 我在浮动 .box 我在浮动 .box 我在浮动 .box 我在浮动 .box 我在浮动 .after-box 我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。 ...section class="after-box" 使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。...它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，为此W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column...CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。
1、使用CSS重置（reset） css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。...5、body上加入line-height样式 导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。...); } 8、使用 “OWL选择器” 使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS...; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone;} 内联块声明允许将颜色、背景、页边距和填充应用于每行文本...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。
前言 随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。...5、body上加入line-height样式 导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。...box-decoration-break 假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。...clone; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone; } 内联块声明允许将颜色、背景、页边距和填充应用于每行文本...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。
2.使用flex进行布局 flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。...目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。...7.更友好的注释 CSS也许不是一种编程语言，但其代码仍然需要文档化。添加一些简单的注释可以将代码分类区分，方便自己和同事后期维护。...下一次当你面对一个CSS问题时，在你试图费尽全力解决它之前，检查一下Github或Codepen上是否已经有了一个可用的解决方案。 12.保持选择器的低权重 css的选择器并不都是平等的。...px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。 最重要的是，不要害怕尝试，尝试所有方法，看看最适合什么。有时候，em和rem可以节省很多工作，尤其是在构建响应式页面时。
块级盒子（Block box） 和 内联盒子（Inline box） 在 CSS 中我们广泛地使用两种“盒子” —— 块级 盒子 (block box ) 和 内联盒子 (inline box )。...“推开” 除非特殊指定，诸如标题(等)和段落()默认情况下都是块级的盒子。...默认情况下是按照 标准流布局，也意味着它们和其他块元素以及内联元素一样(如上所述). 但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。...第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。 第二个是一个列表，布局属性是 display: flex。...inline flex 容器和段落在一行上而不是像块级元素一样换行。
Command-逗号 (,) 偏好设置：打开最前面的应用的偏好设置。 睡眠、退出登录和关机快捷键 电源按钮：按下可打开 Mac 电源或将 Mac 从睡眠状态唤醒。...也可以使用 Fn-Delete。 Fn-Delete 在没有向前删除 键的键盘上向前删除。也可以使用 Control-D。 Control-K 删除插入点与行或段落末尾处之间的文本。...Shift–上箭头 将文本选择范围扩展到上一行相同水平位置的最近字符处。 Shift–下箭头 将文本选择范围扩展到下一行相同水平位置的最近字符处。...Option–Shift–上箭头 将文本选择范围扩展到当前段落的段首，再按一次则扩展到下一段落的段首。...Option–Shift–下箭头 将文本选择范围扩展到当前段落的段尾，再按一次则扩展到下一段落的段尾。
/home 本文介绍了CSS（层叠样式表）的基本概念和作用，然后深入讨论了10个常用的CSS属性。...文章还包含了一些有关CSS开发的最佳实践建议，例如使用外部样式表、避免滥用!important规则和选择器的性能考虑等。作者还提供了一些有用的资源和链接，供读者进一步学习和探索。...添加以下简单的一行代码，亲自体验效果。 html{ scroll-behavior:smooth; } 不再简单地瞬间切换页面到下一个部分，而是平滑地滚动到相应的部分。在这里查看效果。...filename=trycss_sc... accent-color 改变用户界面的颜色，例如表单控件和复选框。 看看复选框和单选按钮的颜色是蓝色的，而不是默认（乏味的）灰色。...你可以使用选择器来使一些输入框变蓝色，一些变红色，一些变绿色。 而且这不会改变文本的颜色，所以你可以尝试各种颜色进行实验。用户界面的颜色由我们控制。
Command-逗号(,)偏好设置:打开最前面的应用的偏好设置。 睡眠、退出登录和关机快捷键 电源按钮:按下可打开Mac电源或将Mac从睡眠状态唤醒。...shit-下箭头将文本选择范围扩展到下一行相同水平位置的最近字符处。 Shift-左箭头将文本选择范围向左扩展一个字符。 Shift-右箭头将文本选择范围向右扩展一个字符。...Option- Shift-上箭头将文本选择范围扩展到当前段落的段首,再按一次则扩展到下一段落的段首。...Option-Shit-下箭头将文本选择范围扩展到当前段落的段尾,再按一次则扩展到下一段落的段尾。...这个快捷键可与任一音量键搭配使用。 按住 Command键拖移将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。 按住 Option键拖移拷贝拖移的项目。拖移项目时指针会随之变化。
，后续假如时间充裕，我会尝试做一版移动端的适配 ---- 实现思路 看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，直接前往最后的完整源码章节...除此之外，为了方便各位小伙伴们免受图片和视频链接找不到的烦恼，我已经将所有图片和视频上载到我的个人网站里并且将【图片 | 视频】链接直接替换到了代码中，所以小伙伴们复制代码的时候不需要再考虑图片或者视频丢失问题...和CSS可以完成整个页面背景的设计。...HTML和CSS设计出左侧文本段落的样式，没啥重点的，直接上代码 PS：这一段落设计的样式其实是动态的，因为用户需要将光标悬浮在内部盒子中，左侧文本段落才会从左侧向右侧进入，所以默认情况下左侧文本段落是被隐藏起来的...HTML和CSS设计出右侧星球布局的样式，直接上代码 PS：这一段落设计的样式其实是动态的，因为用户需要将光标悬浮在内部盒子中，右侧三个星球才会从右侧向左侧进入，所以默认情况下右侧三个星球是被隐藏起来的
解决方案：按照设计稿上按钮的样式设定宽高，或者使用背景图 二、css hack(过滤器) 1.下划线属性过滤器 语法： 选择器{_属性:属性值;} eg: .box{_background:red;}...:first-line 匹配段落文本中的第一行 4. :first-letter 匹配段落文本中的第一个字符 5....flex-end 对齐交叉轴的终点 center 以交叉轴为参考，居中对齐 baseline flex项目第一行文字基线对齐 stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度...1.box-sizing:border-box; 将标准盒模型转换为怪异盒模型，总宽高不包括padding和border 2.box-sizing:content-box; 将怪异盒模型转换为标准盒模型...content-box 背景原点从content区域开始 三、背景切割&背景原点 可以将背景切割和背景原点结合使用 eg: background-clip:content-box; background-origin
它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作事件处理动画和 Ajax 操作更加简单。...兄弟选择器 需求描述：选中 id 为 box 的下一个兄弟 li，设置其背景为红色 我是ul的span1 我是li1 <span...需求描述：将 ul 列表下所有的子节点全部移除 列表项1 我是段落1 列表项2 我是段落2...注意：同时移除元素上的事件及 jQuery 数据 需求描述：将 ul 列表下所有的 p 子节点全部移除 列表项1 我是段落1 <li...需求描述：将 ul 下的所有 li 替换为 p 标签 列表项1 列表项2 列表项3 $('我是段落
/* 标签id为red的样式 */ #red {color:red;} 这个段落是红色。 类选择器 在 CSS 中，类选择器以一个点号显示。...empty-cells 设置是否显示表格中的空单元格。 table-layout 设置显示单元、行和列的算法。...DOM元素说使用的盒子模型（box），即元素应该生成的框的类型。...子元素的float、clear和vertical-align属性将失效。...（从下到上） .box { flex-direction: row | row-reverse | column | column-reverse; } （2）flex-wrap 默认情况下，项目都排在一条线
—CSS2 Visual formatting model details: 10.6.3 简单翻译下，在块格式化上下文中，如果 margin-left 和 margin-right 都是 auto...flex 布局，下文将着重围绕 flex 上下文中自动 margin 的一些表现。...CSS Flexible Box Layout Module Level 1 -- 8.1....使用自动 margin 实现 flex 布局下的 space-between | space-around 了解了上面最核心的这一句 : 在通过 justify-content 和 align-self...，使用自动 margin，也很容易实现 flex 下的 space-between，下面两份 CSS 代码的效果的一样的： .g-flex { display: flex; justify-content
睡眠、注销和关机快捷键 快捷键 描述 电源按钮 按下可打开 Mac 电源或将 Mac 从睡眠状态唤醒。...Control-K 删除插入点与行或段落末尾处之间的文本。 Command-Delete 在包含“删除”或“不存储”按钮的对话框中选择“删除”或“不存储”。...Shift–下箭头 将文本选择范围扩展到下一行相同水平位置的最近字符处。 Shift–左箭头 将文本选择范围向左扩展一个字符。 Shift–右箭头 将文本选择范围向右扩展一个字符。...Option–Shift–上箭头 将文本选择范围扩展到当前段落的段首，再按一次则扩展到下一段落的段首。...Option–Shift–下箭头 将文本选择范围扩展到当前段落的段尾，再按一次则扩展到下一段落的段尾。
在本文中，我们将探索一些基本的技巧和提示，以帮助您使用CSS创建令人惊艳的页眉布局。我们并不过多关注设计，而是专注于创建布局，并了解创建布局时可能遇到的困难。...首先，我使用的选择器过于具体化。这样做是为了使嵌套关系更加清晰。 然后，页眉下的每个元素都是一个弹性容器。这也是不必要的。目前，它仅用于导航的最后一个子元素，以将其子元素移动到右侧。...这只留下了这条规则：flex: 1 1 0; 这是我们在这里的主要关注点。我将这条规则应用于第一个和最后一个元素。它允许它们增长和收缩，并将它们的基准大小设置为0像素。...当我们隐藏中间元素时，效果如下所示： 当然，将登录替换为按钮是很简单的。所以，我们来谈谈其他的事情吧。...结果，主要内容区域移动到网站的顶部，因为文档中没有为页眉保留空间。它处于流动之外。 在这种情况下，解决方法是使用margin-top对主要内容区域进行偏移，将其移动到页眉下方。
作者：汪娇娇 日期：2018年3月10日 一、介绍 先用几张图来和大家描述一下什么是图片预览效果吧。...图一：图片列表； 图二：点击列表中 “小猫” 这张图片，会弹出图二这样的预览图； 图三：对图二向左或向右滑动会出现图三的样子，滑动的距离和区域小于某个值时，图片还是会回到当前这张图，超过某个值了，就会滑到上一张图或下一张图...； 图四：对图二，向左滑动，并且超出界定的值了，滑到了 “小猫” 的下一张图片 “大海”。...默认false，不开启，可以使用update()方法更新。 observeParents 将observe应用于Swiper的父元素。...}, { "id":"24", "imgSrc": "img/11.jpg", "username":"星星 -" } ] 做法其实很简单，主要利用 Swiper 就能很快实现，感兴趣的可以去尝试一下
-- 下一首按钮 --> ...封面图旋转的动画效果 /* 左侧封面图模块下的 图片div */ .music-imgs .img{ display: block; position: absolute;...0s: 动画开始之前的延迟时间，这里为0s，即不延迟 infinite: 设置动画无限循环播放 forwards: 表示动画结束后，元素直接使用当前样式。...全部CSS代码如下： *{ margin: 0; padding: 0; box-sizing: border-box; } #player{ position...musicImgsData = ['img/bg.jpg','img/bg1.jpg','img/bg2.jpg'] // 图片地址数组 var musicNameData = ['出山','盗将行
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
