记录CSS

ID选择器：#id { }      ID是独一无二的，不可重复
类选择器： .class { }
标签选择器  h   p   input...
子选择器：.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素
后代选择器：.food li
通用选择器：*{ }  匹配html中所有标签元素
分组选择符：h1,span,li { }
伪类选择符：例：
a:hover{color:red;}->鼠标滑过状态设置字体颜色变红;
  :link    /*没有访问过的链接*/
  :visited  /*已经访问过的链接*/
input:focus{ }   选取获得焦点（光标）的表单
  

标签的权值为1，类选择符的权值为10，ID选择符的权值为100；行内样式style权值1000；
继承或者  *  权值0
改变样式权重：!important   >>  p{   color:red!important;   }

权重叠加：
复合选择器会权重叠加；权重会叠加，不会有进位

(相同权重值时)：
层叠就是在html文件中对于同一个元素可以有多个css样式存在，
当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，
处于最后面的css样式会被应用。

继承性：子标签会继承父标签的某些样式，text-   font-   line-   color
              标题标签不会继承父元素文字大小；
              a标签不会继承父元素的文字颜色；

优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）



文字：
font-family:" "; /*设置字体*/
font-size:6px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/400  700
font-style:italic/*斜体*/
文字属性连写，文字大小字体必写；其余不写取默认
复合写法：font: style   weight    size/height   family

文本：
text-decoration:underline;/*设置文字下划线*/   ；none/*没有装饰线*/
text-indent:2em;/*缩进*/
line-height:2em;20px/*行间距(行高)*/
letter-spacing:10px;/*文字间隔*/
word-spacing:10px;/*字母间隔*/
text-align:centen;/*块状元素中文本，图片居中*/
 .oldPrice{text-decoration:line-through;}删除线
例：<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p>
        原价：300元 现价：230 元

背景：
background-color   （transparent透明）元素设置背景色         |
background-image   图像放入背景   背景图片撑不开盒子的宽高  |
background-repeat    no-repeat 不平铺；repeat 平铺； 背景图像平铺
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺          |
 background-position: 方位名词(left;right;center;top)  x   y   只写一个参数，第二参数默认垂直
 改变图像在背景中的位置；
精确坐标  x  y  只写一个参数，参数为x坐标，第二参数默认垂直；可混合使用       |
background-attachment:  scroll(滚动) ；fixed(固定，背景定位背景图片偏移位置参考非盒子大小，以浏览器大小为基准)   背景图像是否固定或者随着页面的其余部分滚动。
复合写法：background:背景颜色  背景图片地址  背景平铺  背景图像滚动  背景图片位置
半透明背景  background: rgba(0,0,0, .3);最后参数是alpha(透明度)，取值0~1之间，可以 .3代替0.3
                                     

轮廓：
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。


元素分类：
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：         display:inline;块转内联
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：         display:block内联转块状
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：     display:inline-block设置为内联块状
<img>、<input>           
块级元素：   display:block内联转块状
1、从新的一行开始，并且其后的元素也另起一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
4.是一个容器及盒子，里面可以放行内或者块级元素
内联元素：display:inline 块转内联
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变
4.只能容纳文本或其他行内元素
内联块状元素：  display:inline-block设置为内联块状
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。


盒模型：
Margin(外边距) - 清除边框外的区域，外边距是透明的(可让块级盒子水平居中)。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

border:   边框
每个边框有 3 个方面：宽度、样式，以及颜色
 例：p{ border:2px  dotted  #ccc;}
    border-width:2px;   边框宽度
    border-style:solid;  dashed（虚线）| dotted（点线）| solid（实线）
    border-color:red;    颜色--边框颜色值 transparent。这个值用于创建有宽度的不可见边框
   复合写法：border: width  style   color   
   border-collapse:collapse 合并相邻边框（仅用在表格上）
一个块元素，不设置宽度，这个块元素设置左右padding值，不会撑开盒子。
padding:  填充
例：div{ padding:20px 10px 15px 30px;  } 上top-右right-下botton-左left；
                              5px   10px    上下5，左右10； 
                              5px   10px   20px    上5  左右10  下20
margin:  边界
padding在边框里，margin在边框外。
设置外边距的最简单的方法就是使用 margin 属性。
相邻块元素垂直外边距的合并：
尽量只给一个盒子添加margin值

嵌套块级元素垂直外边距塌陷：
1.给父元素设置边框。
2.给父元素设置内边距。
3.  overflow:hidden;

圆角边框：
border-radius:length(数值或百分比);
border-top-left-radius、border-top-right-radius、
border-bottom-right-radius 和 border-bottom-left-radius 

盒子阴影：
box-shadow: h-shadow  v-shadow   blur  spread  color   inset; 
box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);

color   rgbs(半透明)
文字阴影：
text-shadow: h-shadow   v-shadow    blur    color

布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
       a.流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2.内联元素都会在所处的包含元素内从左到右水平分布显示。
      
      b.浮动(float)  可以让块状元素并排显示
           任何元素都可以浮动，浮动后具有行内块元素相似的特性
           块级元素没有设置宽度，默认父级，添加浮动后，大小根据内容
          设置浮动，漂浮在普通块元素上面(脱标)，浮动盒子不在保留原先位置
                         只影响浮动盒子后面的标准流，不影响前面的
     标准流父元素排列上下位置，内部子元素采取浮动排列左右位置

   清除浮动：（父级盒子没高度；子盒子浮动了；影响下面布局）
   选择器{clear:属性值;}   left ; right ; both(同时左右两侧)
   额外标签法：浮动元素末尾添加一个空标签(要求为块级元素)
                     例如添加<div style="clear:both"></div>，或者其他标签（如<br />等）

  父级添加  overflow属性，hidden（隐藏溢出） ; auto ; scroll

.clearfix:after 伪元素清除(父级类名添加clearfix)
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、 7 专有 */
*zoom: 1;
}                      

  双伪元素清除浮动(父级类名添加clearfix)
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
} 
.clearfix {
*zoom:1;
}

                  
                  父盒子有高度，不需要清除；清除浮动，父级根据子盒子自动检测高度；
                  父级有高度，不会影响下面的标准流
                          

      c.层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，
         但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

定位 = 定位模式 + 边偏移
定位模式：

浮动脱标 ：绝对定位，固定定位
脱标元素特点：行内元素可直接设置宽高；块级不会默认父元素宽，默认宽高0，内容会撑开宽高
     1、绝对定位(position: absolute)
           没有父元素或者父元素无定位，以浏览器为基准。
           父元素有定位，以最近一级有定位父（祖级）元素为基准
           绝对定位，脱标，不占有原来的位置
子绝父相
     2、相对定位(position: relative)
          参照于自己原来的位置来移动；继续保留原来的位置（不脱标）
                 例：position: relative;    
                        top: 100px;.......
     3、固定定位(position: fixed)
          以浏览器的可视窗口（）为基准
          脱标，不占位置
          固定在版心右侧位置：
          浏览器宽度一半--left50%，margin-left:(版心盒子宽度一半)

     4、静态定位              : static;  默认定位方式
 偏移：
      上 下 左 右


居中：
行内元素(文本，图片等)，行内块元素水平居中给其父元素添加 -> 居中   text-align:center
块状元素
 -> 定宽(设置固定宽度)块状居中   左右margin”值为“auto”
 ->不定宽块状居中
1.加入 table 标签：
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法
加入table标签，设置左右margin值为auto
2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

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