css学习总结

css本周学习总结

css选择器

• 通配选择器

<stlye>
 *{   属性值；    }
 </stlye>`

通配符选择器会给所有的标签添加样式

• 标签选择器

<stlye>
标签名{   属性值；    }
</stlye>

给某一类标签统一添加样式

• 属性选择器

<style>
.color(属性名){
color="red"；
}
<li class="color">红色<li>
</style>

1.口诀：样式点定义，结构类使用，开发最常用。
2.可以多类名使用，在class属性中写多个类名，多个类名之间用空格隔开。

• id选择器

<style>
#id名称{
属性值;
}
</style>
<div id="id名称"></div>

口诀：样式#定义；结构id调用，只能调一次，别人勿使用。

• 伪类选择器

css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式（只能给a标签）
:visited 访问后的样式（只能给a标签）
:hover 鼠标移入时的样式（可以给所有标签）
:active 鼠标按下时的样式（可以给所有标签）
如果四个伪类都生效，顺序为：L V H A

• 伪元素选择器

div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素

• 子元素选择器

元素1>元素2{
样式
}

只选择作为某元素最近的一级子元素，则改变元素1中最近元素2的样式

• 并集选择器

元素1，元素2{
样式；
}

选择元素1和元素2（中间用，隔开）改变样式。

• 后代选择器

<style>
 元素1  元素2
 {
 样式 
 }
 </style>

最终改变的父元素1中子元素2的样式,元素1和元素2用空格隔开。
css三大特性
1.层叠性

所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准

样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠
简述就是"后来者居上"
2.继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。
3.优先级
选择器相同，优先级相同
如果选择器不同，则出现优先级的问题，考虑权重
权重

选择器	选择器权重
继承或者通配	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选则器	0，0，1，0
行内样式最高	1，0，0，0

权重特性：
1.!important 在指定的选择器后加 !important 则此时权重最高。
2.继承的权重是0，如果该元素没有直接选中，不管父选择器权重多高，子元素的权重都是0。
3.选择器由四位组成，不会进位。
4.等级判断从左向右，如果某一位数值相同，则判断下一位。
5.如果权重相同，则根据层叠性 就近原则。
CSS边框样式

border-style：边框样式（solid实线、dashed虚线、dotted点线…）
border-width：边框大小（px）
border-color:边框颜色
【注】可单独对一个边框进行设置（border-top/right/bottom/left）

    <style>
      div {
        width: 0px;
        height: 0px;
        border-top-color: transparent<!--透明-->;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;
      }
    </style>

复合样式：border:1px red solid;（边框大小 颜色 样式）对单个边也可以用(顺序不可变)

CSS文字样式

font-family：字体类型
font-size：字体大小（默认大小16px）
font-weight：字体粗细（单词[normal正常（400）、bold加粗（700）； 数字[100-500正常、600-900加粗]）
font-style：字体样式（normal正常、italic斜体[italic所有带有倾斜字体的可以设置；oblique没有倾斜属性的字体也可以设置倾斜]）
color：字体颜色
复合样式：
font:weight style size family .
font:style weight size family.
font:weight style size/line-height family.

CSS背景样式

background-color：背景颜色
background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图）
background-repeat：背景图片的平铺方式（repeat-x、repeat-y、repeat、no-repeat）
background-positon：背景图片位置（x y）=>（数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom]）
background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed背景位置是按照浏览器进行偏移的）
复合样式：background:red url() repeat 0 0;（颜色 背景图 平铺方式 位置）
CSS段落样式

text-decoration：文本修饰（underline下划线、line-through删除线、overline上划线、none不添加任何修饰），可添加多个修饰，用空格隔开
text-transform：文本大小写（针对英文段落，lowercase小写、uppercase大写、capitalize首字母大写）
text-indent：文本缩进（首行缩进font-size的两倍，或2em[em相对单位，永远跟一个字体设置的大小相同）
text-align：文本对齐方式（left默认、right、center、justify[两端点对齐，中间自行调节]）
line-height：定义行高（不是固定值，根据当前字体的大小变化，用数字+px或scale[相对于原来字体的比例]表示）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
盒子边框

border:border-width粗细|border-style样式|border-color颜色
边框综合设置
border: 1px solid red; 没有顺序

表格的细线边框
cellspacing=“0” ,将单元格与单元格之间的距离设置为0
border-collapse:collapse; 表示相邻边框合并在一起

内边距
padding属性用于设置内边距，是指边框与内容之间的距离
属性padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距
简写
2个值 padding: 上下内边距 左右内边距 ；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；
内盒尺寸计算（元素实际大小）

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
外边距

margin属性用于设置外边距。margin控制盒子和盒子之间的距离，属性和简写与padding相同

块级盒子水平居中

盒子必须指定宽度（width）然后就给左右的外边距都设置为auto

文字居中和盒子居中区别
盒子内的文字水平居中是text-align:center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto
清除元素的默认内外边距

代码

• {
  padding:0; /* 清除内边距 /
  margin:0; / 清除外边距 */
  }

注意
行内元素为了兼容性， 尽量只设置左右内外边距， 不设置上下内外边距
外边距合并
相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案
尽量给只给一个盒子添加margin值
嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案
可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

块状元素，行内元素，行内块元素

常见的行内元素
<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>
块级元素
<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
行内块元素
<a> ,<abbr>表示一个缩写形式,<acronym>定义只取首字母缩写
<b>字体加粗<bdo>可覆盖默认的文本方向
<big>大号字体加粗<br>换行<cite>引用进行定义
<code>定义计算机代码文本<dfn>定义一个定义项目
<em>定义为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像<input>输入框<kbd>定义键盘文本
<label> ,<q>,<samp>定义样本文本 <select>,<small>,<span>组合文档中的行内元素<strong>,<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果<var>定义变量`

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

