《CSS世界》笔记

CSS世界

1. 概念

1. 三种盒子

   display: block;  外在的“块级盒子”和内在的“块级容器盒子”
   display: inline-block;   外在的"内联盒子"和内在的"块级容器盒子"
   display: inlinel;    内外都是“内联盒子”
   
   理解：
   display: block; => display: block-block;
   display: table; => display: block-table;
   

2. 两种尺寸

   内在尺寸：尺寸由内部元素决定
   外在尺寸：尺寸由外部元素决定
   

3. "鑫三无"准则

   无宽度：少了代码，少了计算，少了维护
   无图片
   无浮动
   

4. 格式化宽度

   position:absolute 和 position:fixed 中的left/right 和 top/bottom 同时存在的时候
   
   定位祖先元素宽度：1000px,设置子级top: 20px; left: 20px;则子级宽度1000-20-20=960
   

5. 自定义滚动两种原理

   借助原生滚动：scrollLeft/scrollTop
   根据内部元素尺寸和容器关系，修改内部元素的位置实现滚动效果
   

6. 浏览器渲染的原理

   下载文档内容
   加载头部的样式的资源
   从上而下，自外而内的顺序渲染DOM
   

7. 替换元素和非替换元素

   替换元素：内容可以被替换
    案例： 1.jpg被替换为2.jpg
    包含：img,video,audio,iframre,input,textarea,object
    特性：
    1. 内容的外观不受页面上CSS的影响，如果更改，需要appearance或者浏览器暴露的一些样式接口::ms-check{}等
    2. 有自己的尺寸：默认300*150
   

8. margin和padding特性

   针对内联元素，设置padding，会增大padding的样式空间，但是不会占据空间
   比如
   a {
       padding: 50px;
       background: red;
   }
   a标签的红色范围增大了，但是不会影响到布局结构
   
   使用：
   1. 登录 | 注册，使用padding+border设置分隔符，能控制边框厚度大小
   2. 针对非替换元素的内联元素，margin，padding，border都不计算高度，但是会发生渲染
   3. 针对padding：padding百分比（无论水平和垂直）都是针对宽度计算
    原因：height大多数计算值为0，跟摆设无区别，再加上CSS默认是水平流，计算值会一直有效
   4. 内置padding的标签
    input，textarea，button，select
   案例：
   1. 首页头图固定高度，在大屏OK，小屏幕显大，使用padding进行控制(实现5:1的头图)
   .box {
       padding: 10% 50%;
       position: relative;
   }
   .box > img {
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
   }
   
   2. 使用padding实现三横和双层圆效果
   .icon-menu {
       display: inline-block;
       width: 140px;
       height: 10px;
       padding: 35px 0;
       border-top: 10px solid;
       border-bottom: 10px solid;
       background-color: currentColor;
       background-clip: content-box;
   }
   
   .icon-dot {
       display: inline-block;
       width: 100px;
       height: 100px;
       padding: 10px;
       border: 10px solid;
    border-radius: 50%;
       background-color: currentColor;
       background-clip: content-box;
   }
   

9. margin概念

   // 1. margin支持负值
   // 2. 两端对齐：不用nth-of-type方式
   ul {
       margin-right: -20px;
   }
   li {
       margin-right: 20px;
   }
   // 3. margin合并
    块级元素，不包括浮动和绝对定位元素
    只发生在垂直方向：不考虑writing-mode的情况
   // 4. 阻止margin-top合并
    父元素设置为块状格式化上下文元素
    父元素设置border-top值
    父元素设置padding-top值
    父元素和第一个子元素之间添加内联元素进行隔离
   // 5. 阻止margin-bottom合并
    父元素设置为块状格式化上下文元素
    父元素设置border-bottom
    父元素设置padding-bottom
    父元素和最后一个子元素之间添加内联元素进行隔离
    父元素设置height/min-height/max-height
   // 6. 为什么有margin合并
    
   第一行
    
   
    
   
    
   第N行
    
    
   第一行
    
   第N行
    
    上述效果一样，如果没有margin合并，则第一个案例中间会出现很多空行，很丑
   // 7. 如果让一个div到右侧，不用浮动
    margin-left: auto;  // 右对齐
    margin-right: auto; // 左对齐
    margin: 0 auto;     // 居中
   // 8. 对于内联替换元素，垂直margin有效，并且没有margin合并问题（图片无合并情况）
   

