黑马程序员技术交流社区

标题: 我的技术贴 [打印本页]

---

作者: 秦浪浪    时间: 2019-4-19 22:49
标题: 我的技术贴

盒子的实际占位大小（理解记忆）
盒子的实际占位大小=内容宽高+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;上划线

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2