黑马程序员技术交流社区

标题: 加深记忆 [打印本页]

---

作者: 方小白~    时间: 2019-3-18 20:11
标题: 加深记忆


今天把去电脑维修中心把电脑重装了一下，然后我的笔记呀……都没了，只能靠脑子来总结下了
作为一个合格的学习笔记，当然是把自己还记不住的东西好好的记录下来加深记忆了

超出部分文本用省略号代替：
white-space: nowrap;                                            强制文本一行显示；
overflow: hidden;                                                  超出文本部分隐藏；
text-overflow: ellipsis;                                           省略号代替超出部分
另：如果是有多行，每行后面可以加个br标签换行，然后最后一行超出部分会用省略号代替，我自己试过，不知道这种做法是否合适


用after伪元素清除浮动：
.clearfix:after {
content:"";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom:1;
}

对齐方式：
我宽度的会计元素居中对齐: margin: 0 auto;
文字水平居中对齐: text-align: center;
文字垂直居中对齐: height=line-height;
行内元素和图片垂直对齐: vertical-align: middle;
定位元素水平居中对齐: left: 50%;margin-left: -自身宽度的一半；

属性书写顺序：
1、布局定位属性：display , position , float , clear , visibility , overflow
2、自身属性：width , height , margin , padding , border , background
3、文本属性：color , font- , text-align , vertical-align
4、其他属性：content , cursor , border-radius , box-shadow , text-shadow , background-

cellspacing      单元格之间的距离
cellpadding     单元格内容与边框之间的距离
rowspan          跨行合并
colspan           跨列合并

清除样式：清除元素默认的内外边距
* {
margin: 0;
padding: 0
}
让所有斜体 不倾斜
em,
i {
font-style: normal;
}
去掉列表前面的小点
li {
list-style: none;
}
图片没有边框   去掉图片底侧的空白缝隙
img {
border: 0;  /*ie6*/
vertical-align: middle;
}
让button 按钮 变成小手
button {
cursor: pointer;
}
取消链接的下划线
a {
text-decoration: none;
}

---

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

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