前端随笔小结

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.定时刷新或跳转:

①定时自刷新:   注意:content的值代表刷新页面的时间

②定时自动跳转:

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;

14.用  实现中文中空两格的效果

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

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

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

你可能感兴趣的:(前端)