3 篇博文 含有标签「CSS」

很多时候，浮动被用于Web布局(还需要依赖清除浮动属性)。事实上，浮动并不是为布局而生。

浮动​

什么是浮动？​

如果把一个元素设置为浮动，那么其他的内容就会围绕这个元素进行流动。

浮动元素会脱离正常的文档流，但是依然对布局有影响。

为什么使用浮动？​

现实中的报刊，都会有一些图片围绕着文字。那么这种场景就特别适合浮动。

浮动API​

浮动元素相对于父级元素进行浮动的。

Name: float
Value: left | right | none | inherit
Initial: none

left​

浮动元素会自动生成display:block属性并浮动在左边。

right​

浮动元素会自动生成display:block属性并浮动在右边。

注意点​

不管是什么元素，浮动后都会得到display:block块级框。因此没必要手动申明display:block。​

多个浮动元素不会发生重叠​

浮动元素比父级元素还要高，那么会影响浮动元素的后代元素(后面的元素)​

浮动元素会浮动到负外边距上，看上去比父元素更宽​

如果浮动元素与内容重叠，那么内容都会在浮动元素之上渲染。​

• 行内元素：边框、背景、内容都会在浮动元素之上渲染。
• 块级元素：边框、背景在浮动元素之下，内容在浮动元素之上渲染

清除浮动​

清除浮动是为了不让内容跟随浮动元素进行流动。

清除浮动API​

Name: clear
Value: none | left | right | both | inherit
Initial: none

left​

左边远离浮动元素

right​

右边远离浮动元素

both​

左右两边都远离浮动元素

注意点​

clear原理是增加了元素的上外边距(marginTop)，很多时候不知道元素需要下移左右，因此会给浮动元素添加下边距。

实践​

想要一个左右布局，就可以简单是使用float: right。

引用​

https://drafts.csswg.org/css2/#propdef-float

https://drafts.csswg.org/css2/#propdef-clear

https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

https://zh.learnlayout.com/

Emotion是一个专门为使用 JavaScript 编写 CSS 样式而设计的库

使用Emotion有两种主要的方法，一种是框架无关的；另一种是与 React 一起使用。

官网

GitHub

传统开发模式​

一般而言，在 Web 开发中，我们都是 CSS、HTML、JavaScript 三者进行分离的。

HTML 负责网页的结构。

CSS 负责网页上面各个元素的展示样式（效果）。

JavaScript 负责网页与用户的交互（逻辑）。

将计算机程序分隔为不同部分的设计原则，就是关注点分离原则（Separation of concerns SoC）。因此 HTML、CSS、JavaScript 三者就是典型的应用关注点分离原则。

flowchart LR
    HTML(HTML  结构) <---> CSS(CSS 效果)
    HTML <--> JavaScript(JavaScript 行为)
    style HTML fill:#52c41a,color:white,stroke:#52c41a
    style CSS fill:#1890ff,color:white,stroke:#1890ff
    style JavaScript fill:#fa8c16,color:white,stroke:#fa8c16

什么是 CSS-in-JS​

CSS-in-JS是一种样式技术，使用 JavaScript 编写 CSS，也就是把 CSS 集成到 JavaScript 中。与我们的认知是背道而驰的

解析此 JavaScript 时，会生成 CSS（通常作为<style>元素）并附加到 DOM 中。