zoukankan      html  css  js  c++  java
  • css学习总结

    1.css的四大特性:

       继承性、特殊性、层叠性、重要性。注意:继承性的权值最低  ;css的特殊性是用来支持层叠性的

       参考链接:http://blog.csdn.net/xf616510229/article/details/53613212

    2.弹性布局  Flex 布局

      参考链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    3.css几个特别重要的知识点:

      是否脱离文档流的判断标准是:否是在文档流中依然占有空间。

      相邻俩个块级元素margin不会相加,取最大的

      盒子模型:每个元素都是有magin、border、padding;

         定位元素position:static | relative | absolute | fixed;属性left top right bottom只有在position为非static的时候才起作用。

          position默认值:static

          static:对象遵循常规流。此时4个定位偏移属性不会被应用。

          relative:对象遵循常规流,并且参照自身在常规流中的位置,盒子的偏移位置不影响常规流(即元素在文档流中依然保留位置,但是移动的时候像脱离文档流的元素一样不会影响其他元素的位置,本质上relative的元素并没有脱离文档流,依然在文档流中)

          absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

          fixed:对象脱离常规流,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

          float属性只对常规流中的对象起作用,脱离常规流的对象用float失效

          行内元素脱离常规流后表现为块级元素的样式

          使用:absolute  加上z-index 和透明度的设置可以形成很多图层的漂亮界面,已经脱离文档流了

          float:加上该属性的元素进入浮动流:

              如果浮动元素的前面的元素在文档流中则在竖直方向的位置不会变化,但是该元素脱离文档流进入浮动流后后面的元素会顶上来;
                当前面的元素是浮动流中的元素,竖直方向的位子发生变化且跟着前面一个浮动元素的后面, 浮动元素只有当一行放不下的时候才会换行,由于文档流中的元素导致的看似换行的元素是跟着同一行浮动元素的后面,不属于换行
               清除浮动之后还是在浮动流中:clear:left/right;

    4.   行内元素和快级元素的区别:

       1)如果为行内元素的话,那么他的长宽高是不能设置的(但是有些行内元素<input><img>这种“可替换元素”就可以设置宽和高),其大小是根据内容大写的变化来变化的,具有包裹性;而快级元素的长宽高是可以手动设置的,不具有包裹性(即内容可以跑出去(破坏性)),不过一般情况应该会取设置块级元素的宽高吧。

       2)行内元素的magin-top和magin-bottom的设置是没有用的,应该可用从设计的角度来看待,行内元素的内容就应该是在一行上的,如果这俩个值可用设置,那么就打破了行内元素的性质,和块级元素无异,但是padding是可以设置,且一定是以文本为中心,向外发散式的(这也是针对行内元素来的,保存内容在一条线上)

       3)display设置为inline-block的作用:内容解析为块级元素的特性(可以设置宽度高度),对象解析为行内元素的特性(内容和其他元素在一行上)。

    以上,是我的测试内容,不可信。

  • 相关阅读:
    三国演义中的十大谎言 VS 程序员十大口头禅
    Node.js 的单线程事件驱动模型和内置的线程池模型
    为了让医院把医护还给患者,他们用了这个…
    华为云数据库内核专家为您揭秘:GaussDB(for MySQL)并行查询有多快?
    brew
    Python
    Python
    Python
    AtCoder Beginner Contest 215 (个人题解 A~F)
    AcWing 第 13 场周赛  补题记录
  • 原文地址:https://www.cnblogs.com/wanjn/p/7375380.html
Copyright © 2011-2022 走看看