10. border属性

    1. border-color默认颜色就是color色值（outline，box-shadow，text-shadow同理）
    2. 
    
    
    案例：
    1. 鼠标移入文字（文字有边框），鼠标移入，改变文字和边框颜色，可以利用上述第一个特点
        只设置边框厚度，样式，不设置颜色，设置color颜色，这样鼠标移上去，改变color，字体和边框颜色一起改变
    

11. 内联元素与流

    1. 不同的字体在行内盒子中的位置是不一样的
    

2. 技巧

1. 文字少=>居中 ，文字多=>居左显示

   
    
   
   
   
   .box {
       text-align: center;
   }
   .content {
       display: inline-block;
       text-align: left;
   }
   

2. 宽度分离原则

   // no
   .box { width: 100px, border: 1px solid red; }
   .box { width: 100px; margin: 10px; padding: 10px; }
   
   // yes
   .parent { width: 150px; }
   .child { margin: 10px; padding: 10px; border: 1px solid red; }
   
   优点：自动计算宽度，可维护
   缺点：增加HTML标签嵌套，增加页面渲染和维护成本
   
   解决宽度分离的原则：
   box-sizing: border-box;
   缺点：
   1. 不喜欢这种风格，程序员的尿性
   2. 产生没必要的消耗：对于普通内联元素，box-sizing对他们无影响，对于search类型的input搜索框也是没有必要的消耗（待验证）
   3. 不能解决所有的问题：当元素没有水平margin的时候，box-sizing才能真正无计算
   
   总结：box-sizing: border-box解决替换元素高度自适应问题
   input, textarea, img, video, object {
       box-sizing: border-box; 
   }
   

3. 高度100%

   1. 普通
   html, body { height: 100%; }
   .box { height: 100% }
   注意：.box的100%是针对body的content box计算
   
   2. absolute/fixed定位
   .box {
       position: absolute;
       height: 100%;
   }
   注意：.box的100%是针对父级的padding box计算
   

4. min-width/min-height和max-width/max-height的tips

   min-width/min-height: 初始值auto
   max-width/max-height: 初始值none
   
   特殊规则：
   1. 超越!important：max-width会覆盖width（即使width后有!important）
   2. min-width和max-width同时存在，且min-width>max-width的时候，以min-width为准
   
   技巧：
   问题：用css实现向下滑动的效果的时候，由于下滑元素的高度动态生成，无法确定，从0到auto的计算无法形成动画效果和过渡效果
   解决：使用max-height
    将max-width设置到足够大，那么当滑动到真实高度的时候，动画也能停止，按真实高度停止
    注意事项：设置高度足够安全的最小值，防止延迟
   

5. 针对图片异步加载的tips

       // 注意：此处不写src属性，写了之后在某些浏览器下依然有请求
   
   img {visiblity: hidden;}
   img[src] {visiblity: visible;}
   
   针对图片进行全局设置：
   img {
       display: inline-block;
   }
   
   在css的世界，图片资源的固有尺寸是无法改变的，你能看到改变，其实是因为设置了CSS属性，现在CSS3有了object-fill属性，那是后续在研究的内容
   

6. 正在加载中...

   正在加载中...
   
   dot {
       display: inline-block;
       height: 1em;
       line-height: 1;
       text-ailgn: left;
       vertical-align: -.25em;
       overflow: hidden;
   }
   dot::before {
       display: block;
       content: '...\A..\A.';
       white-space: pre-wrap;
       animation: dot 3s infinite step-start both;
   }
   
   @Keyframes dot {
       33% {
           transform: translateY(-2em);
       }
       66% {
           transform: translateY(-1em);
       }
   }
   
   注意：
   1. 为什么用dot：
    dot在IE8-直接展示，
   2. ::before设置display: block;在高版本浏览器下原来的3个点推倒最下面，不影响3行内容展示，::after难实现
   3. 3个点在第一行的目的兼容IE9浏览器，IE9识别dot，但是不支持animation
   
   \A换行不区分大小写，\D也可以换行