博文纲领：

css3弹性盒子display:flex常见属性总结

CSS3弹性盒子display：flex的常见属性总结如下：flexdirection：作用：设置容器内元素的排列方向。常见值：row：横向排列。column：垂直排列。rowreverse：从右向左横向排列。columnreverse：从下到上垂直排列。flexwrap：作用：控制容器内元素是否换行。常见值：nowrap：不换行。wrap：元素按照需要自动换行。

css的总结（css基本知识点总结）

align-content 属性用于调整弹性容器内元素的对齐，针对多行元素，可选值包括 flex-start（开头对齐）、flex-end（结尾对齐）、stretch（拉伸填充）、center（居中对齐）、space-between（两端对齐）、space-around（均匀间隔对齐）。

flex： 使元素成为弹性盒子，用于实现响应式布局和更复杂的多行布局。 grid： 使元素成为网格布局，用于创建复杂的网格结构，实现更加灵活的布局设计。通过调整display属性值，开发者可以实现各种页面布局效果，包括但不限于：多列布局、响应式设计、弹性布局等。

常用的CSS命名规范大总结,非常实用

1、forms.css：用于表单元素的样式。mend.css：基于其他样式表进行个性化调整的样式。页面结构命名规范：page：代表整个页面结构。wrap：用于包裹所有页面元素，作为最外层容器。container：整体容器，常用于最外层布局。head， header：表示页头区域。nav：横向导航条。main：网站主内容区域。column：栏目或模块。

2、明确CSS书写顺序，提升代码可理解性。通常遵循以下步骤：位置属性，如：position， top， right， z-index， display， float等。大小调整，包括width， height， padding， margin等。文字样式，涉及font， line-height， letter-spacing， color， text-align等。背景设定，如background， border等。

3、(2)、CSS样式命名规范对于CSS样式的命名规则，建议用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字，为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间。

CSS预处理器less学习总结

1、CSS预处理器Less学习总结：嵌套：功能：Less通过嵌套解决了CSS中样式重复的问题，允许在父选择器的花括号内书写子选择器的样式，从而提升了代码的可读性和层级关系的表达。示例：在Less代码中，可以直接在父选择器内部嵌套子选择器，编译后的CSS代码会保持相应的层级关系。

2、Less是一种CSS预处理语言，旨在解决CSS的局限性和复杂性。它保留了CSS原有功能，并增加了一系列强大的特性，如变量、循环、继承、自定义方法等。Less的安装与编译：可以通过命令行工具lessc快速将LESS文件编译为CSS文件。对于Webpack用户，可以使用lessloader进行处理，这种方式在生产环境中更为合适。

3、LESS提供导入外部LESS文件(@import)及嵌套选择器，简化选择器的编写。使用父级选择器时，可通过&符号简化。针对媒体查询，LESS采用冒泡方式处理，避免重复书写样式。LESS支持基本数学运算，包括加、减、乘、除，运算规则与JS相似。属性值单位会自动转换，如12px+12px等于24px。

4、Less是一个CSS预处理器，它允许开发者创建可自定义、可管理和可重用的样式表。Less通过扩展CSS的功能，使开发者能够使用变量、函数、mixins和操作等特性，从而构建动态CSS。CSS预处理器是一种脚本语言，它能够扩展CSS并将其编译为常规CSS语法，以便Web浏览器能够读取。

