坚持学前端的07day

目录

1.盒模型

    1.1标准盒模型

    1.2怪异盒模型  IE盒模型

2.选择器

    2.1  基础选择器

    2.2  关系选择器

    2.3 伪类选择器

3.浮动

    3.1作用

    3.2原理

    3.3语法

    3.4清除浮动的影响

---

1.盒模型

    1.1标准盒模型

        1）组成部分

            content + padding + border + margin

        2）实际大小

            实际宽度:   width + padding + border +margin

            实际高度:   height + padding + border +margin

            width 和 height 只表示内容区域的宽高

    1.2怪异盒模型  IE盒模型

        1）组成部分

            content + padding + border + margin

        2）实际大小

            实际大小：width + margin

            实际高度：height + margin

            width和height 表示 content + padding +border 的总和

        3）盒模型转换

            box-sizing:content-box;    默认值 标准盒模型

            box-sizing:border-box;    怪异盒模型

2.选择器

    2.1  基础选择器

    全局选择器 元素选择器 类选择器 ID选择器

    2.2  关系选择器

     子代选择器 后代选择器 相邻兄弟   通用兄弟

     

    2.3 伪类选择器

        1)语法:

            冒号链接，表示一种状态

        2)伪类选择器:

            :link   超链接点击之前 (只适用于a)

            :visited    超链接点击之后 (只适用于a)

            :hover      鼠标悬停 （适用于所有元素）

            :active     鼠标按下 （适用于所有元素）

        【注意】当四个选择器同时存在，必须按照固定顺序(先爱后恨)lo_ve_ha_te

        3)css3新增伪类选择器

            ① 不区分元素类型：

                :first-child()   第一个元素是.....

                :last-child()    最后一个子元素是...

                :nth-child(数字/倍数/odd{奇数}/even{偶数})  第几个子元素是...  

            ②区分元素类型

            :first-of-type      第一个...

            :last-of-type       最后一个...

            :nth-of-type(数字/倍数/odd{奇数}/even{偶数})    第几个....

3.浮动

    3.1作用

        1)文字环绕图片

        2)布局-- 任何元素都可以浮动,浮动后转换为块级元素

   

    3.2原理

        1)元素浮动后排除到普通文档流之外(元素浮动后在也页面不占据位置)

        2)元素浮动碰到 父元素的边框 或者 浮动元素的边框 ，就会停止

        3)元素只有左右浮动

        4)浮动元素不会重叠

        5)任何元素都可以浮动,浮动后转换为块级元素

        6)元素浮动后,块级元素默认宽度变为由内容撑开

   

    3.3语法

        float:;

            none:  默认值 不浮动

            left:   左浮

            right:  右浮

   

    3.4清除浮动的影响

        影响：元素浮动后不占据位置，父元素高度坍塌，对后面的元素会产生影响

        解决方案：

        1)给父元素加高(已知高度时)

        2)给父元素加overflow:hidden;(自动找高)

        3)受影响的元素加clear:left/right/both  (受影响的元素回到正常的位置，但是父元素的高度没有找到)

        4)空div法（页面新增空元素）

            浮动元素后面，加一个空div  

            空div{clear:both}

        5)伪对象法

            父元素::after{

                content:"";

                display:block;

                clear:both;

            }