盒子的实际占位大小(理解记忆)
盒子的实际占位大小=内容宽高+padding+border
Padding相关设置不同方向(强制记忆):
padding:30px; 四个方向的内边距都是一个值;
padding-left:40px; 设置左边的内边距;
padding-right:40px; 设置右边的内边距
padding-top:40px; 设置距离顶部的内边距
Padding-bottom:40px; 设置距离底部的内边距
如何让盒子水平居中(强制理解)条件:
01盒子必须要有宽度,显示模式尽量是块元素;
02设置左右外边距为auto
书写方式
方法1:margin-left:auto; margin-right:auto;
方法2:margin:auto;
方法3:margin:0 auto; 前面的0不一定是固定的,它表示margin-top和margin-bottom,可以根据需求进行调节;
text-align文本居中显示和margin:auto;的区别
01、text-align是让盒子里面的文本和行内元素或者行内块元素居中显示;
02、margin左右设置为 auto让块元素盒子居中显示;
常用测试颜色16进制:
黑色系列:#000; #333; #666; #9999;
灰色系列:#ccc; #eee; #ddd; #dedede;
红色:#f00;
文字居中显示text-align(强制记忆)
取值:left right center
text-align:center; 表示让盒子里面的文本居中显示,文本必须有父级;
文本行高line-height(强制记忆)
line-height设置两行文字之间的距离;
量取行高的方法
如果有psd源文件可以直接去字符面板索取
首行缩进text-indent(强制记忆)
text-indent首航缩进,取值为具体的像素值或者直接em,1em等于一个字的大小,取值可以是正值也可是负值;
文本装饰text-decoration (强制记忆)
text-decoration:none;没有线 ---- 取消超链接a默认的下划线
text-decoration:underline;下划线 --- 给需要加下划线的文字加下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线 |
|