css、scss基础与进阶

gegephp

已于 2022-08-23 17:51:24 修改

阅读量553

点赞数

分类专栏：前端文章标签： css

于 2022-04-25 11:54:33 首次发布

本文链接：https://blog.csdn.net/gegephp/article/details/124305338

版权

本文介绍了CSS的基础知识，包括选择器、盒子模型、行内元素与块状元素的差异，以及媒体查询和弹性盒子布局。同时，文章还探讨了SCSS的进阶特性，如&符号的使用、全局变量和mixin的实践。通过学习，读者能够提升CSS的运用技巧，并了解如何利用SCSS提高代码组织效率。

摘要由CSDN通过智能技术生成

前言

公司有些较老的前后端不分离的项目，由于前端人手不足，让好些后端兄弟顶上了，日常改些简单样式，应大家要求，也从大家代码里找了些问题，分享下css的基础（由于问题代码涉及公司，这里就不贴了(^▽)）

选择器（选择器.）
盒子模型（盒子模型.）
正常盒模型宽度计算
offsetWidth = 除了margin的所有宽度相加
怪异盒模型（box-sizing：border-box）
offsetWidth = width（即宽度包含border和padding）
行内元素和块状元素
常用块状元素： < div>、< ul>、< ol>、< h>
常用行内元素： < span>、< a>、< br>、< b>、< input>、< img>
区别：
1.块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2.一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3.块级元素可以设置margin,padding属性
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果
弹性盒子，flex布局（flex.）
媒体查询
用途： 对于pc端、平板、手机等尺寸不同的设备，如果字号、元素大小都一样，肯定不合适，@media可以针对不同