学习笔记二之css

刚学完江哥的前端视频的HTML部分，就迫不及待来重温css了。

01

感想

学完HTML部分，对HTML整体掌握差不多之后，我继续了我的css学习。

css之前也有学过，不过脑子里思绪很乱，包括自己看书以及在网站上看各种老师的视频，结果下来真的感觉很糟糕，可能一方面是每个老师的讲课风格不同使用的软件也不同导致贪吃的我最后不消化了，一方面可能也是因为自己没有做好整理吧。。。总之，很繁乱，有了看江哥HTML5的经验，这一次我汲取了以往的经验不再眉毛胡子一把抓了，我学会了整合优化，更是注重条理化分析记忆，整体下来这次感觉还nice。通过这次，我明白老师真的很重要，在网上各种不连续的视频真的是费心费力费神最后还白费劲，前提是如我这般笨。。。。。所以，个人觉得最好还是能找一个专业的老师带一带，能够从一而终学到底，我很期待即将到来的学习之旅。

前面学了HTML，知道HTML负责给标签添加语义，从结构上定义网页，而css则负责给网页添加各种样式，即 Cascading Style Sheets。感觉css比HTML复杂多了，首先就是标签都变得复杂了，不像HTML那样很简短，而且每个大块都是一大堆的东西要记忆，比HTML更繁乱。这一次跟着南江老师学习css,因为老师的语言很通俗，知识点后先易后难先浅层后深入倒是很好理解，再用实际案例铺开知识点，而且还有清晰的大纲，记忆难度也小了很多。而且南江老师讲的知识点很全面，比如清除浮动，以前看那么多类视频都只知道一种清除浮动的方式，我是第一次在老师这里了解到原来还有那么多种别的方式，大开眼界。。最后不得不说，江哥介绍的快捷键真的很快捷，很like，顿时感觉很专业的样子，不再像以前学校上课感觉老师多厉害那样，原来某种程度上我和大牛只差了个快捷键。。。

总体看来，还是重在整合。css部分，文本属性，文字属性，颜色属性，以及背景属性这几个繁小知识点，尽管繁简，却是用得最多的，几乎每个网页上都是要用的。然后就是大块的知识点了，因为css重点在样式，所以重要的该属css选择器和css属性了。选择器包括三大基本选择器，标签选择器，类选择器和id选择器，以及由三大基本选择器延伸出的后代选择器，子元素选择器，交集选择器，并集选择器，兄弟选择器，属性选择器，序选择器和通配符选择器。css的三大特性又是另一大块，还好是重在理解的。对于网页，有显示模式以及如何转换网页的显示模式。然后就是边框，外边距和内边距一起组成的大盒子，成了css的形象比喻，css成了一个大盒子，里面装满了各种小盒子，每个小盒子都可以拿来放在网页上，还可以在各种盒子里放各种东西。以及由此产生的盒子浮动问题和清除浮动问题。这样想来，学会css还是不难的，但同样，练习是重点，只说不练只会眼高手低。

学HTML5就选李南江，选培训机构我只选小码哥

02

笔记

• css文字属性

  
  
  

• css文本属性

  
  
  

• css颜色属性

  
  
  

• css选择器

  • 后代选择器和子元素选择器

    
    
    

• 交际选择器和并集选择器

  
  
  

• 兄弟选择器

  
  
  

• 序选择器

  
  
  
  

• 属性选择器

  
  
  

• 通配符选择器

  
  

• css三大属性

  • 继承性：给父元素设置一些属性，字元素也可以使用
  • 层叠性：处理属性间的冲突设置
  • 优先级：解决出现层叠时如何层叠的问题
    • 是否是间接选中（即继承）？如果是间接选中，那么谁离目标近就听谁的
  • 是否是相同选择器？如果是直接选中，并且都是同类型的选择器，那么就是谁写在后面听谁的
  • 如果都是直接选中，并且不是同类型的的选择器，那么按照id>类>标签>通配符>继承>浏览器默认的顺序展示效果。
  • ！important :提升指定属性的优先级为最高
  • 优先级权重问题：当多个选择器混合使用时，根据优先级顺序判定谁的综合优先级最高

• div和span（HTML标签）

  • div，一般用于配合css完成网页的基本布局（容器级标签：ul,ol,dl,li等）；

• span，一般用于配合css修改网页中的一些布局信息（文本级标签：p,bius,strong,em,del,ins等）。

• css元素显示模式

  • 块级元素（所有容器级标签都是块级元素）
  • 行内元素（除p外的文本级标签都是行内元素）
  • 行内块级元素

• css模式转换

  • display

    
    
    
    

• 背景颜色

  • background-color
  • 取值：英文单词，rgb,rgba,十六进制

• 背景图片

  • background-image:url();
  • background-repeat:;
    取值为repeat,no-repeat,repeat-x,repeat-y
  • background-position:水平 垂直;
  • 具体方位名词
    • 水平方向：left center right
    • 垂直方向：top center bottom
  • 具体像素（可接受负值）
  • background-attachment:;
    • 取值：scroll，fixed(不随滚动条动)
  • background:背景颜色 背景图片 平铺方式 关联方式 定位方式;

• 边框

  • border：边框宽度 边框样式 边框颜色；
  • 也可分别连写设置以及分开设置。

• 内边距
  • 边框和内容之间的距离；
  • padding:上 右 下 左；
  • 可分别设置；
• 外边距
  • 标签和标签之间的距离；
  • margin：上 右 下 左；
  • 可分别设置；
  • 默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，按最大的显示；水平方向不合并
