1 | CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、 |
1 | 在 CSS 中,width 和 height 指的是内容区域(element)的宽度和高度。 |
标准盒模型和IE盒子模型
1 | W3C标准盒子模型范围包括margin、border、padding、content,并且content部分不包含其他部分。 |
csskr。
1 | CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、 |
1 | 在 CSS 中,width 和 height 指的是内容区域(element)的宽度和高度。 |
1 | W3C标准盒子模型范围包括margin、border、padding、content,并且content部分不包含其他部分。 |
定义:1
2
3
4
5
6CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,
然后开发者就只要使用这种语言进行编码工作。
通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,
以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,
例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,
可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
其它 CSS 预处理器语言:1
2
3
4
5
6
7
8CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的 CSS 预处理器语言,比如说:
Sass(SCSS)
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS
如此之多的 CSS 预处理器,那么“我应该选择哪种 CSS 预处理器?”
到目前为止,在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀,讨论的也多,对比的也多。
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1 | 1.使用空标签清除浮动。 |
1 | .parent { |
1 | 在 block 元素被设定固定宽度的情况下,可以使用设置元素 margin-left 和 margin-right 的值为 auto 的方法实现水平居中。 |
1 | 通过 inline-block实现 |
1 | 通过 flexbox 实现 |
1 | 单行 |
1 | 多行 |
如果上述方法不能使用,你可以尝试使用 flexbox,一个单独的 flexbox 子元素可以轻易的在其父元素中居中。谨记,这种方法需要父元素有固定的高度。1
2
3
4
5
6.parent {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
如果上述两种方式均不能使用,你可以使用“幽灵元素”技术,这种方法采用伪元素 ::before 撑开高度 ,文字垂直居中。1
2
3
4
5
6
7
8
9
10
11
12
13
14.parent {
position: relative;
}
.parent::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}
已知元素高度1
2
3
4
5
6
7
8
9.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
未知元素高度1
2
3
4
5
6
7
8.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用 flexbox1
2
3
4
5.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
固定宽高1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
不固定宽高1
2
3
4
5
6
7
8
9.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
使用 flexbox1
2
3
4
5.parent {
display: flex;
justify-content: center;
align-items: center;
}
tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true