DAY3 深入理解CSS

ChrisorLoser
87 阅读4分钟

一、选择器的特异度

即选择器的特殊程度，越高越优先。
按照权重从高到低依次为：

  1. 内联样式
  2. ID选择器
  3. 类选择器、属性选择器和伪类选择器
  4. 元素选择器和伪元素选择器


    譬如：
    <button class="btn">普通按钮</button>
    <button class="btn primary">主要按钮</button>
    <style>
        .btn {
                display: inline-block;
                padding: . 36em .8em;
                margin-right: .5em;
                line-height: 1.5;
                text-align: center;
                cursor: pointer;
                border-radius: .3em;
                border: none;
                background:#e6e6e6;
                color: #333;
              }
        .btn.primary {
                color: #fff;
                background: #218de6;
                }
</style>

image.png


二、继承

1.继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值。例如：


    <p>This is a <em>test</ em>
    of <strong>inherit</strong>
    </p>
    
    <style>
    body {
        font-size: 20px;
      }
      
    p{
        color: blue;
    }
    
    em {
        color: red;
     }
</style>

image.png



2.显式继承
可以通过inherit关键字让不可基础变得可继承
例如：

    *{
        box-sizing:inherit;
    }
    
    html{
        box-sizing:border-box;
    }
    
    .some-widget{
        box-sizing:content-box;
    }



三、初始值

1.CSS中，每个属性都有一个初始值：

  • background-color的初始值为transparent
  • margin-left的初始值为0 2.可以使用initial关键字显式重置为初始值
  • background-color:initial



四、布局

  1. 布局是什么？
  • 布局是确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

2.布局相关技术：常规流，浮动，绝对定位；
（1）常规流：行级，块级，表格布局，FlexBox，Grid布局

image.png

- width: ①指定content box宽度；②取值为长度、百分数、auto;③auto由浏览器根据其它属性确定；④百分数相对于容器的content box宽度
- height:①指定content box高度；②取值为长度、百分数、auto;③auto取值由内容计算得来；④百分数相对于容器的content box高度；⑤容器有指定的高度时，百分数才生效
- padding: 指定元素四个方向的内边距，百分数相对于容器宽度

  • border:指定容器边框样式、粗细和颜色
  • border属性值：border-width,border-style,border-color;
  • margin:①指定元素四个方向的外边距；②取值可以是长度、百分数、auto;③百分数相对于容器宽度
  • box-sizing:border-box:包含了border和padding在内的盒子宽高，不用再增减

image.png

  • overflow:内容溢出盒子时处置方式：visible（可见）；hidden（隐藏）；scroll（滚动）

  • 块级元素： display:block
    生成块级盒子；适用所有的盒模型属性；

  • 行级元素： display:inline
    生成行级盒子，内容分散在多个行级盒子一起放在一行或拆开成多行；盒模型中的width、height不适用

  • display属性： block: 块级盒子；
    inline：行级盒子；
    inline-block： 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 none：排版时完全被忽略；

  • 行级排版上下文（Inline Formatting Context，简称IFC），只包含行级盒子的容器会创建一个IFC

  • IFC排版规则：
    盒子在一行内水平摆放；
    一行放不下时，换行显示；
    text-align决定一行内盒子的水平对齐;
    vertical-align决定一个盒子在行内的垂直对齐;
    避开浮动元素(float);

  • 块级排版上下文（Block Formatting Context，缩写BFC）；某些容器会创建一个BFC；

  • BFC内的排版规则：
    盒子从上到下摆放；
    垂直margin合并；
    BFC内盒子的margin不会与外面的合并； BFC不会和浮动元素重叠

  • Flex Box: 一种新的排版上下文；
    它可以控制子集盒子的: 摆放的流向；摆放顺序；盒子宽高；水平和垂直方向的对齐；是否允许折行。

image.png

  • Flexibility: (1)可以设置子项的弹性；当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
    (2)flex-grow有剩余空间时的伸展能力；
    (3)flex-shrink容器空间不足时伸缩的能力；
    (4)flex-basis没有伸展或收缩时的基础长度;

image.png

image.png

  • Grid布局：

image.png

image.png

  • position属性： （1）static: 默认值，非定位元素；
    （2）relative：相对自身原本位置偏移，不脱离文档流；
    （3）absolute：绝对定位，相对非static祖先元素定位；
    （4）fixed：相对于视口绝对定位。

- 子绝父相：子盒子用绝对定位，其父盒子需要用相对定位。

- position: relative
（1）在常规流里面布局；
（2）相对于自己本应该在的位置进行偏移；
（3）使用top、left、bottom、right设置偏移长度 时；
（4）流内其它元素当它没有偏移一样布局。

- position: absolute
（1）脱离常规流；
（2）相对于最近的非static祖先定位；
（3）不会对流内元素布局造成影响

感想：
CSS知识点繁多，但是死记硬背效率不高。还得是自己多写多做多实践，才能熟练。并且保持好奇心，充分利用MDN,W3C的文档，善于利用开发者工具，才能不断提升能力！

avatar
文章
阅读
粉丝