CSS2复习总结

学习完css2.0，对自己学到的和想到的做一次总结。
这是我第一次学习使用 Markdown编辑器 来编辑文章

1、css简介与作用

1.1 css简介

层叠样式表(英文全称：Cascading Style Sheets)

是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS可以静态地修饰网页，可以配合各种脚本语言动态地对网页各元素进行格式化。

2 、css重点

2.1盒子模型的6大属性

1）内容区域  width height 
2）内填充区域  padding 
3）边框  border
4）外填充区域  margin
5）背景  <img />   也可以给img添加背景图片

2.2块级元素并排显示：

1）float 浮动 
2）flex 
3）定位
4）行内块

2.3css中的属性：

布局：
    盒子设置
    浮动设置
    定位设置
美化：
    字体设置
    文本设置
    列表设置
    表格设置 

3、css引入的3种方式

1）行内样式

    <div style="width: 100px;height: 100px;border: 2px solid purple;"></div>

2）内部样式

   <style>
    div {
        width: 100px;
        height: 100px;
        border: 2px solid purple;
    }
</style>

3}外部样式

在link后加入css文件的路径（css文件内容同上）

   <link rel="stylesheet" href="mode.css">

4、选择器概述与分类

概述

使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。

分类
注意：以下第一代码区域为html代码，第二代码区为css代码。

1）类别选择器

类选择器根据类名来选择

  <div class="one">使用类选择器</div>

 .one{
    width: 100px;
    height: 100px;
    border: 2px solid purple;
}

2）标签选择器

完整的HTML页面是有很多不同的标签组成，使用标签可以决定对应的css样式

   <h1>标签选择器</h1>

 h1{color: blue;}

3 ）ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式，ID具有唯一性。

 <div id="two">ID选择器</div>

#two{
    width: 100px;
    height: 100px;
    border: 2px solid purple;
}

4）后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，父元素放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

     <p class="father">
        父亲默认黑色
        <label class="child">（孩子）后代选择器设置为蓝色 </label>
        </p>

   .father .child{
     color:blue;
    }

4）伪类选择器

需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。

   <a href="#">当鼠标在此悬浮，颜色为金色</a>

 a:hover{color: gold;}

5）通用选择器

通用选择器用*来表示。

*{ font-size: 12px;}

表示所有的元素的字体大小都是12px；
同时通用选择器还可以和后代选择器组合。

p *{……}

表示所有p元素后代的所有元素都应用这个样式。

6）群组选择器

css文件内

p, td, li { line-height:20px; color:blue; }

表示p, td, li 三个标签内行高为20px，颜色为蓝色。

7）交集选择器

<div class="one">第一个div</div>
<div class="two">第二个div </div>

div.two { color:blue }

会选择到第二个div

8）属性选择器

[id] {} 这样有id属性的标签全会被选择出来

<div class="one">第一个div</div>
<div class="two">第二个div </div>

 background-color: gold;

两个盒子背景同时为金色

5、字体设置

1、 font-style:设置字体是否倾斜 -----属性值 normal italic
em: font-style:normal em 默认倾斜

2、 font-weight:设置字体是否加粗 -----属性值 normal bold bolder 100 200 300
h1: font-weight:normal h1默认加粗

3、 font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px
可以非常大 不能非常小 最小是12px

4、 font-family: 设置字体类型 和用户电脑上设置的字体也有关系
font-family:A,B,C,D

5、 font:上面的5个属性的复合属性
font:font-style font-weight font-size/line-height font-family
其中： font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置

6、 color:设置字体颜色

注意 ：
有继承性：给父元素设置了，子元素也可以继承到
应用：给body设置字体相关的属性。
对于a标签来说，需要选中a标签 。

6、文本设置

1、text-align: 设置文字的位置属性 center居中 left左对齐 right右对齐。
text-align: center
1）让盒子中的文本居中
2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）

2、text-indent: 设置文字首行缩进，值有两种px或em（1em 空一个汉字的宽度）。

3、line-height: 设置一行文字所占高度的属性，默认和字体大小一样, 如果想让单行文字在容器内上下居中，只需让height的值line-height的值相等。
1）如果是子标签是男标签，行高可以撑起子标签的高度
2）如果是子标签是女标签，行高不能撑起子标签的高度

4、text-decoration: 文字装饰的意思，可以设置文字是否有下划线，上划线，中划线，值分别为 underline, overline, line-through。

7、盒子设置

盒子的分类

男盒子：男标签、块级元素
女盒子：女标签，行内元素
行内元素：
        1）完全行内元素：
        2）行内块块元素：img input  除了可以并排显示 其它特点和男盒子一样。

1、盒子的内容区域：width 和 height

1、内容区域：width 和 height
设置盒子的宽和高

2、盒子的内填充区域：padding

