围绕 前端 分类整理相关文章，方便按主题顺序浏览、回看和扩展阅读。
一种强调可读性而不是光鲜的极简设计实际上是在你的网站设计中使用的一种好策略。在数字化时代，文章的视觉效果往往与内容的吸引力同等重要。CSS（层叠样式表）作为一种强大的样式定义语言，可以帮助我们轻松地美化文章格式，提升阅读体验。一种强调可读性而不是光鲜的极简设计实际上是在你的网站设计中使用的一种好策略。设计一个美观的“文章”需要考虑很多因素。与首页不同，长篇幅文章的设计重点不在于界面设计，而是以一种
flex布局发展的背景原因布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。年，WC提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex布局是一种新型的CSS布局模式，它主要用于弹性盒子布局。相比于传统的布局方式，它更加灵活，
Emmet 是一个可用在许多流行文本编辑器上的极大简化HTML和CSS工作流程的插件。Emmet 为了提高代码编写的效率而诞生的，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。并且Emmet 为大部分流行的编辑器都提供了安装插件
浮动特性、浮动元素有左浮动(float:left)和右浮动(float:right)两种、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来、相邻浮动的块元素可以并在一行，超出父级宽度就换行、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果、父元素如果没有
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。块元素块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h~h、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度%盒子占据一行、即使设置了宽度内联元素内联元素，也可以称为行内元素，布局中常用的标签如：a、span
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。overflow的设置项：、visible默认值。内容不会被修剪，会呈现在元素框之外。、hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。、scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。、auto如果内容被
盒子的真实尺寸计算公式如下：盒子宽度=width+padding左+padding右+border左+border右盒子高度=height+padding上+padding下+border上+border下.box{width:px;height:px;background-color:gold;}.box{width:px;height:px;background-color:gold;bord
盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：、盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin).box{/*设置宽高、背景色*/width:px
、标签选择器标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。*{margin:;padding:}div{color:red}<div>....</div><!--对应以上两条样式--><divclass="box">....</div><!--对应以上两条样式-->、id选择器通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名
css颜色值主要有三种表示方法：、颜色名表示，比如：red红色，gold金色、rgb表示，比如：rgb(,,)表示红色、进制数值表示，比如：#ff表示红色，这种可以简写成#f