css回顾

1.css引入方式

(1).内联样式：把css代码直接写在html标签中。

。/优先级最高，不会被其他样式覆盖。不利于代码的维护，没有样式内容分离，影响阅读体验

(2).内部引入：style,位置在head。不利于复用，适用于单一的页面

(3).外部引入：link,位置在head。解决了内容和样式的分离，更加美观、可以共用。但是增加了一次请求

(4).import引入—@import url(reset.css)在css里写,不推荐使用，会增加请求。

2.盒子模型

盒子在页面中所占的宽度＝左右边距+左右边框+左右填充+内容宽度

盒子在页面中所占的高度＝上下边距+上下边框+上下填充+内容高度

盒子

  • border 边框

border-width 边框宽度,默认宽度是3px,数值不能为负数

border-color 边框颜色，不设置颜色的情况下，显示的颜色和字体颜色相同

border-style 边框样式，主要有四种：solid 实线，dotted 点状线，dashed 虚线，double 双线

复合写法 border:1px red solid;

border-radius:50%; 变成圆边；

ridge 3D垄状边框，有兼容性问题，火狐比较好

  • padding 内间距

padding:Xpx; 上下左右填充X像素；

padding:Xpx Ypx; 上下填充X像素，左右填充Y像素；

padding:Xpx Ypx Zpx; 上填充X像素，左右填充Y像素，下填充Z像素

padding:Xpx Ypx Zpx Tpx; 上填充X像素，右填充Y像素，下填充Z像素，左填充T像素

  • margin

margin和padding用法差不多

margin:0 auto; auto表示居中；

  • box-sizing 启动IE盒子模型

box-sizing:border-box;

3.选择器

  • 标签选择器：直接作用于选择的标签元素，是一个集合

    div{
    /*样式*/
}

  • id选择器：直接作用于叫该名称的标签元素是唯一的，标签也是唯一的，只对该名称标签有效。

    #名字{
    /*样式*/
}

  • 类选择器：给一类标签起一个标识

    .名字{
    /*样式*/
}

  • 群组选择器

    p, body, img, div{
    /*样式*/
}

  • 父子选择器

    div ol li a{
    /*样式*/
}

  • 通配选择器，作用于所有标签

    *{
    /*样式*/
}

  • 子元素选择器

    div>p{
    /*样式*/
}

  • 伪类选择器 :link、:hover、:active、:visited

    E:link{
    /*样式*/
}

-伪元素选择器

E:first-line{
    /*样式*/
}

4.优先级

<标签优先级：1

<类class：100

<id：1000

<!important;提高优先级

5.浮动

float:left;向左浮动；

float:right;向右浮动；

float:none;默认值；

清除浮动的方法

1.给父级设个固定高

2.clear:left;right;both;清除左，右，左右；

3.overflow:visible;默认值

overflow:hidden;超出父级边框的内容裁剪掉

overflow:scroll;超出父级边框的内容裁剪掉，当内容高度超过父级高度的时候出现滚动条

ovrflow:auto；也是滚动条

overflow-x:scroll;x轴滚动条

overflow-x:hidden;x轴没有滚动条

6.定位布局

1.相对定位

position:relative;相对自身当前位置上下左右定位，值可以为负数。可以对块，行标签使用。不会改变标签属性

z-index:1;表示当前标签的层级。当前标签必须使用position属性才有效果。取值为数字，不能为负数；

2.绝对定位

position:absolute;如果没有父级标签设置relativ；当前标签元素是以body可视区域为起点。如果有父级标签设置relative；则以父级标签位置为起点。脱离文档流，改变标签的属性，类似于display:block

3.固定定位

position:fixed;相对于浏览器窗口进行定位

7.颜色

  • 关键词—css支持17种合法命名：aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

  • 十六进制—将三个介于00-FF的值规定了颜色的成分

  • RGB—red, green, blue。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

8.line-height 行高

上一段基线到下一段基线的距离

行距：基线到下一段顶端的距离

9.BFC 块级格式化上下文

满足下面css声明之一的元素便会生成BFC

1.根元素

2.float的值不为none

3.overflow的值不为visible

4.display的值为inline-block、table-cell、table-caption

5.position的值为absolute或fixed

在一个bfc容器里面，里面的子元素无论怎么折腾，都不会影响外部，bfc具有很强的包裹性！

xixi