Hexo

Posted lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Hexo相关的知识，希望对你有一定的参考价值。

块级元素的特点

  • 独占一行，在所在父元素内依次向下排列，从左上角开始
  • 宽度和高度在不设置的情况下，宽度继承父级元素内容的宽，高度有本身内容决定
  • 可以直接设置盒子模型的所有属性（width height padding border margin）
  • 可以嵌套其他元素
    • p，dt，h1-h6不能嵌套块级

行内元素和行内块级元素

  • 在一行显示，从左到右，达到父级元素最大宽度的时候，会自动折行
  • 在编辑代码时，元素之间有回车或者空格，在页面显示的时候，盒子和盒子之间会有间隙
  • 默认是基线对齐
  • 默认不设置宽度的时候，宽高都是由本身内容决定的

##行内元素

  • 宽度和高度不能设置
  • 可以设置pading和margin的左右值

行内块级元素

  • 可以设置盒子模型的所有属性

在布局中如何使用css属性将块级元素放到一行排布

  • float:left/right
    • 盒子可以从左向右 或者 从右向左
  • display : inline / inline-block / table
    • inline 盒子就不能设置宽度和高度
    • inline-block 可以设置宽高 但是只能从左到右
    • table 可以设置宽高 但是只能从左到右
      • 给父级元素设置 display:table;
      • 给子级元素设置display:table-cell;(单元格)

测试

  • 自测
  • UI
  • 测试（功能）
  • 试运行
  • 正式上线

background 背景

背景和内容的关系，背景永远在内容之后
background-image: url(“”); –> 引入背景图片
background-repeat:no-repeat; –> 背景图片填充方式 不平铺
background-color:red; –> 设置背景颜色（会在背景图片的后面）
background-position: 3px 5px;

如何让图片的中心点和盒子的中心重合
background-position: center center;

background-origin: content-box; –> 规定背景图片定位的

大专栏  Hexo"highlight plain">
1
2
3
4
5
height: 300px;background-color: yellow;
            background-image: url("导航头部/images/icon.png"),url("导航头部/images/logo.png");
            background-repeat: no-repeat;
            background-position: top center,right bottom;
            /*ie 678 （低版本浏览器） 不兼容*/
1
2
background: yellow url("导航头部/images/icon.png") no-repeat 10px 20px;
background-size:100% auto;

绝对定位

  • 想让盒子在父级盒子的那个位置，就在哪个位置
  • 脱离文档流（父级盒子找不到这个定位子级盒子的宽度和高度了）
  • 必须有一个参照物，这个参照物只能是这个定位盒子的父级元素（只要是包含的就可以），父级元素还必须带有定位属性
  • 定位的元素层级高于普通元素

当行内元素或行内块级元素设置line-height不生效的时候，可以将这个元素display属性值设置为block
块级元素通过display:inline-block;转化后，ie7不会识别，所以要在display:inline-block;之后添加一个*display:inline;

1
2
display: inline-block;
*display:inline;

第二种解决方式是将这个元素直接设置为float浮动的元素

在ie7中，如果结构

1
2
3
4
5
6
<style>
b{float:right;}
</style>
<h3>文字 <b></b></h3>
b元素会跑到h3元素的下方
将“文字”用一个元素包起来，将这个元素float:left;即可

选择器 格式 用法
小例子 敲三遍

以上是关于Hexo的主要内容，如果未能解决你的问题，请参考以下文章

《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果代码高亮以及数学公式

Hexo next博客添加折叠块功能添加折叠代码块

《Hexo: 从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理

阿里云开发零基础免费搭建个人Hexo博客

如何编写Hexo主题

Hexo系列 | Hexo源文件备份（防丢失）