<blockquote>
更多描述: 要求对行内元素、块状元素及不定宽高的块状元素都可适用:css
可打开 codepen 进行调试: https://codepen.io/shanyue/pe...,如下是布局代码html
<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; }
</blockquote>webpack
在 Issue 或者 个人网站中交流与讨论: 01 如何实现一个元素的水平垂直居中
提供一些现代浏览器下使用 flex/grid
的方法,不只支持块状元素,并且支持行内元素,对固定高宽与不固定高宽皆可以使用。css3
使用 flex
,如下是经典的垂直居中。git
.container { display: flex; justify-content: center; align-items: center; }
使用 grid
,它是作二维布局的,可是只有一个子元素时,一维布局与二维布局就同样了。github
结合 justify-content
/justify-items
和 align-content/align-items
就有四种方案web
效果能够见 codepenbootstrap
.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; }
在 Issue 或者个人网站中交流与讨论: 02 css 如何实现左侧固定300px,右侧自适应的布局sass
使用 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; }
在 Issue 或者 个人网站中交流与讨论: 03 有没有使用过 css variable,它解决了哪些问题
可在运行时动态修改 CSS。与 less/sass 相比,更加灵活,由于它很容易经过 JS 来控制。根据它来作主题切换简直驾轻就熟。
在 Issue 或者 个人网站中交流与讨论: 04 谈谈你对 styled-component 的见解
最为流行的 CSS-in-JS 方案
在 Issue 或者 个人网站中交流与讨论: 05 display: inline 的元素设置 margin 和 padding 会生效吗
可参考文章 http://maxdesign.com.au/artic...
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; }
在 Issue 或者 个人网站中交流与讨论: 06 html 的默认 display 属性是多少
html
根元素的默认 display
为 block
在 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; }
非定宽了,你这个不行呀
在 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; }
在 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)
在 Issue 或者 个人网站中交流与讨论: 10 简述下 css specificity
css specificity
即 css 中关于选择器的权重,如下三种类型的选择器依次降低
id
选择器,如 #app
class
、attribute
与 pseudo-classes
选择器,如 .header
、[type="radio"]
与 :hover
type
标签选择器和伪元素选择器,如 h1
、p
和 ::before
其中通配符选择器 *
,组合选择器 + ~ >
,否认伪类选择器 :not()
对优先级无影响
另有内联样式 <div class="foo" style="color: red;"></div>
及 !important
(最高) 具备更高的权重
:not
的优先级影响 - codepen 能够看出:not
对选择器的优先级无任何影响CSS Specificity - codepen 能够看出十几个 class 选择器也没有一个 id 选择器权重高
在 Issue 或者 个人网站中交流与讨论: 11 '+' 与 '~' 选择器有什么不一样
+
选择器匹配紧邻的兄弟元素~
选择器匹配随后的全部兄弟元素在 Issue 或者 个人网站中交流与讨论: 12 position: sticky 如何工做,适用于哪些场景
position: sticky
可理解为 relative
与 fixed
的结合体
在 Issue 或者 个人网站中交流与讨论: 13 伪类与伪元素有什么区别
:hover
是伪类,::before
是伪元素content
属性设置内容参考 https://www.w3.org/TR/CSS2/se...
在 Issue 或者 个人网站中交流与讨论: 14 css 如何匹配前N个子元素及最后N个子元素
:nth-child(-n+3)
:nth-last-child(-n+3)
<blockquote>
更多描述: 可参考如下文章:
在 Issue 或者 个人网站中交流与讨论: 15 如何使用 CSS 实现网站的暗黑模式 (Dark Mode)
@media (prefers-color-scheme: dark) { :root{ } }
在 Issue 或者 个人网站中交流与讨论: 16 介绍隐藏页面中某个元素的几种方法
经过 CSS 操控 display,移出文档流
display: none;
透明度为0,仍在文档流中,看成用于其上的事件(如点击)仍有效
opacity: 0;
透明度为0,仍在文档流中,但做用于其上的事件(如点击)无效,这也是 visibility:hidden
与 opacity: 0
的区别
visibility: hidden;
移出文档流,可是再次显示时消耗性能低
content-visibility: hidden;
position: absolute; top: -9000px; left: -9000px;
font-size: 0;
在 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>
可是这就够了吗?
这远远不够,这也足够复杂!
Grid
布局能够自动判断容器大小,不管大小屏幕自动撑满并均分,请看如下属性
.container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
repeat
: 用以 N 整分auto-fill
:表示自动填充minmx
: 即书面意思,最小宽度为 300px
在 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) }
在 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;
在 Issue 或者 个人网站中交流与讨论: 20 写 CSS 时如何避免命名样式冲突
.home-page .home-page-btn
.home-page { .home-page-btn {} }
BEM 有一个缺点,就是有些太长,可适当简化,只包裹该页面组件的根类名,但有可能增长样式冲突的风险
.home-page { .btn {} }
scoped css
会对当前组件(scope)下全部元素生成惟一的属性或类名,对全部 CSS 规则将携带惟一属性实现做用域的命名保护
// 手动写 .btn {} // 编译后 .btn .jsx-1287234 {}
module css
会对类名进行 hash 化
在 Issue 或者 个人网站中交流与讨论: 21 HTML 标签有哪些行内元素
常见的标签有如下几种,可参考 inline element
在 Issue 或者 个人网站中交流与讨论: 22 CSS如何设置一行超出显示省略号
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
在 Issue 或者 个人网站中交流与讨论: 23 CSS如何设置多行超出显示省略号
使用 -webkit-line-clamp
来设置多行超出显示省略号
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
在 Issue 或者 个人网站中交流与讨论: 24 flex 布局中 order 有何做用
order
属性定义Flex布局中子元素的排列顺序,数值越小,排列越靠前,默认为0。
在 Issue 或者个人网站中交流与讨论: 25 flex 布局中 align-content 与 align-items 有何区别
示例代码见: align-content 与 align-items
align-content
做用于纵轴多行元素,一行元素不起做用align-items
做用于纵轴单行元素下图,上部分为 align-content
,下部分为 align-items
在 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; }
在 Issue 或者 个人网站中交流与讨论: 27 简述 css 中 position 的值
static
: 默认值,无定位,top
、right
、bottom
、left
不起任何做用relative
: 相对定位absolute
: 绝对定位,脱离文档流,上下左右以最近的定位父元素为参照系fixed
: 脱离文档流,上下左右以浏览器视口为参照系sticky
: relative
与 fixed
的结合体<blockquote>
更多描述: + 它是如何生成的
在 Issue 或者 个人网站中交流与讨论: 28 什么是 BFC
块级格式化上下文,Block Formatting Context
在 Issue 或者 个人网站中交流与讨论: 29 CSS 如何实现固定长宽比的元素
过去的解决方案是使用 padding
。一个元素的 padding
如若设置为百分比,则表明的是以父元素宽度为基准,根据这个原理,可设置长宽比。但实际上意义有限,毕竟你把 padding 给占了,content 无任何区域。
现代化的解决方案是使用长宽比的 CSS 属性: aspect-ratio
在 Issue 或者 个人网站中交流与讨论: 30 rem、em、vw、wh 的值各是什么意思
他们同属于 CSS Data Type 中的 [length]
,见文档 length - MDN
rem
: 根据根元素(即 html
)的 font-size
em
: 根据自身元素的 font-size
vw
: viewport widthvh
: viewport height在 Issue 或者 个人网站中交流与讨论: 31 normalize.css 与 reset.css 又何区别
What is the difference between Normalize.css and Reset CSS?
在 Issue 或者个人网站中交流与讨论: [32 line-height 的值分别取 [2, 2em, 200%] 有什么区别?](https://q.shanyue.tech/fe/css...
代码见: 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; }
在 Issue 或者 个人网站中交流与讨论: 33 Grid 布局的优点在哪里
响应式!
<blockquote>
更多描述: 布局代码以下所示,可见 三列均分布局 - codepen
注: 在第一个元素中设置文字,子元素不能因文字过长而挤压。
<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; }
</blockquote>
在 Issue 或者 个人网站中交流与讨论: 34 如何实现三列均分布局
见代码 三均分布局 - Codepen
注意使用 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-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
在 Issue 或者 个人网站中交流与讨论: 35 z-index: 999 元素必定会置于 z-index: 0 元素之上吗
代码见 zindex - codepen
不可,更复杂的示例见 层叠上下文 - MDN