码字仓颉

CSS总结

2018-07-28

本文记录一些CSS中的一些常识和技巧
CSS 的学习不需要死记硬背,就是经验和熟练度,要会用工具。比如,要会搜索 “css generator”

一、知识点

1、文档流

  • 行内元素
  • 块级元素

2、盒模型

  • padding
  • border
  • margin

3、定位 position

  • static
    默认,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
  • relative
    相对定位,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素原始位置留下空白)
  • absolute
    绝对定位,相对于 static 定位以外的第一个父元素进行定位。
  • fixed
    固定定位,相对于浏览器窗口进行定位。
  • sticky
    粘性定位,基于用户滚动的位置,它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

二、技巧

  • 调试技巧:给元素加border;
  • 浮动,给父元素清除浮动;
    .clearfix{
    content:’’;
    display:block;
    clear:both;
    }
  • 不要上来就给div加高度和宽度,要让内容撑开它;
    • div 的高度是由其文档流的高度决定的
    • height 和 width 是 bug 的来源
  • 脱离文档流

三、常用工具网站

Tags: CSS
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章