CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。
最近想着学习点前端知识，于是就学习了关于 Web 前端的布局知识，其实就是 CSS 那些事。关于 CSS 其实很早就接触过了，但一直没有沉下心来去学习，所以对于 CSS 布局的东西一直都不成体系。这次趁着重学前端，真正花时间学了一下 CSS 布局的知识点，顺带把知识点总结一下。
CSS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。
也就是说，如果你设置了top:50px，当sticky元素到达相对定位元素顶部50px的位置时，固定，不再向上移动。
display属性可以设置元素的内部和外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现，例如块级或内联元素，元素的内部显示类型可以控制其子元素的布局，例如grid或flex。目前所有浏览器都支持display属性，但是对于属性值的兼容性仍需注意。
伪元素常用的一般就两个， ::before 和 ::after ，都是用来向被选中的元素添加元素之外的装饰性内容（文字）等
HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。
行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。
1、块级元素是指单独撑满一行的元素，块级元素默认会占满整行，所以多个块级盒子之间是从上到下排列的。
1.7、compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
英文 | https://javascript.plainenglish.io/learn-the-best-css-tricks-in-10-minutes-cfeb37489ae3
前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及标签的:link、visited等，伪元素较常见的比如:before、:after等。 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。 伪类 - pseudo classes 首先看看CSS2中对伪类的定义： CS
1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。
在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。
背景类属性 background-color 背景颜色 background-image 背景图片 background-repeat 背景重复 background-attachment background-position 背景定位 文本格式类属性 属性 描述 color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？这里面，肯定有很多css属性你连见都没见过，我的建议是，先大概去猜一下，然后用浏览器的F12调试功能去倒腾倒腾。不需要你对每一个css
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
CSS 就是层叠样式表（Cascading Style Sheets），定义如何显示 HTML 元素。HTML 元素的样式通常存储在层叠样式表中。
英文 | https://medium.com/@nasyxrakeeb2/10-css-pro-tips-code-this-not-that-codipher-f94558e82756
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器（指定id元素） 将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () {
作为一名后端狗，也有一个全栈梦。前端工程师第一步，CSS的基础得打好。本文仅用于记录上周学习CSS的过程，文中对于CSS知识点可能存在理解错误之处。
你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。
前端工作者肯定或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及标签的:link、visited等，伪元素较常见的比如:before、:after等。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157484.html原文链接：https://javaforall.cn
定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。
当我们谈论网页设计和开发时，CSS（层叠样式表）无疑是其中的重要一环。作为HTML的伴侣，CSS赋予网页以丰富的样式和布局，使得网站看起来更加吸引人并且具备更好的可读性。本书将通过一系列深入浅出的方式，带你从入门到精通CSS，探索Web开发的奥秘。
很久都没有更新了，今天再更新一些使用的小技巧，今天给大家带来的内容是如何快速的将一行 div 元素设置到屏幕底部，今天的主要内容有
该文介绍了CSS Grid在网页布局方面相比于Bootstrap的优势，包括使用CSS Grid可以简化HTML代码、实现更灵活的布局、支持更广泛的浏览器以及不再有12列的限制等。同时，也指出了虽然CSS Grid具有诸多优点，但在某些情况下仍然需要使用Bootstrap进行更复杂的布局。
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。
字体样式 的顺序 , 不能打乱 , 必须严格遵守 ; 字体样式 属性值 之间 , 使用空格隔开 ; font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;
IFC的英文全称是：Inline Formatting Contexts，直译为“行内格式化上下文”。 IFC由一个不包含块级盒的块容器盒生成。 在行内格式化上下文中，盒从包含块的顶部开始一个接一个地水平摆放。盒水平方向的外边距、边框和内边距在布局时都会考虑在内。盒的垂直对齐方式则不一：可能按底部或者顶部对齐，又或者按它们内容文本的基线对齐。包含了形成一行的那些盒的矩形区域被称为行盒 Line Box 。
以前我们通过VB敲机房的时候，可以直接通过拖动窗体上的控件、修改代码的属性或是通过代码来设置窗体的布局，而在B/S的学习中，可以通过CSS语言来使网页的内容和样式分离，也就是在aspx或是html中设计网页的内容，在CSS表中设置网页的显示、文字的设计等。
常用的块状元素有：div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form 、fieldset(表单字段集)、colgroup-col(表单列分组元素)、table-tr-td
css的display属性是前端开发中非常常见的属性，本文简单介绍下其中比较常用的属性值，即block、inline和inline-block。
1. 说下行内元素和块级元素的区别？行内块元素的兼容性使用（IE8 以下） Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。 Q2)兼容性：display:inline-block;display:inline;zoom:1; 2.清除浮动有哪些方式？比较好的方式是哪一种？ 1）父级div定义height。 2）结尾处加空
CSS 是一种不断发展的语言。每一次迭代，它都会变得越来越好。因此，了解最新的 CSS 功能非常重要，这样你才能在项目中使用它们，减少对第三方库的依赖。
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目
一、Position各属性值详解 1. static ：默认值，元素将按照正常文档流规则排列。 2. relative ：相对定位，元素仍然处于正常文档流当中，但可以通过left、top、right和bottom的CSS规则来改变元素的位置。 注意点：[a]. 元素原来位置将保留，不被其他元素所占据; [b]. 当使用left，top改变元素位置时，元素将以原来位置的border外边框的左上角作为
下面的代码，只有外层段落的字体会改变颜色，里层不会，因为里层是属于 divInner 的直系元素
本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。
层叠样式表。(Cascading Style Sheets) CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
p元素默认是换行的，加上inline-block属性之后，变成了一行，并且可以设置宽高和边距。
在浏览器开始实现它们之前，CSS 新的功能通常需要经过长时间讨论之后，才在W3联盟的规范中定义。 有许多值得一提的 CSS 新功能，但是在本文中，我们重点介绍可以浏览器的稳定版中进行测试的五个功能：
开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目（四）--
CSS 删除线是一个 CSS 属性，它使文本看起来像是被删除线一样，就像这样。在网络开发和写作中，这经常用于表示文本已被删除或不再相关。但它也可以用于不同的事情。
通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择
其中 margin 称为外边距，在计算元素整体宽高的时候一般不包括它。CSS3 中新增了一个属性 box-sizing，可以用来指定使用的盒模型计算方式。下面是 CSS3 中支持的盒模型计算方式（CSS2种只支持默认的）
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
