常用布局@mixin_html/css

单个块级元素的居中

@mixin center-block() { display: block; margin-left: auto; margin-right: auto;}

多个块级元素占一行

用 display: inline-block 来实现

@mixin row($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top) { #{$parent-selector} { font-size: 0;// 防止子元素的空白元素占据空间 } #{$item-selector} { display: inline-block; vertical-align: $vertical-align;// 防止子元素高度不同导致的奇怪的对齐 font-size: $font-size; }}

用 flex 来实现

@mixin row() { display: flex;}

多个块级元素的居中

用 display: inline-block 来实现

@mixin center-blocks($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top) { @include row($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top); #{$parent-selector} { text-align: center; }}

用 flex 来实现

@mixin center-blocks($parent-selector) { #{$parent-selector} { @include row; justify-content: center; }}

两端对齐

用 display: inline-block 来实现

@mixin justify-blocks($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top) { @include row($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top); #{$parent-selector} { text-align: justify; &:after { content: ''; display: inline-block; width: 100%; } }}

用 flex 来实现

@mixin justify-blocks($parent-selector) { #{$parent-selector} { @include row; justify-content: space-between; }}

多个块级元素占一行，某个元素占据剩余部分

用 display: table 来实现

@mixin item-fill($parent-selector, $item-selector, $fill-item-selector, $vertical-align: top) { #{$parent-selector} { display: table; // 兼容性相当好。IE8+ 都支持 http://caniuse.com/#feat=css-table } #{$item-selector} { display: table-cell; // 兼容性相当好。IE8+ 都支持 http://caniuse.com/#feat=css-table vertical-align: $vertical-align; } #{$fill-item-selector} { width: 100%; }}

用 flex 来实现

@mixin item-fill($parent-selector, $fill-item-selector) { #{$parent-selector} { @include row; } #{$fill-item-selector} { -webkit-flex-grow: 1; flex-grow: 1; }}

完整源码

参考链接

本文遵守创作共享CC BY-NC-SA 4.0协议网络平台如需转载必须与本人联系确认。

瑞缇养生网还为您提供以下相关内容希望对您有帮助：

3. HTML/CSS编码阶段根据Photoshop设计稿编写语义化HTML结构，优先使用<header>、<nav>、<main>、<aside>、<footer>等标签。CSS部分需实现响应式布局，通过媒体查询（@media）适配不同屏幕尺寸。建议采用CSS预处理器（如Sass/Less）管理样式，利用变量和混合（Mixins）提高代码复用性。

Sass中的Mixin是一种可重用的样式块，通过@mixin指令定义，并使用@include调用。它允许开发者将一组CSS属性封装为模块，避免重复代码，提升样式表的可维护性。核心功能 代码复用：定义一次即可在多处调用，例如边框圆角、阴影等通用样式。参数化：支持传入参数动态生成样式（如颜色、尺寸），增强灵活性。默认...

功能：Sass/Less/Stylus等工具通过变量、嵌套规则、混合（mixins）和函数等特性，将CSS转化为可编程的样式表。优势：变量：统一管理颜色、字体等重复值（如$primary-color: #3498db;）。嵌套：直观反映HTML结构，减少重复选择器（如.nav { &-item { ... } }）。混合与函数：复用通用样式逻辑（如@...

一、布局设计：奠定页面结构基础布局是CSS开发的核心环节，需根据项目需求选择固定布局或自适应布局。固定布局适用于内容简单的页面，通过固定宽度和像素单位实现稳定排版；自适应布局则需结合媒体查询（@media）和相对单位（如%、vw/vh），确保页面在不同设备上自动调整。设计时需明确页面模块划分，例如导航...

占位符 % 在 Sass 中用于替代 CSS 基类造成的代码冗余问题。如果 %placeholder 声明的代码未被 @extend 调用，它不会生成任何代码，只会在 SCSS 文件中静默存在。只有通过 @extend 调用时，占位符才会生成代码。混入（ @mixin ）mixin 指令用于定义混入，它允许开发者创建可重用的样式块。语法为：@...

配置入口文件、Loader（如babel-loader处理JSX）、Plugin（如HtmlWebpackPlugin生成HTML）。优化打包性能（代码分割、Tree Shaking）。CSS预处理器 Sass/Less：使用变量（$primary-color）、嵌套规则及混合（@mixin）提升CSS可维护性。自动化工具 Gulp/Grunt：编写任务流（如压缩JS/CSS、自动刷新浏览器）。六...

变量优先：统一定义颜色、间距等常用值，确保一致性。控制嵌套深度：避免超过 3-4 层，防止代码冗余。复用 Mixins：通用样式通过 Mixins 实现，减少重复。规范命名：采用清晰一致的命名规则（如 _variables.scss、_mixins.scss）。结论SCSS 通过增强 CSS 的功能，简化了开发流程，提升了代码可读性与可...

4. 内置jQuery插件集成Bootstrap集成了多种基于jQuery的插件，如模态框（Modal）、轮播图（Carousel）、下拉菜单（Dropdown）等。这些插件简化了常见交互效果的开发流程，开发者无需从零编写代码即可实现动态功能，但需注意Bootstrap对jQuery的依赖关系。5. 对HTML5与CSS3的全面支持Bootstrap充分利用HTML5的...

CSS预处理器：使用Sass/Less的@mixin和@extend功能，进一步抽象公共样式。CSS变量：定义全局变量（如--primary-color: #3498db;），便于统一修改和维护。设备性原则CSS通过响应式设计确保跨设备一致性：视口单位：使用vw、vh、vmin、vmax实现动态尺寸。媒体查询：通过@media针对不同屏幕尺寸应用样式（如...

CSS Grid布局的应用CSS Grid提供二维网格系统，可高效实现复杂布局。通过定义网格容器（display: grid）和网格项（grid-column/grid-row），开发者能直观控制元素位置与尺寸。其优势在于支持自动填充（grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))）和自适应间距，减少嵌套HTML结构。例如...