CSS笔记

提示

CSS样式使用优先级：内联式 > 嵌入式 > 外部式

    但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

权值

    有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
    p{color:red;}
    .first{color:green;}
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
    p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？
    标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
    我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
    例如：p{color:red!important;}

设置大小

    可用px也可用百分比（相对于父元素）

颜色值的3种设置方式

    p{color:rgb(133,45,200);}
    p{color:rgb(20%,33%,25%);}
    p{color:#00ffff;}

单位(均为相对单位)

像素

    像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

em

    这是相对于font-size的单位，假如元素font-size:16px,那1em=16px，如果本元素没有设置font-size或者font-size=1em，该em会继承父元素的font-size,一般情况下浏览器默认的font-size:16px.

百分比

p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

隐性改变的display类型

    1. position : absolute 
    2. float : left 或 float:right 
    简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

一、布局属性

display

    1、block:元素显示在下一行，作为一个新段落。
    2、list-item:元素显示在下一行，前面与列表元素标记。
    3、inline:元素显示在当前段落内。
    4、none:元素不显示。

margin和padding属性——用于添加元素周围的间距。

    1、margin(边距) 
        说明：margin指的是在元素"外面"添加空隙，是”相对于“另外一个元素来进行添加空隙的。
    2、padding(填充)
        说明：padding指的是由元素”内部“向外部扩充空间，例如padding-left:20px,意思就是在当前元素的大小上向右增加20px大小。
##align和float属性------用于将元素相对其他内容放置。 
    1、align(对齐)
        a)text-align(水平对齐)
        b)vertical-align(垂直对齐)
        c)text-indent(水平缩进)
        举例:对图像设定垂直方向中间对齐，那么图像周围的文字就会垂直对齐它。也就是说当图像很大而只有一段文字的话，文字就会在图像的垂直方向的中间显示。
    2、float(浮动)
    说明：float只有left和right，当设置元素向一边浮动时，元素会尽可能的向设定边靠拢，除非遇到其它元素，否则会一直向浏览器边界靠拢。而且随着浏览器大小的改变，元素也会跟着浮动，当第一排不够时移向第二排,且无需管display，但是对滚动条的改变无效,想要实现对滚动条有效果请使用背景图片,并且设置background-attachment : scroll;以及用background-position-x(y)指定位置 。
    min-width:可以设定最小宽度，当低于这个宽度的时候float无效。

二、格式化属性

文字

字体风格

        1.font-family:字体集
        2.font-size:字体大小
        3.font-style:字体样式
        4.font-weight:字体粗细
        5.line-height:设置文本行的高度
    使用一下技术管理文本流
        1.float:决定文本如何沿元素绕排。（也就是说你设置了这个元素那么他周围的文字就得按设定的来绕排）
        2.clear:禁止元素沿元素绕排。
        3.overflow：在元素太小而不能包含所有文本时控制文本的溢出方式。

图像

图像属性

1.alt 图像替换文本，当图像未能加载成功显示的文本。

图像映射

        说明：可以将一张图分割成很多份，然后给每一份设定要访问的网址。一般情况下不使用，都是将很多张图合成一张大的，然后每张图设定要访问的网址。

选择器

标签选择器

类选择器

ID选择器

子选择器

    例如：ul>li{color:red} 这句话的意思是，ul列表中的li(第一代)文字全部设置为红色包含（后代）选择器
    例如：ul li{color:red} 这句话的意思是，ul列表中的li文字全部设置为红色(就算li里面还有ul也会把这个ul里的li设置成红色)

伪类

    说明：伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
    例如<a>的伪类有如下：
        a:link 描述未被访问过的超链接样式。
        a:visited 描述访问过并且存在于浏览器内存的超链接样式。
        a:hove 描述用户鼠标悬停下（单击之前）的超链接样式。
        a:active 描述被点击但未被释放时超链接的样式。
    示例代码：   

<style type="text/css">
    a:hover{
        color:#CCCCCC
    }
</style>

三、标签分类

总结

    所有的标签都可以通过 display:block/inline/inline-block 来改变自身的特点
    块状元素默认 display:block
    内联元素默认 display:inline
    内联块状元素默认 display:inline-block

简介

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

说明

块级元素

什么是块级元素？
    在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。
如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

        块级元素特点：

        1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

        2、元素的高度、宽度、行高以及顶和底边距都可设置。

        3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素

        在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

        如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

         div{
             display:inline;
         }
        ......
        <div>我要变成内联元素</div>

        内联元素特点：

        1、和其他元素都在一行上；

        2、元素的高度、宽度及顶部和底部边距不可设置；

        3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

        内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

        inline-block 元素特点：

        1、和其他元素都在一行上；

        2、元素的高度、宽度、行高以及顶和底边距都可设置。

四、盒子模型

    理解margin(内容到边框的区域)、padding（与其它盒子的间隔区域）、border(边框线的宽度)
    以上三个区域有上、下、左、右四个方向可以控制

五、布局模型

1、流动模型（Flow）（浏览器默认模型）

    流动布局模型具有2个比较典型的特征：
    第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
    第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示,当超过浏览器宽度会自动向下一行移动。（内联元素可不像块状元素这么霸道独占一行）

2、浮动模型 (Float)

    设置float属性可以让含该属性的所有元素（包括块状元素）都在同一行向你说指向的方向排列(left/right),
    当所有元素的宽度大于浏览器宽度时会将元素移到下一行(在代码中越靠后的元素越先移到下一行)。

3、层模型（Layer）

    1、绝对定位(position: absolute)
        使用left、right、top、bottom属性相对于其“最接近的一个具有《定位属性》的《父包含块》“进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
        具有定位属性的意思是父包含块必须含有(absolute、relative、fixed)这几个属性之一
    2、相对定位(position: relative)
         相对于自己原来应该在的位置产生设定的偏移（这样可以产生层叠效果）
         例如：div应该独占一行的，当设置了relative属性在top上偏移50px，那么这个div就可以在原来这一行的位置上向下移动50px
    3、固定定位(position: fixed)  
        相对于浏览器页面的绝对定位(也可以参数层叠效果)

六、居中

水平居中——行内元素（内联元素）

    在它的父元素使用text-align:center;就能使该行内元素居中显示

水平居中——定宽块状元素（有固定的width值）

    通过设置“左右margin”值为“auto”来实现居中的

水平居中——不定宽块状元素

    1.加入 table 标签
    2.设置 display: inline 方法：然后按照行内元素的居中方法来进行居中，进行不定宽元素的属性设置
    3.给元素本身以及它的父元素设置 position:relative和float:left，然后在设置父元素left:50%,本元素50%.就可以显示居中了。（原理不懂的话，把代码写出来给元素加上边框就能理解差不多了，但是float:left没整明白）

垂直居中——父元素高度确定的单行文本

    父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

垂直居中——父元素高度确定的多行文本（图片）

    方法一：使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
    方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差