盒模型
- /* 红色区域的大小是多少? 200 - 20*2 - 20*2 = 120 */
- .box {
- width: 200px;
- height: 200px;
- padding: 20px;
- margin: 20px;
- background: red;
- border: 20px solid black;
- box-sizing: border-box;
- }
- /* 标准模型 */
- box-sizing:content-box;
- /*IE 模型 */
- box-sizing:border-box;
如何实现一个最大的正方形
用 padding-bottom 撑开边距
- section {
- width:100%;
- padding-bottom: 100%;
- background: #333;
- }
一行水平居中, 多行居左
- <div>
- <span>
- 我是多行文字. 我是多行文字. 我是多行文字. 我是多行文字. 我是多行文字. 我是多行文字. 我是多行文字. 我是多行文字. 我是多行文字.
- 我是多行文字.
- </span>
- </div>
- <div>
- <span>
- 我是一行文字
- </span>
- </div>
- <style>
- div{text-align: center;} div span{display: inline-block;text-align: left;}
- </style>
水平垂直居中
贴上腾讯大佬的一篇文章: 16 种方式实现水平居中垂直居中 https://juejin.im/post/58f818bbb123db006233ab2a
两栏布局, 左边固定, 右边自适应, 左右不重叠
flex 做自适应布局很容易, 但兼容性不好, 这里统一不用 flex 布局
- .left{
- float:left;
- width:300px;
- margin-right: 10px;
- background: red;
- }
- .right{
- overflow: hidden; /* 创建 BFC */
- background: yellow;
- }
如何实现左右等高布局
table 布局兼容性最好, 当然 flex 布局的 align-items: stretch; 也行
- <div class="layout">
- <div class="layout left">left</div>
- <div class="layout right">center</div>
- </div>
- <style>
- .layout{
- display: table;
- width: 100%;
- }
- .layout div{
- display: table-cell;
- }
- .layout .left{
- width: 50%;
- height: 200px;
- background: red;
- }
- .layout .right{
- width: 50%;
- background: yellow;
- }
- </style>
画三角形
- .shape {
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-top: 50px solid transparent;
- border-bottom: 50px solid blue;
- background: white;
- }
link @import 导入 CSS
link 是 Xhtml 标签, 除了加载 CSS 外, 还可以定义 RSS 等其他事务;@import 属于 CSS 范畴, 只能加载 CSS
link 引用 CSS 时, 在页面载入时同时加载;@import 需要页面网页完全载入以后加载
link 无兼容问题;@import 是在 CSS2.1 提出的, 低版本的浏览器不支持
link 支持使用 JavaScript 控制 DOM 去改变样式; 而 @import 不支持
BFC 理解
BFC 触发条件:
根元素, 即 HTML
float 的值不为 none(默认)
position 的值为 absolute 或 fixed
overflow 的值不为 visible(默认)
display 的值为 inline-block,table-cell,table-caption
BFC 特性:
内部的 Box 会在垂直方向上一个接一个放置.
Box 垂直方向的距离由 margin 决定, 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠.
每个元素的 margin box 的左边, 与包含块 border box 的左边相接触.
BFC 的区域不会与 float box 重叠.(可用于清浮动)
BFC 是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素.
计算 BFC 的高度时, 浮动元素也会参与计算.
持续更新...
来源: https://www.cnblogs.com/chenwenhao/p/11217590.html