5、JavaScript表达式与内置函数：LESS允许在样式中直接嵌入JavaScript表达式，使用反引号`包裹。LESS提供了内置函数，如color函数和Math函数，为开发者提供更多便利。以上是LESS的基本语法总结，LESS作为CSS预处理器，通过提供更为高级的语法和功能，大大增强了CSS的灵活性和可维护性。

6、在CSS预处理器Less中，有多种常用技巧和特性帮助开发者更高效地编写样式代码。下面详细介绍了几个关键技巧。首先，变量是Less中一个强大的特性，可以定义并复用值，简化代码并提高可维护性。通过变量进行运算同样方便，利用Less的运算符，开发者可以执行复杂的数值计算，如加减乘除等。

css清除浮动float的三种方法总结,为什么清浮动

1、第一种方法是添加一个新的元素，并为它设置 clear： both；，同时设置其高度为0、行高为0、字体大小为0。这样做可以确保新元素在浮动元素之后，从而清除浮动。对应的CSS代码如下：.clear{clear：both；height：0；line-height：0；font-size：0} 第二种方法是通过设置父级元素的 overflow 属性为 auto。

2、不清除浮动的话，浮动层后面的非浮动内容就有可能被浮动层所覆盖，造成版面错乱，所以必须清除浮动。除非浮动层所在的位置是有固定的高度的，也就是说不管是否浮动它所占用的区域都不变，这样就无需清除。比如： 可以看到蓝色框会被红色框覆盖（IE6-9中则不会，因为它不是标准浏览器）。

3、清除float浮动的几种方法主要包括： 使用空标签清除浮动 这种方法通过在浮动元素之后添加一个带有clear：both属性的空标签来清除浮动。示例代码： 或者 。 使用overflow属性 通过给包含浮动元素的父容器设置overflow：auto或overflow：hidden属性，可以清除浮动。

4、方法三：给容器添加浮动。给浮动元素的容器添加浮动属性，如.container{float：left；}，清除内部浮动。但此方法会导致整体浮动，影响布局，不推荐使用。方法四：使用伪元素。利用伪元素清除浮动，如容器内添加：after伪元素，设置内容为空并添加清除浮动的CSS样式。

5、在CSS中，清除浮动是一个重要的布局技巧，用于解决父元素高度塌陷的问题。常见的清除浮动方法包括使用伪元素和设置清除类。一种简单直接的方法是使用伪元素，通过在父元素上添加after伪元素并设置clear：both，从而清除内部元素的浮动影响。

CSS与Sass入门小结

文件组织：@import功能允许引入其他Sass文件，作为局部样式库，与主文件一同编译为CSS。 注释：支持单行与多行注释，注释在编译为CSS时保留，但压缩CSS中通常不显示。 输出格式：支持nested、expanded、compact与compressed等多种输出格式，满足不同场景需求。

运算符：支持基本的加减乘除和百分比运算，与Sass相似。总结： CSS3是基础，提供了页面布局和元素设计的基本功能。 Sass/SCSS和Less是CSS预处理器，它们扩展了CSS的功能，使其更易于编写和维护。 Sass凭借其更强的功能和更好的支持，在开发者中更受欢迎，推荐使用Sass进行CSS3开发。

不同于直接编写可被浏览器理解的CSS，SASS是一种预处理器语言，需要借助预处理工具（如VScode的Easy SASS插件或webpack的sass-loader）将SASS文件转换为CSS。这些工具将SASS的缩进、嵌套规则和变量等功能转化为标准的CSS代码。

CSS中提升优先级属性!important的用法总结

1、在CSS中，我们有时需要调整样式规则的优先级，这时！important属性就派上用场了。它的基本语法是： 选择器{样式：值！important；}。这个属性的作用是提升特定样式规则的执行优先级，确保浏览器优先执行带有！important的声明。例如，设想你有这样一个样式规则：margin-left：20px！important。

2、当！important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的！important样式要比一个由用户声明的！important样式获得更大的权重。为了提高访问性，在CSS2 中它被颠倒了过来。 如果！important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上！important。

3、important它指定当前样式的优先级为高，后边再进行定义的相同样式是不会将其重置。因此按标准的CSS来说，height：18px这一句是无效的，因为前边的定义具有更高的优先级。 但是IE不支持该属性，而Firefox却支持。

4、important是一个修饰符，语法是选择器{属性：属性值 ！important}。作用是更改默认的CSS样式优先级。