2、内填充区域： padding
用来设置内填充，也叫补白 表示内容区域和边框之间的距离
四个方向： 用的也比较多的
padding-top: padding-right: padding-bottom: padding-left:
padding后面也可以跟一个值，二个值，三个值，四个值：
一个值：padding:10px 四个方向的padding都是10px
二个值：padding:10px 20px; 上下是10px 左右是20px
三个值：padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：padding:10px 20px 30px 40px; 上 右 下 左

    注意：
    1）有些标签是有默认的padding  如ul  ol... 等  一刀切  *{ padding:0; }
    2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，
    但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
    3）对于块级元素来说，上下padding可以撑起男盒子的高度。

3、盒子的内填充区域：padding

3、边框： border
粗细 border-widht
样式 border-style
颜色 border-color
一般情况下，不会单独设置 border是一个复合属性
注意点：
1）border:1px solid red; border后面的属性是没有顺序的，一般都是先写border-width,再是border-style，最后是border-color。
2）粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
3）边框的样式也非常多 用的非常多的有这几个：solid 实线 dotted 点画线 dashed 虚线 none 没有线 …
4）边框的颜色设置 单词 用的最多还是16进制 也可以使用rgb函数
5）也可以单独设置某一个方向上的border border-top:1px solid red;

4、盒子的外填充区域：margin

4、外填充区域：margin
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向：
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值，二个值，三个值，四个值：
一个值：margin:10px 四个方向的margin都是10px
二个值：margin:10px 20px; 上下是10px 左右是20px
三个值：margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：margin:10px 20px 30px 40px; 上 右 下 左

    注意：
    1）有此标签有默认的margin  一刀切  *{ margin:0; padding:0; }
    2）对于行内元素来说，margin在垂直方向上是无效的 
    3）margin可以设置auto。 表示尽可以大  div{ margin:0 auto; }
    4）margin可以设置负值  
    5）对于块级元素来说，margin有重叠问题（塌陷问题）

5、盒子的背景： background

5、背景： background
background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border
background-image:设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片

注意
    一个盒子大小正好和背景图大小一样：正好装进去 
    一个盒子大于背景图：默认会在x和y轴都进行平铺 
    一个盒子小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐  
    左上角是指从pddding开始  但是border中也会填充图片图片
    
background-repeat:  控制是否平铺　　
repeat-x  只平铺x轴    repeat-y  只平铺y轴   repeat x和y轴都平铺   
no-repeat x和y轴都不平铺 background-position:
一个小盒子中放一个大的背景图，一个大盒子中放一个小的背景图，都可以使用background-position定位。

附、盒子的塌陷问题及解决办法

margin的对于块级元素来说，margin有重叠问题（塌陷问题）：
1）兄弟元素之间的重叠问题
2）父子元素之间的重叠问题

兄弟元素之间的重叠问题：

兄弟元素之间的重叠问题：
<div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}
按理说：两个盒子之间的margin应该是250px
实现是：就150px 

这种现象叫：margin的塌陷  
margin塌陷的前提：1）男标签  2）垂直方向    
margin到底是多少：取大原则

margin塌陷的前提：1）男标签  2）垂直方向    
塌陷后的margin到底是多少：取大原则
如何避免塌陷问题？  答：只设置一个盒子的margin。

父子元素之间的重叠问题

父子元素之间的重叠问题:
<div class="box9">
    <p class="box10">我是一个段落</p>
</div>    
.box9{ 
    background-color: pink;
    margin-top: 50px;
}
.box9 .box10{
    background-color: gold;
    margin-top: 30px;
}

按理说：p标签上面的应该有80px的margin 
实现的只有50px margin 
这种现象叫：父子元素之间的margin重叠

解决：
    1）给父元素加border 
    2）给父元素加padding  只加一个0px不行  

8、浮动

8.1 浮动的目的

为了实现新闻的字围效果。

8.2 浮动元素的特点

1）贴靠性  如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。

2）包裹性  如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小

3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。

4）如果一个女盒子浮动了，即可设置宽度和高度，此时，女盒子就变成男盒子。

8.3 浮动的影响

1）对父元素造成的影响     父元素的高度会塌陷

2）对后面的兄弟元素影响   会重叠

8.4 浮动影响的消除

1）overflow:hidden

2）加高法

浮动时后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，清除这种影响叫清除浮动。

专业的：clear: left/right/both clear:both

clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。

8.5 浮动的其他问题

问：一个div中浮动元素，能不能脱离div。
答：浮动肯定脱离不了父元素了，可以影响父元素的高度，肯定跑到别的盒子中。

问：两个浮动的元素的能不能重叠到一起？
答：不能

问：什么时候，可以让两个盒子重叠到一起：
答：1）一个盒子浮动，另一个不浮动 2）定位，定位完全脱离标准文档流

问：浮动元素都是先向上浮动吗？
答：对的

问：浮动元素是先上向浮动，浮到什么地方？
答：浮动了父盒子的边界 如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷，
使用overflow:hidden; 不能清除浮动，所以说不要直接在body中裸奔。

问：body是一个盒子吗？
答：是

主要参考老师讲课内容。