css基础

CSS

---

• 子选择器 (>)
  .first>span{border:1px solid red;}

• 通用选择器 *
  * {color:red;}

• 伪类选择符
  它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red}

• CSS的某些样式是具有继承性的，
  p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
  可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;

• 特殊性
  标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

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

• 最高权值 !important

• p a{font-style:italic;} 文字斜体

• p a{text-decoration:underline;} 下划线

• .oldPrice{text-decoration:line-through;} 删除线

• p{text-indent:2em;} 段落排版缩进

• p{line-height:2em;} 段落排版--行间距（行高）

• h1{ letter-spacing:50px; } 文字间隔或者字母间隔
  h1{ word-spacing:50px; }单词之间间隔

• 块级元素 文本图片样式text-align:center/left/right;

• 常用的块状元素有：

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

常用的内联元素有：

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

常用的内联块状元素有：

<img>、<input>

• display:block就是将元素显示为块级元素
  块级元素特点：
  1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
  2.元素的高度、宽度、行高以及顶和底边距都可设置。
  3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

• display:inline将元素设置为内联元素
  内联元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度及顶部和底部边距不可设置；
  3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
  小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

• display:inline-block就是将元素设置为内联块状元素。
  inline-block 元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置。

---

盒模型

• 边框：border:1px solid red;
  分开写

  div{
    border-width:2px;
    border-style:solid;
    border-color:red;
    }

border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

• css内定义的宽（width）和高（height），指的是填充以里的内容范围。

元素实际宽度（盒子的宽度）=左边界(margin-left)+左边框(border-left)+左填充(padding-left)+内容宽度(width)+右填充(padding-right)+右边框(border-right)+右边界(margin-right)。

• div{padding:20px 10px 15px 30px;}上右下左

布局模型

• 在网页中，元素有三种布局模型：
• 1、流动模型（Flow）

1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

• 2、浮动模型 (Float)
  任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
• 3、层模型（Layer）
  1、绝对定位(position: absolute)
  如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
  2、相对定位(position: relative)
  如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
  3、固定定位(position: fixed)
  fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

---

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

• 代码缩写

p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句：

body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}

---

设置技巧

---

• 行内元素水平居中
  text-align:center;
• 当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：

1. 定宽块状元素
   满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

2. 不定宽块状元素。

• 加入 table 标签

table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

• 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
• 设置position:relative和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

---

垂直居中

1. 父元素高度确定的单行文本，
   设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
   <u>弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。</u>
2. 以及父元素高度确定的多行文本。
   方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
   css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
   方法二：

display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/

---

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none除外）设置以下 2 个句之一：
1.position : absolute

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