前端随笔小结

1.如果想让两个div在一行的话，可以用display:inline-block;inline或float:left

2.clear属性：指定段落的左侧或右侧不允许浮动的元素。

取消浮动可以用clear:both;

3.外面是一个div大框，作为父元素，里面是不同小框div作为子元素：

• 想实现小框排在一行的话可以在父元素中使用display：flex，则在子元素中会默认排在一行。
• 位置问题：父元素使用position:relative,子元素使用position：absolute，然后根据想要的页面效果设计再top,left则可以实现对位置的精准定位；或者当父元素的宽度和高度确定时，使用position:relative，然后对子元素的宽度可以用百分比，再用position：absolute也可以。

4. 实现页面居中，就要保证外面的总的大框的margin:0 auto;

5.页面最底层铺满整个屏幕用width：100%

6.去掉链接的下划线用text-decoration:none;

7.字体的粗细可以用font-weight,一般400可以

8.搜索框可以用小的table完成，一行两列，第一列为input输入框，第二列为搜索图标图片

9.table布局单元格只放图片而图片下有空隙：设置图片display:block;

10.定时刷新或跳转：

①定时自刷新：<meta http-equiv="refresh" content="1"/>   注意：content的值代表刷新页面的时间

②定时自动跳转：<meta http-equiv="refresh" content="3；url=跳转到页面的网址"/>

11. 实现背景图片铺满整个大div：background-size:100% 100%;

12.实现背景图片铺满整个屏幕：background-size:100% auto;或background-size:100%;height:100%

13.实现强制换行：word-wrap:break-word或者word-break:break-all 或者 white-space: nowrap;;

在td内禁止换行：

td {
    overflow: hidden;
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    white-space: nowrap;
}

14.用&emsp;&nbsp;实现中文中空两格的效果

15.为form表单增加确认弹框confirm

<input type="submit" value="删除" οnclick="return window.confirm('您想删除吗?');"/>

16.可以把相同的样式提出来作为一个类，使用面向对象的思想，在标签中含有多个类即可，避免重复代码的出现

17.css中*{margin：0；padding：0；}是对所有标签适用的