• css设计指南-笔记3


    一.层叠

    浏览器层叠各个来源样式的顺序:

    • 浏览器默认样式表
    • 用户样式表
    • 作者链接样式表(按照它们链接到页面的先后顺序)
    • 作者嵌入样式
    • 作者行内样式

    计算特指度:ICE公式

    1. 选择符中有一个ID, 就在I的位置加1;
    2. 选择符中有一个类,就在C的位置加1;
    3. 选择符中有一个标签名(元素名),就在E的位置加1;
    4. 得到一个三位数

    body p#largetext ul.mylist li	    // 1-1-4特指度=114
    

    查理版简单层叠要点

    规则一:包含ID的选择符 > 包含类的选择符 > 包含标签名的选择符
    规则二:行内样式 > 嵌入样式 > 链接样式
    规则一 > 规则二 (如果选择符特指度更高), 无论在哪里,都会胜出
    规则三: 设定的样式胜过继承的样式,此时不考虑特指度
    

    二.盒模型

    盒模型简写

    {margin: 5px 10px 12px 8px;}	//属性值的顺序:上、右、下、左(顺时针旋转)
    {margin: 12px 10px 6px;}		//借用对边的值,即左右都为10px
    {margin: 12px 10px;}			//借用对边的值,上下12px,左右10px
    {margin: 12px;}					//四个方向都是12px
    {margin: 0 0 2px 4px}			//使用0
    

    三种粒度

    1.全部3个属性,全部4条边
    	{border: 2px dashed red;}
    2.1个属性,全部4条边
    	{border-style: dashed;}
    3.1个属性,1条边
    	{border-left-style: dashed;}
    

    混合使用三种粒度

    {border: 4px solid red;}	//先给4条边设置相同的样式
    {border-left- 1px;}	//修改左边框宽度
    {border-right: none;}		//移除右边框
    

    盒子宽度

    1.没有宽度的元素始终会扩展到填满其父元素的宽度为止。
      添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。
    
    2.有宽度的元素,如果再添加水平边框、内边距和外边距,会导致盒子扩展得更宽。
      width属性设定只是盒子内容区的宽度。
  • 相关阅读:
    b站尚硅谷MySQL笔记(婷姐初级,周阳高级)
    word--公式添加编号
    excel--长数字显示问题
    R语言--蒙特卡洛计算定积分
    数学
    数学
    Computer Science
    Computer Science
    Computer Science
    元学习
  • 原文地址:https://www.cnblogs.com/u14e/p/5199120.html
Copyright © 2020-2023  润新知