• css盒模型
  • 仅仅是一个比喻，HTML中的所有标签都是盒子
  • 内容的宽高：自己设置的width和height值
  • 元素的宽高
    • 宽=左border+左padding+width+右padding+右border；
    • 高同理。
  • 元素空间的宽高
    • 宽：左margin+左border+左padding+width+右padding+右border+右margin；
    • 高同理。
  • 增加了padding后元素的宽高也会变化，如果想要保持元素的宽高不变，则要减去部分内容的宽高
  • box-sizing
    • 可以保证给盒子增加了padding和border之后，盒子元素的宽高不变
    • 取值
      • content-box:元素宽高=border+padding+宽高
      • border-box：元素宽高=width/height
• 行高
  • line-height,每行内容的高度
  • 可以实现文字的垂直居中
• css浮动

  • 网页的布局方式

    • 指浏览器如何对网页中的元素进行排版
    • 排版方式
      • 标准流排版方式
        • 浏览器的默认排版方式，对块级元素进行垂直排版；对行内或者行内块元素进行水平排版。
      • 浮动流排版方式
        • 是一种半脱离标准流的排版方式，只支持水平排版，只能设置某个元素左对齐或者右对齐。
      • 定位流排版方式
        • 相对定位
          • 就是相对于自己以前在标准流中的位置来移动
          • 格式
            position：relative；
          • 注意
            • 相对定位在同一个方向上的定位属性只能使用一个
            • 相对定位是不脱离标准流的，会继续在标准流中占用空间
            • 相对定位是区分块级元素，行内元素以及行内块级元素的
          • 应用场景
            • 对元素尽行微调
            • 配合绝对定位来使用
        • 绝对定位
          • 相对于body或者某个定位流中的祖先元素来定位
          • 格式
            position：absolute；
          • 注意
            • 绝对定位是脱离标准流的，不会占用标准流中的空间；
            • 不区分块级元素，行内元素和行内块级元素；
            • 如果一个绝对定位的元素是以body作为参考点，那么其实十一网页首屏作为参考点
            • 一个绝对定位的元素会忽略祖先元素的padding；
          • 绝对定位参考点
            • 默认情况下是以body作为参考点；
            • 如果一个绝对定位的元素有祖先元素，而且祖先元素中有一个是定位流中的元素，那么这个绝对定位的元素就会以定位流中的那个祖先元素为参考点；
            • 如果一个绝地定位的元素有祖先元素，而且祖先元素中有多个是定位流中的元素，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点；
          • 绝对定位的水平居中
            • 不能使用margin:0 auto;让盒子居中；
            • 可以使用left:50%；margin-left：-元素自身宽度一半px;
          • 子绝父相
            • 企业开发中，一半绝对定位和相对定位一起出现，很少单独使用；
            • 使用子绝父相原因
              • 使用相对定位无法让内容水平居中；
              • 使用绝对定位内容会脱标；
              • 子绝父相，可以完美的定位
            • 应用场景
              • 对元素进行微调
              • 配合相对定位使用
        • 固定定位
          • 让某个盒子不随着滚动条的滚动而滚动
          • 格式
            position：fixed；
            • 注意
              • 脱离标准流，不会占用标准流中的空间；
              • 不区分块级元素，行内元素以及行内块级元素；
              • ie6不支持
            • 应用场景
              • 网页对联广告
              • 网页头部通栏
        • 静态定位
          • 默认属性
          • 应用场景
            • 配合js清除定位属性

  • z-index属性

    • 指定定位的元素的覆盖关系

  • 覆盖关系
    - 默认定位的元素会覆盖住没有定位的元素
    - 默认情况下写在后面的元素会盖住前面的定位元素
    - 默认所有元素的z-index属性值为0，如果设置了该属性值，那么谁的比较大谁就显示在前面

  • 定位元素的从父现象
    - 父元素没有该属性，那么子元素谁的值大谁就显示在前面；
    - 父元素该属性值不一样，那么谁的父元素该值大就显示在前面；

  • 应用场景
    - 控制界面的定位元素的覆盖关系

  • 浮动元素的脱标

    • 当某个元素浮动之后，这个元素看上去就像被从标准流中删除了一样，这个即为浮动元素的脱标

  • 浮动元素的排序规则

    • 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
    • 不同方向上的浮动元素，左浮动的会找左浮动，右浮动的会找右浮动
    • 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定

  • 浮动元素的贴靠现象

    • 如果父元素的宽度能够足够显示所有的浮动元素，那么浮动的元素就会并排显示
    • 如果父元素的宽度不能显示所有的浮动元素，那么会从最后一个元素开始往前贴靠
    • 如果贴靠了前面所有浮动元素之后还是不能显示，那么最终会贴靠到父元素的左边或者右边。

  • 浮动元素的字围现象

    • 浮动元素不会挡住没有浮动元素中的文字，没有浮动的文字胡自动给浮动的元素让位置
• 清除css浮动
  • 方式一
    • 给前面的父盒子添加高度
    • 开发中能不写高度就不写，所以不常用
  • 方式二
    • 利用clear：both；
    • 使用该值后margin会失效，所以不常用
  • 方式三
    • 隔墙法
      • 外墙法
        • 在两个有浮动子元素的盒子之间添加一个额外的块级元素
      • 内墙法
        • 在前面一个盒子的最后添加一个额外的块级元素
  • 方式四
    • 给前面的盒子添加双伪元素来清除浮动
  • 方式五
    • 给前面的盒子添加伪元素来清除浮动
  • 方式六
    • 给前面一个盒子添加overflow:hidden;属性

---

学HTML5就选李南江，选培训机构我只选小码哥