蓝旭工作室第二周预习：CSS进阶＋设计

一、CSS布局与定位

        CSS布局主要是盒子模型的应用，而定位则由不同的定位机制实现。

这是一个典型页面的盒子模型

• 盒子模型——元素怎么样

        页面元素的大小

        边框

        与其他元素的距离

• 定位机制——元素放在哪 

        文档流flow

        浮动定位float

        层定位layer

1、盒子模型

• 页面中所有元素都可以看作一个盒子，占据着一定的页面空间。
• 盒子模型组成：

        content为盒子里的内容

        height高度

        width宽度

        padding内边距——边框与内容的距离

        border边框

        margin外边距——盒子与其他盒子之间的距离

• overflow属性

        当内容溢出盒子框时，overflow属性的取值：

                hidden        超出部分不可见

                scroll        显示滚动条

                auto        如果有超出部分，显示滚动条

• border属性

                border-width: px, thin, medium, thick

                border-style: dashed, dotted, solid, double

                border-color: 颜色

                border: width style color

• 水平分割线

        用以下代码可实现一条长为500px的水平分割线。

.line{
    height: 1px;
    width: 500px;
    border-top: 1px solid #e5e5e5:
}

• 对浏览器默认的设置清零

*{
    margin: 0;
    padding: 0;
}

• margin取值

        margin: 1px 2px 3px 4px;        //四个值分别设置top,right,bottom,left

        margin: 1px 2px;        //等价于margin: 1px 2px 1px 2px;

        margin:1px 2px 3px;        //等价于margin: 1px 2px 3px 2px;

• margin的合并

        垂直方向合并：两盒子间距取最高的高度。

        水平方向不合并。

• 设置水平居中

        图片文字水平居中：text-align: center;

        div水平居中：margin: 0 auto;

2、定位机制

• 文档流flow

        元素分类：block,inline,inline-block

        block：独占一行，width，height，padding，margin属性都可设置。例如：<div>,<p>,<ol>,<table>等。将元素显示为block元素：display: block;

        inline：不单独占一行，width，height属性不可设置。例如：<span>,<a>。将元素显示为inline元素：display: inline;两个inline元素之间默认带有间距。

        inline-block：不单独占用一行，width，height，padding，margin属性都可设置。例如：<img>。将元素显示为inline-block元素：display: inline-block; 

        display: none;        //元素不会显示

• 浮动定位float

        float属性

                left：左浮动

                right：右浮动

                none：不浮动

        clear属性

                both：清除左右两边的浮动

                left：只清除左边的浮动

                right：只清除右边的浮动

                none：默认值，用于移除已指定的清除值

• 层定位layer

        position属性

                static：默认值

                fixed：固定定位，相对于浏览器窗口

                relative：相对定位，相对于其直接父元素

                absolute：绝对定位，相对于第一个非static父元素

二、伪类与伪元素

1、伪类

        依附于已存在的元素，使用冒号作为标识，描述元素在某特性或状态下的样式。

常用伪类

:hover	悬停
:active	激活
:focus	获取焦点
:link	未访问（链接）
:checked	勾选（表单）
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child()	指定索引的子元素
:not()	不匹配给定选择器

2、伪元素

        使用双冒号作为标识，用于创建虚拟元素并定义其样式。

常用伪元素

::before	虚拟元素（前）
::after	虚拟元素（后）
::selection	选中文本
::first-line	第一行文本
::first-letter	第一个字符

        伪类选择器可以链式拼接。

li:hover:last-child::after{
    content:"文本";
    margin-left:20px;
}

        可以使鼠标悬停在最后一行上时出现文本。