CSS 基础(盒模型、选择器、权重、优先级)

栏目: CSS · 发布时间: 6年前

内容简介:层叠样式表(Cascading Style Sheets)盒模型包含四部分:margin、border、padding、content。如果不使用doctype声明,浏览器默认使用自己的模式解析。如IE使用IE盒模型,firefo则使用标准盒子模型等。标准盒子模型

层叠样式表(Cascading Style Sheets)

盒模型包含四部分:margin、border、padding、content。如果不使用doctype声明,浏览器默认使用自己的模式解析。如IE使用IE盒模型,firefo则使用标准盒子模型等。

标准盒子模型

CSS 基础(盒模型、选择器、权重、优先级)

IE盒子模型的区别是,content区域包含border和padding

CSS 基础(盒模型、选择器、权重、优先级)

选择器分类:

  • 元素选择器
  • 通配符选择器 *
  • 类选择器
  • 属性选择器
    h1[class^=bar]
    -
    
  • 后代选择器
    h1 span
    h1 > span
    h1 + .bother
    h1 ~ .bother
    
  • 伪类选择器(针对元素的状态)
    • 使用顺序可以是::link、:visited、:focus、:hover、:active,因为如果 :link:visited 放在最后,那所有的元素都会是已访问或者未访问的状态,设置好的 :focus :hover :active 失效,所以 :link:visited 最好放置在前面。
    • 链接伪类 :link :visited
    • 动态伪类 :focus :hover :active
    • 元素伪类 :first-child
  • 伪元素选择器(必须放在出现该伪元素的选择器的后面)
    • :first-letter 块级元素的首字母样式
    • :first-line 首行样式
    • :after 元素之后
    • :before 元素之前

伪类与伪元素区分

伪类:用于向某些选择器添加特殊的效果,如::link :active,(在原有的元素上添加类别)伪类的效果可以通过添加一个实际的类来达到

伪元素:用于将特殊的效果添加到某些选择器,如::after :before,(添加新元素后加以标识)伪元素的效果需要通过添加一个实际的元素才能达到

权重等级

  • 內联样式 1000
  • ID选择器 0100
  • 类选择器、属性选择器、伪类选择器 0010
  • 元素选择器、伪元素选择器 0001
  • 通配符选择器 0000

优先级计算

  • !important > 內联样式 > 高权重 > 低权重
  • !important > id > class > tag
  • 同权重:內联样式 > 嵌入样式表 > 外部样式表

继承均是沿着dom树向下继承,只有一个特殊情况,即body的背景内容会向上传播到html。

不可继承的属性(与盒模型、position�相关�的):

  • margin,padding等
  • border,border-radius、box-shadow等
  • float,width,height等

可继承属性(与基本样式设计有关的):

  • 字体相关,字体颜色、字体大小等
  • 行高
  • 背景颜色等

4、居中

普通元素水平居中(已知宽):
  margin: 0 auto;
  
  绝对定位absolute元素居中:
      1、(已知宽高)借助 left/top 和 margin-left/margin-top
      2、使用 top:50%, left:50%, transform: translate(-50%, -50%)  translate百分比是相对于自身宽度高度
      3、flex布局
      4、display:table与display:table-cell
         table-cell:让标签元素以表格单元格的形式呈现,类似于td标签
      <div class="toast-container">
        <div class="toast-box">
          <div class="box"></div>
        </div>
      </div>

      <style>
        .toast-container {
            position: fixed;
            width: 100%;
            height: 100%;
            display: table;
        }
        .toast-box {
            display: table-cell;
            vertical-align: middle;
        }
        .box {
            margin: auto;
            width: 100px;
            height: 100px;
            background: #dd0000;
        }
      </style>
复制代码

5、position各个值的定位原点

absolute:绝对定位,相对第一个值不是static的元素定位
  relative:相对定位,相对其正常位置定位
  fiexd:固定定位,相对浏览器窗口
  static:默认值,无定位
  inherit:继承父级position值
复制代码

6、display值介绍

block:块类型,可设置宽高,换行展示
  inline:行内类型,不可设置宽高,同行展示
  inline-block:默认宽度为元素宽度,可设置宽高,同行展示
  none:像行内元素类型一样显示
  table:块级表格
  list-item:像块类型元素一样显示,并添加样式列表标记
  inherit:继承父级
复制代码

7、动画的最小时间间隔最好是多少

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
复制代码

8、关于line-height

1)normal 默认值,跟随用户浏览器,与元素字体关联
  2)<number> 如line-height:1.5,假设文字大小20像素,实际行高为 20*1.5
  3)<length> 如line-height:15px;line-height:1.5em [px/pt/em/rem]
  4)<percent>如line-height:150,假设文字大小20像素,实际行高为 20*150%
  5)继承 inherit[IE8+]
  
  注意:
     line-height:1.5,子元素可以继承,根据自己的字体大小进行计算;
     而line-height:150或者line-height:1.5rem,子元素继承,但是不会根据自身字体大小进行计算。 
复制代码

9、元素被设置为float后,display属性的值会自动变成block。

10、:after和:before

之后添加用after;之前用before;
复制代码

11、BFC 块级格式化上下文[block formatting context]

1、BFC是什么
    块级格式化上下文
    样式上:与普通容器无异;
    功能上:可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素
  2、触发BFC的条件(以下任意一个即可)
    浮动元素,float 除none以外的值;
    绝对定位元素,position(absolute,fixed);
    display为inline-blocks,table-cells,table-captions,table-caption(css3);
    overflow为hidden,auto,scroll;
  3、BFC的特性
    1)可包含浮动元素
      内部有浮动元素,父容器设置overflow为hidden,auto,scroll即可清除浮动,只有ie7+支持
      清除浮动[兼容IE6]:
        {
          .clearfix{zoom:1;}
          .clearfix:after{content: ‘’ ; display:table; clear: both;}
         }
     只是局部可使用.clearfix{_zoom:1;overflow: hidden;} 注意副作用
    2)可阻止元素被浮动元素覆盖等
复制代码

12、浮动元素导致高度塌陷的解决方法

父级设置 overflow:hidden/scroll/auto
  父级元素为 BFC
  父级元素设置height
复制代码

13、外边距合并

即垂直方向上设置margin会合并,如果margin值不一样则选高度大的那一个。
复制代码

14、浏览器兼容性问题

1、各个浏览器的默认设置不同,可选择初始化CSS样式,重现设置;
  2、background-position-x/background-position-x在版本稍低的firefox中不支持,可选择使用background-position
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程之道

编程之道

杰弗雷﹒詹姆斯 / 清华大学出版社 / 1999-05 / 18.00元

本书出自美国一位善于进行哲学思考、有十多年工作经验的程序设计师——杰弗雷·詹姆斯之手,他以一种敏锐的眼光审视着发生在程序设计室里的各种各样的小故事,并利用古老的道家思想对其进行分析。简单的故事蕴含深奥的道理,是本书的最大特色。本书语言优美,比喻生动,可读性极强。一起来看看 《编程之道》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具