CSS Display 属性与盒模型

CSS Chrome HTML inline inline-block 盒模型 IE

因为HTML流式文档的特性,页面布局往往是新手最为头疼的问题之一。 每个HTML元素都会渲染为一个Box,可分为inline Box和block Box。 根据display属性的不同,Box的呈现方式又有所不同。 本文首先引入CSS盒模型,然后通过不同的display属性分别介绍Box常见的呈现方式。

Box Sizing:元素大小的计算方式

在HTML中,任何HTML元素都会被呈现为一个矩形。该矩形由内容、内边距、边框、外边距构成。举个例子:

<style>
.box-demo{
  width: 100px;
  height: 100px;
  border: 50px solid green;
  padding: 30px;
  margin: 50px;
  background: yellow;
}
</style>
<div class="box-demo"></div>

上述的<div>中,内容、边距与边框如下图所示:

  • 黄色的背景作用于内容内边距构成的矩形,其宽高为160px:宽度100px+两侧的内边距30pxX2;
  • 绿色部分为边框,宽度为50px
  • 与浏览器边框的距离为外边距,宽度为50px

例子中width属性定义的是内容的宽度,不包含边距、边框。然而在IE中width定义的是内容+内边距+边框的宽度。 这是由box-sizing属性来定义的,前者的默认值为content-box',后者的默认值为border-box`。

常见Linux命令

Bash C++ Linux Socket awk grep kill sed 内存 磁盘 路由 进程 正则表达式

这是一篇手册文章,总结了小编(曾经)常用的linux命令,以及它们的一些常用参数和场景。更新中……

source

执行某个文件,效果等同于.,都是在当前进程的上下文执行。

bash

以bash执行某个文件,作为子进程。

-x 参数可以查看调试信息。

gdb

用来调试C程序,打开一个调试:

gdb a.out

调试命令

break 16        # 断点行
break func      # 断点函数
info break      # 打印断点
        
r               # run
n               # next
c               # continue
p i             # print i
bt              # 函数堆栈
finish          # 退出函数
q               # 退出GDB

${}

${str%.txt}     # 最短匹配末尾.txt并删除
${str%%.txt}    # 最长匹配末尾.txt并删除
${str#.txt}     # 最短匹配开始.txt并删除
${str##.txt}    # 最长匹配开始.txt并删除

该表达式支持通配符

awk

awk 'pattern {action}'
pattern(all by default) BEGIN, END
action(print by default)
builtin variables
NR:       已输入记录的条数。
NF:       当前记录中域的个数。记录中最后一个域可以以$NF的方式引用。
FILENAME: 当前输入文件的文件名。
FS:       域分隔符,用于将输入记录分割成域。其默认值为“空白字符”,即空格和制表符。FS可以替换为其它字符,从而改变域分隔符。
RS:       当前的记录分隔符。默认状态下,输入的每行都被作为一个记录,因此默认记录分隔符是换行符。
OFS:      输出域分隔符,即分隔print命令的参数的符号。其默认值为空格。
ORS:      输出记录分隔符,即每个print命令之间的符号。其默认值为换行符。
OFMT:     输出数字格式(Format for numeric output),其默认值为"%.6g"。
%0:       整个记录
%n:       第n个记录

Gnuplot 笔记

Bash Linux Windows X11 sed 异常 运算符 LaTeX

gnuplot是一个免费的命令行的绘图软件,在Linux,Windows,OSX等平台都有支持, 虽然叫做gnuplot但它并未使用GPL协议,而是使用自己的开源协议发布(感谢goodgoodlivetodown网友勘误)。 小编曾用它绘制了毕业论文中数百张复杂的脉冲星检测分析图。现在总结一下它的使用方法备忘。

Gnuplot is a portable command-line driven graphing utility for Linux, OS/2, MS Windows, OSX, VMS, and many other platforms. The source code is copyrighted but freely distributed (i.e., you don’t have to pay for it). It was originally created to allow scientists and students to visualize mathematical functions and data interactively, but has grown to support many non-interactive uses such as web scripting. It is also used as a plotting engine by third-party applications like Octave. Gnuplot has been supported and under active development since 1986. –Gnuplot

安装

gnuplotgnuplot-x11(可输出至X11)

帮助

$ gnuplot
gnuplot> help some_command

示例

# 文件
set term postscript eps enhanced size 3.7,5 #enhanced 使用增强文本,size 图的大小(英寸),terminal默认为wxt(X11)
set output "psr.eps"                        # 输出文件名

# 坐标轴
set xlabel "Period (s)"                     # x轴label
set logscale x                              # 设x轴为对数坐标
set xtics 1e-9,-1000,1e-24                  # x轴标度范围
# set xtics (2,4,6,8,10)
set xr [0.001:20]                           # x轴范围
set ydata time                              # 设y轴数据为时间
set timefmt "%H:%M:%S"                      # 设置时间格式
set format y "%g{/Symbol \260}"             # y轴标度格式

# 标注
set key 0.01,100                            # legend位置
# unset key                                 # 取消legend
set arrow from 0.1,2 to 0.2,3               # 箭头
set label "peak" at 0.01,10 rotate by 10    # 标签

# 变量
a=3*2**3  

# 数据文件作图
plot "a.dat" using 1:2 title 'relation' with points pointtype 6 linetype rgb "red" pointsize 1,\ 
# 函数做图
plot x**2    using 1:2 title 'xxxxxxxx' with line linetype 5    

Django 搭建过程记录

Bash Django Github Python SQL 数据库

2011年小编第一次想做Web开发于是找到了Django,因为完全不懂数据库而以失败告终。 2013年小班再次拿出Django,终于开发了小编的第一个Web站点(多用户博客:God Notes)。 最初部署在BAE上,现在已经打包封存在Github了:https://github.com/harttle/godnotes 本文记录了小编的第一个Django应用是如何开始的。

中文乱码辨识

UTF-8 字符串 字符编码

在软件开发中常常会碰到中文乱码。有时我们不知道该文件的正确编码是什么,会使用文本编辑器(如UltraEdit)来尝试所有可能的编码。然而,乱码本身也有一定的规律,从乱码的样子大致可以得知正确的编码类型。在此给出各种编码的字符串被错误解析时的样子。

以下面语句为例:

这是一个字符集测试,作者为Harttle。

导航: 上一页 下一页

加载中...

🔝