浮动

普通流（标准流）

块级元素会独占一行，从上向下顺序排列
行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行
浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示，让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
浮动最早是用来控制图片，实现文字环绕图片的效果
可以实现盒子的左右对齐等等。

语法：
选择器 { float: 属性值（right/left/none）; }

特点

浮
加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
漏
加了浮动的盒子不占位置，它原来的位置漏给了标准流的盒子
特
浮动元素改变display属性， 类似转换成行内块元素，但是元素之间没有空白缝隙
浮动的应用

浮动和标准流的父盒子搭配

实际的导航栏中不直接用链接a而是用li包含链接(li+a)
li+a语义更清晰
直接用a搜索引擎容易辨别为有堆砌关键字嫌疑而影响网站排名
清除浮动
为什么要清除浮动？
由于父级盒子很多情况下不方便给高度，但盒子浮动又不占有位置，最后父级盒子高度为0的时候，就会影响下面的盒子，那么就得清除浮动（如果本身盒子有高度就不需要)。
清除浮动的方法：

语法
选择器{clear:属性值;}  clear 清除

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他块级标签等亦可。
优缺点

通俗易懂，书写方便，但是添加许多无意义的标签，结构化较差

父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll都可以实现

优缺点
代码简洁，但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，.clearfix:after {  content: ""; display: block; height: 0; clear: both;visibility: hidden; } 
.clearfix {*zoom: 1;}  /* IE6、7 专有 */

定位

它有两部分组成：
定位 = 定位模式 + 边偏移量
偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词top/bottom/left/right）
偏移量是相对父级元素方向边线的偏移量。

定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
static	静态定位	不脱标，正常模式	正常模式	不能	几乎不用
relative	相对定位	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
absolute	绝对定位	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
fixed	固定定位	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
静态定位 按照标准流特性摆放位置，它没有边偏移。

相对定位(relative)

相对定位是元素相对于它 原来在标准流中的位置 来说的。
相对定位的特点：
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute)

绝对定位

是元素以父级元素来移动位置
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：

绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的。

定位口诀 —— 子绝父相
子绝父相 —— 子级是绝对定位，父级要用相对定位。

绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？
分析：

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位(fixed)

固定定位是绝对定位的一种特殊形式： 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
跟父元素没有任何关系；单独使用的， 不随滚动条滚动。
对

定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中
在使用绝对定位时要想实现水平居中，可以按照下图的方法：

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -zz px;：让盒子向左移动自身宽度的一半。
堆叠顺序（z-index）

堆叠顺序
在使用定位布局时，可能会出现盒子重叠的情况。加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

z-index 的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
** 定位改变display属性**
1.浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

2.绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。