CSS 学习（2）

一、CSS盒子模型

注意：

• 背景色填充到margin以内的区域 （不包括margin区域）    
• 文字在content区域添加。
• padding不能为负数，而margin可以为负数。

box-sizing:

• 允许以特定的方式定义匹配某个区域的特定元素。取值为content-box | border-box。

盒子模型的一些问题：

• margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
• margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。        

    #box{ 
        width:200px; height:200px; background:red; border:10px blue solid;
        padding : 30px 50px;
        box-sizing: border-box;
    }
    input{ width:100%; padding:30px; box-sizing: border-box;}

二、标签分类

按类型：   

• block : 块          
• inline : 内联          
• inline-block : 内联块    

按内容：

• Flow：流内容
• Metadata：元数据
• Sectioning：分区
• Heading：标题
• Phrasing：措辞
• Embedded：嵌入的
• Interactive：互动的
   

按显示：

• 替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。
• 非替换元素 : 将内容直接告诉浏览器，将其显示出来。

三、显示框类型

display:

• block
• inline
• inline-block
• none

区别：

• display:none   不占空间的隐藏
• visibility: hidden 占空间的隐藏

    #box1,#box2{ width:100px; height:100px; background:red;}
    #box1{ visibility: hidden;} 

四、标签嵌套规范

块能够嵌套内联

    <div>
        <span></span>
        <a href="#"></a>
    </div>

块嵌套块

    <div>        
        <div></div>
    </div>

    错误的写法：
    <p>
         <div></div>
    </p>

内联不能嵌套块

    错误的写法：
    <span>
        <div></div>
    </span>


    正确的写法：
    <a href="#">
         <div></div>
    </a>

五、溢出隐藏

overflow : 

• visible : 默认
• hidden
• scroll
• auto
• x轴、y轴（overflow-x、overflow-y针对两个轴分别设置）

    div{ width:300px; height:200px; border:1px black solid; overflow-y: auto; overflow-x: scroll;}

六、透明度与手势

opacity : 0(透明) ~ 1(不透明)

• 占空间、所有的子内容也会透明

rgba() : 0 ~ 1

• 可以让指定的样式透明，而不影响其他样式

cursor : 手势    

• default：默认     
• 自定义鼠标样式：cursor : url(./img/cursor.ico),auto;

    #div1{ width:100px; height: 100px; background:red; opacity: 0.5;}
    #div2{ width:100px; height: 100px; background:rgba(255,0,0,0.5);
       /*  cursor:help; */
       cursor : url(./img/cursor.ico),auto;
    }

七、最大最小宽高

min-width、min-height
max-width、max-height

• %单位：已父容器的大小进行换算

   body{ height:500px;}
   #box1{ width:200px; height:100%; background:red;}
        #box2{ width:100%; height:80%; background:blue;}

八、CSS默认样式

没有默认样式：

• div
• span

有默认样式：

• body
• h1
• p
• ul

css reset : 

• *{ margin:0; padding:0;}
• ul{ list-style : none;}    
• a{ text-decoration: none; color:#999;}
• img{ dispaly:block}

    ul{ list-style: none;}
    a{ text-decoration: none; color:#999;}
    a:hover{ text-decoration: underline; color:red;} 
    div{ border:1px black solid;}
    img{ display: block;}

九、photoShop切图

png等图片的切图流程：

1. 通过矩形选框工具，选择指定的区域
2. ctrl + c : 复制图层
3. ctrl + n : 新建图层
4. ctrl + v : 粘贴图层
5. 存储为web格式        

psd图片的切图流程：

1. 启动生成器
2. 图像资源
3. 重命名图层，自动获取切图
4. 可上传到线上，方便数据获取

十、float浮动

float特性：

• 脱离文档流，延迟父容器靠左或靠右进行排列。

float取值：       

• left
• right
• none

    body{ border:1px black solid;}
    #box1{ width:100px; height:100px; background:yellow; float:right;}
    #box2{ width:200px; height:200px; background:red; float:right;}

 float注意点：    

• 只会影响后面的元素。
• 内容默认提升半层。
• 默认宽根据内容决定。
• 换行排列。
• 主要给块元素添加，但也可以给内联元素添加。

        ul{ margin:0; padding:0; list-style: none; width:300px; height:300px; border:1px black solid;}
        li{ width:100px; height:100px; background:red; border:1px yellow solid; box-sizing: border-box; float:left;}
        li:nth-of-type(1){ height:120px;}
        li:nth-of-type(2){ height:80px;}
        span:last-of-type{ float:right;}

清除float浮动：

• 固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。     
• 父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。      
• overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。      
• display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。     
• 设置空标签 : 不推荐 , 会多添加一个标签。     
• after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。

    #box1{ width:200px; border:1px black solid;}
    #box2{ width:100px; height:200px; background:red; float:left;}
    .clear:after{ content:''; clear:both; display: block;}