WEB开发编程网01 如何实现一个元素的水平垂直居中
更多描述: 要求对行内元素、块状元素及不定宽高的块状元素均可适用：
可打开 codepen 进行调试: codepen.io/shanyue/pen…，以下是布局代码
<div class="container">
<div class="item" style="width: 100px; height: 100px; background: #999;">
块状元素
</div>
</div>
<div class="container">
<div class="item">不定高宽的块状元素</div>
</div>
<div class="container">
<span class="item">行内元素</span>
</div>
复制代码.container {
// 把代码写在这里
}
.container {
height: 20rem;
background: #ccc;
margin: 1rem;
}
复制代码在 Issue 或者我的网站中交流与讨论: 01 如何实现一个元素的水平垂直居中
提供一些现代浏览器下使用 flex/grid 的方法，不仅支持块状元素，而且支持行内元素，对固定高宽与不固定高宽皆可使用。
使用 flex，以下是经典的垂直居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}
复制代码使用 grid，它是做二维布局的，但是只有一个子元素时，一维布局与二维布局就一样了。
结合 justify-content/justify-items 和 align-content/align-items 就有四种方案
效果可以见 codepen
.container {
display: grid;
justify-content: center;
align-content: center;
}
复制代码.container {
display: grid;
justify-content: center;
align-items: center;
}
复制代码.container {
display: grid;
justify-items: center;
align-content: center;
}
复制代码.container {
display: grid;
justify-items: center;
align-items: center;
}
复制代码三个属性略显啰嗦，其实只需两个属性即可:
.container {
display: grid;
place-items: center;
}
复制代码.container {
display: grid;
place-content: center;
}
复制代码02 css 如何实现左侧固定300px，右侧自适应的布局
在 Issue 或者我的网站中交流与讨论: 02 css 如何实现左侧固定300px，右侧自适应的布局
使用 flex 布局，左侧 300px，右侧 flex-grow: 1。pug 代码及 css 代码示例如下
.container
.left
.main
复制代码.container {
display: flex;
}
.left {
flex-basis: 300px;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
复制代码如果只使用 Grid 布局，则代码会更加简单，只需要控制容器的 CSS 属性
.container {
display: grid;
grid-template-columns: 300px 1fr;
}
复制代码03 有没有使用过 css variable，它解决了哪些问题
在 Issue 或者我的网站中交流与讨论: 03 有没有使用过 css variable，它解决了哪些问题
可在运行时动态修改 CSS。与 less/sass 相比，更加灵活，因为它很容易通过 JS 来控制。根据它来做主题切换简直得心应手。
04 谈谈你对 styled-component 的看法
在 Issue 或者我的网站中交流与讨论: 04 谈谈你对 styled-component 的看法
最为流行的 CSS-in-JS 方案
05 display: inline 的元素设置 margin 和 padding 会生效吗
在 Issue 或者我的网站中交流与讨论: 05 display: inline 的元素设置 margin 和 padding 会生效吗
可参考文章 maxdesign.com.au/articles/in…
inline 元素的 margin 与 padding 左右生效，上下生效，准确说在上下方向不会使其它元素受到挤压，仿佛不生效，如下图设置 border 会发现它其实生效了
代码为，可见于 行内元素的padding与margin – codepen
<div class="container">
我是<span class="item">行内元素</span>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</div>
复制代码为 .item 行内元素设置样式，观察效果:
.item {
padding: 1rem;
border: 1px solid red;
}
.container {
margin: 3rem;
background-color: #ccc;
height: 10rem;
}
复制代码06 html 的默认 display 属性是多少
在 Issue 或者我的网站中交流与讨论: 06 html 的默认 display 属性是多少
html 根元素的默认 display 为 block
07 对一个非定长宽的块状元素如何做垂直水平居中
在 Issue 或者我的网站中交流与讨论: 07 对一个非定长宽的块状元素如何做垂直水平居中
css position
.container {
position: relative;
}
.container .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
复制代码非定宽了，你这个不行呀
08 如何实现左右固定，中间自适应布局
在 Issue 或者我的网站中交流与讨论: 08 如何实现左右固定，中间自适应布局
可以参考 【Q017】css 如何实现左侧固定300px，右侧自适应的布局
.container
.left
.main
.right
复制代码.container {
display: flex;
}
.left {
flex-basis: 300px;
flex-shrink: 0;
}
.right {
flex-basis: 300px;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
复制代码09 如何实现表格单双行条纹样式
在 Issue 或者我的网站中交流与讨论: 09 如何实现表格单双行条纹样式
通过 css3 中伪类 :nth-child 来实现。其中 :nth-child(an+b) 匹配下标 { an + b; n = 0, 1, 2, ...} 且结果为整数的子元素
nth-child(2n)/nth-child(even): 双行样式nth-child(2n+1)/nth-child(odd): 单行样式
其中 tr 在表格中代表行，实现表格中单双行样式就很简单了：
tr:nth-child(2n) {
background-color: red;
}
tr:nth-child(2n+1) {
background-color: blue;
}
复制代码同理：
- 如何匹配最前三个子元素:
:nth-child(-n+3) - 如何匹配最后三个子元素:
:nth-last-child(-n+3)
10 简述下 css specificity
在 Issue 或者我的网站中交流与讨论: 10 简述下 css specificity
css specificity 即 css 中关于选择器的权重，以下三种类型的选择器依次下降
id选择器，如#appclass、attribute与pseudo-classes选择器，如.header、[type="radio"]与:hovertype标签选择器和伪元素选择器，如h1、p和::before
其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响
另有内联样式 <div class="foo" style="color: red;"></div> 及 !important(最高) 具有更高的权重
:not的优先级影响 – codepen 可以看出:not对选择器的优先级无任何影响
CSS Specificity – codepen 可以看出十几个 class 选择器也没有一个 id 选择器权重高
11 ‘+’ 与 ‘~’ 选择器有什么不同
在 Issue 或者我的网站中交流与讨论: 11 ‘+’ 与 ‘~’ 选择器有什么不同
+选择器匹配紧邻的兄弟元素~选择器匹配随后的所有兄弟元素
12 position: sticky 如何工作，适用于哪些场景
在 Issue 或者我的网站中交流与讨论: 12 position: sticky 如何工作，适用于哪些场景
position: sticky 可理解为 relative 与 fixed 的结合体
13 伪类与伪元素有什么区别
在 Issue 或者我的网站中交流与讨论: 13 伪类与伪元素有什么区别
- 伪类使用单冒号，而伪元素使用双冒号。如
:hover是伪类，::before是伪元素 - 伪元素会在文档流生成一个新的元素，并且可以使用
content属性设置内容
14 css 如何匹配前N个子元素及最后N个子元素
在 Issue 或者我的网站中交流与讨论: 14 css 如何匹配前N个子元素及最后N个子元素
- 如何匹配最前三个子元素:
:nth-child(-n+3) - 如何匹配最后三个子元素:
:nth-last-child(-n+3)
15 如何使用 CSS 实现网站的暗黑模式 (Dark Mode)
更多描述: 可参考以下文章:
在 Issue 或者我的网站中交流与讨论: 15 如何使用 CSS 实现网站的暗黑模式 (Dark Mode)
@media (prefers-color-scheme: dark) {
:root{
}
}
复制代码16 介绍隐藏页面中某个元素的几种方法
在 Issue 或者我的网站中交流与讨论: 16 介绍隐藏页面中某个元素的几种方法
01 display: none
通过 CSS 操控 display，移出文档流
display: none;
复制代码02 opacity: 0
透明度为0，仍在文档流中，当作用于其上的事件(如点击)仍有效
opacity: 0;
复制代码03 visibility: hidden
透明度为0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别
visibility: hidden;
复制代码04 content-visibility
移出文档流，但是再次显示时消耗性能低
content-visibility: hidden;
复制代码05 绝对定位于当前页面的不可见位置
position: absolute;
top: -9000px;
left: -9000px;
复制代码06 字体大小设置为 0
font-size: 0;
复制代码17 css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分
在 Issue 或者我的网站中交流与讨论: 17 css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分
页面布局元素如下，item 数量不固定
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
复制代码使用 Grid 布局可以轻松解决这个问题，如若使用其它方案，控制好等分的同时再控制好间距也是一个十分头疼的问题:
grid-template-columns: 控制等分gap: 控制间隙
效果可见 codepen
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.container {
display: grid;
}
.conainer {
gap: 1rem;
}
复制代码TailwindCSS 是一款非常方便的 CSS 原子类框架，只需要一行即可搞定
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
复制代码但是这就够了吗？
这远远不够，这也足够复杂！
- 需要媒体查询
- 需要人为设置 breakpoint，设置大小屏幕的边界
终极解决方案
Grid 布局可以自动判断容器大小，无论大小屏幕自动撑满并均分，请看以下属性
.container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
复制代码repeat: 用以 N 整分auto-fill：表示自动填充minmx: 即书面意思，最小宽度为300px
18 如何自定义滚动条的样式
在 Issue 或者我的网站中交流与讨论: 18 如何自定义滚动条的样式
滚动条相关样式都是伪元素，以 scrollbar 打头，有以下伪元素，从 -webkit 中可见兼容性一般，不过无所谓，现在 Chrome 浏览器占大头
::-webkit-scrollbar— 整个滚动条.::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb— 滚动条上的滚动滑块.::-webkit-scrollbar-track— 滚动条轨道.::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分.::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-resizer— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
但其实最常用的是以下几个伪元素：滚动条、滑块、轨道，如下滚动条设置成功
::-webkit-scrollbar {
width: 6px;
height: 6px
}
::-webkit-scrollbar-track {
border-radius: 3px;
background: rgba(0,0,0);
box-shadow: inset 0 0 5px rgba(0,0,0,.08)
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(0,0,1);
box-shadow: inset 0 0 10px rgba(0,0,0,.2)
}
复制代码19 网站设置字体时，如何设置优先使用系统默认字体
在 Issue 或者我的网站中交流与讨论: 19 网站设置字体时，如何设置优先使用系统默认字体
font-family: system-ui;
复制代码system-ui 将会自动选取系统默认字体作为字体，如 bootstrap 的样式规则
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
复制代码20 写 CSS 时如何避免命名样式冲突
在 Issue 或者我的网站中交流与讨论: 20 写 CSS 时如何避免命名样式冲突
1. BEM 式: .home-page .home-page-btn
.home-page {
.home-page-btn {}
}
复制代码BEM 有一个缺点，就是有些太长，可适当简化，只包裹该页面组件的根类名，但有可能增加样式冲突的风险
.home-page {
.btn {}
}
复制代码2. CSS Scoped
scoped css 会对当前组件(scope)下所有元素生成唯一的属性或类名，对所有 CSS 规则将携带唯一属性实现作用域的命名保护
// 手动写
.btn {}
// 编译后
.btn .jsx-1287234 {}
复制代码3. CSS Module
module css 会对类名进行 hash 化
21 HTML 标签有哪些行内元素
在 Issue 或者我的网站中交流与讨论: 21 HTML 标签有哪些行内元素
常见的标签有以下几种，可参考 inline element
- a
- img
- picture
- span
- input
- textarea
- select
- label
22 CSS如何设置一行超出显示省略号
在 Issue 或者我的网站中交流与讨论: 22 CSS如何设置一行超出显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
复制代码23 CSS如何设置多行超出显示省略号
在 Issue 或者我的网站中交流与讨论: 23 CSS如何设置多行超出显示省略号
使用 -webkit-line-clamp 来设置多行超出显示省略号
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
复制代码24 flex 布局中 order 有何作用
在 Issue 或者我的网站中交流与讨论: 24 flex 布局中 order 有何作用
order 属性定义Flex布局中子元素的排列顺序，数值越小，排列越靠前，默认为0。
25 flex 布局中 align-content 与 align-items 有何区别
在 Issue 或者我的网站中交流与讨论: 25 flex 布局中 align-content 与 align-items 有何区别
示例代码见: align-content 与 align-items
align-content作用于纵轴多行元素，一行元素不起作用align-items作用于纵轴单行元素
下图，上部分为 align-content，下部分为 align-items
26 子元素垂直居中，并且长度为父容器一半的正方形
在 Issue 或者我的网站中交流与讨论: 26 子元素垂直居中，并且长度为父容器一半的正方形
<div class="container">
<div class="item"></div>
</div>
复制代码以前采用百分比撑高 padding，那这种方案已经过时，会挤压 Content 内容，无法在其中填充内容(需要绝对定位)。
可使用最新的属性 aspect-ratio，即长宽比
.container {
display: grid;
place-items: center;
}
.item {
width: 50%;
aspect-ratio: 1/1;
}
复制代码27 简述 css 中 position 的值
在 Issue 或者我的网站中交流与讨论: 27 简述 css 中 position 的值
static: 默认值，无定位，top、right、bottom、left不起任何作用relative: 相对定位absolute: 绝对定位，脱离文档流，上下左右以最近的定位父元素为参照系fixed: 脱离文档流，上下左右以浏览器视口为参照系sticky:relative与fixed的结合体
28 什么是 BFC
更多描述: + 它是如何生成的 + 它有什么作用及应用
在 Issue 或者我的网站中交流与讨论: 28 什么是 BFC
块级格式化上下文，Block Formatting Context
29 CSS 如何实现固定长宽比的元素
在 Issue 或者我的网站中交流与讨论: 29 CSS 如何实现固定长宽比的元素
过去的解决方案是使用 padding。一个元素的 padding 如若设置为百分比，则代表的是以父元素宽度为基准，根据这个原理，可设置长宽比。但实际上意义有限，毕竟你把 padding 给占了，content 无任何区域。
现代化的解决方案是使用长宽比的 CSS 属性: aspect-ratio
30 rem、em、vw、wh 的值各是什么意思
在 Issue 或者我的网站中交流与讨论: 30 rem、em、vw、wh 的值各是什么意思
他们同属于 CSS Data Type 中的 [length]，见文档 length – MDN
rem: 根据根元素(即html)的font-sizeem: 根据自身元素的font-sizevw: viewport widthvh: viewport height
31 normalize.css 与 reset.css 又何区别
在 Issue 或者我的网站中交流与讨论: 31 normalize.css 与 reset.css 又何区别
What is the difference between Normalize.css and Reset CSS?
- normalize.css: 会保留有用的样式，比如 h1 的字体大小
- reset.css: 把所有样式都重置，比如 h1、h2、h3 的字体大小都进行了重置，保持了无样式
32 line-height 的值分别取 [2, 2em, 200%] 有什么区别?
在 Issue 或者我的网站中交流与讨论: 32 line-height 的值分别取 [2, 2em, 200%] 有什么区别?
代码见: lineHeight – codepen
line-height 是相对于元素自身的字体大小来取值，但同时会被继承。在实际工作中，取值 2em 或者 200% 有可能遇到未预测的内容。
比如:
- 父元素:
fontSize: 18px; lineHeight: 1.5em(27px，150% 同理);，它的 lineHeight 计算下来为 27px，会被子元素继承 - 子元素:
fontSize: 30px，子元素的 lineHeight 被继承为 27px，出现问题
以下为演示代码，见: lineHeight – codepen
<div class="box green">
<h1>lineHeight: 1.5; 这是没有问题的框框</h1>
lineHeight: 1.5; 这是没有问题的框框
lineHeight: 1.5; 这是没有问题的框框
</div>
<div class="box red">
<h1>lineHeight: 1.5em; 这是有问题的框框</h1>
lineHeight: 1.5em; 这是有问题的框框
lineHeight: 1.5em; 这是有问题的框框
</div>
<div class="box orange">
<h1>lineHeight: 150%; 这是有问题的框框</h1>
lineHeight: 150%; 这是有问题的框框
lineHeight: 150%; 这是有问题的框框
</div>
复制代码.green {
line-height: 1.5;
border: solid limegreen;
}
.red {
line-height: 1.5em;
border: solid red;
}
.orange {
line-height: 150%;
border: solid orange;
}
h1 {
font-size: 30px;
}
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 16px;
}
复制代码33 Grid 布局的优势在哪里
在 Issue 或者我的网站中交流与讨论: 33 Grid 布局的优势在哪里
响应式！
34 如何实现三列均分布局
更多描述: 布局代码如下所示，可见 [三列均分布局 – codepen](https://codepen.io/shanyue/pen/yLMzxqX)
注: 在第一个元素中设置文字，子元素不能因文字过长而挤压。
<div class="container">
<div class="item">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
<div class="item"></div>
<div class="item"></div>
</div>
复制代码
// 以下为样式代码，非核心功能代码
* {
box-sizing: border-box;
}
.container {
background-color: #eee;
height: 10rem;
width: 40rem;
margin: 1rem;
}
.item {
border: 1px solid #888;
}
复制代码在 Issue 或者我的网站中交流与讨论: 34 如何实现三列均分布局
见代码 三均分布局 – Codepen
使用 Flex
注意使用 calc(100% / 3) 设置 flex-basis，同时它的缺陷是不能够很好的为子元素设置左右间隙
.flex-container {
display: flex;
flex-wrap: wrap;
// gap: 1rem;
.item {
flex: 0 0 calc(100% / 3);
}
}
复制代码注意: 如果同时给子元素使用
flex-grow: 1控制均分，当子元素拥有文字等内容时，会受到挤压，将无法实现均分布局。
使用 Grid
使用 Grid 直接操作容器即可，对于子元素之间的间隙也可以很好地控制，可看出 Grid 更为简单，更为高效，更为精确
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
复制代码35 z-index: 999 元素一定会置于 z-index: 0 元素之上吗
在 Issue 或者我的网站中交流与讨论: 35 z-index: 999 元素一定会置于 z-index: 0 元素之上吗
代码见 zindex – codepen
不可，更复杂的示例见 层叠上下文 – MDN
作者：shanyue
链接：https://juejin.cn/post/6969733494754770952
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
