CSS总结

一、CSS是什么

1.什么是CSS？

层叠样式表 Cascading Style Sheet

2.学习CSS主要学习什么？

学习CSS就是学习一堆的选择器和属性。

3.CSS主要作用：

1）布局 2）美化

二.CSS基本语法

1.引入css的三种方式

(1).行内样式

就是直接在标签的开始标签中，使用style属性

(2).内部样式

直接使用style标签来完成，注意，style标签要写在head部分，不要写到body里面了。在heed部分，添加style标签

{3).外部样式

分两步
a.将css作为一个独立的文件来保存，一般后缀.css
b.使用link标签引入

2.css基本语法

CSS样式(或规则)都必须由两部分组成：

选择器(selector)
和
声明块(declaration)，包括属性(property)和属性值(value)

3.css选择器

 选择器
 属性
 属性值

作用：用于选中我们需要处理的标签或内容。

三大选择器

a.类型选择器也叫标签选择器，或叫元素选择器。

b.id选择器

c.class选择器

用的最多

1.字体设置

(1).font-family

设置字体属性

(2).font-size

设置字体的大小

(3).Color

设置文字的颜色

(4).font-style和font-weight

是用来表示样式的：

font-style：是斜体还是普通的
font-weight：是加粗还是普通的

(5).font

使用了font-style、font-weight、font-size、font-family，它们都是和font有关的，所以在css中，提供了一种简写的方式，使用font来实现

2.文本设置

(1).text-decoration

作用：用来设置文本的修饰线，有如下几种：
 underline
 overline
 line-through
 none

(2).text-indent

作用：用来缩进文本的。

(3).text-alig

作用：设置文本对齐的水平方式，通常有如下几种对齐方式：
 left，是默认值
 center
 right
 Justify，表示两端对齐，但是只对英文有效。

(4).line-height

作用：设置行高的。

布局

1）盒子模型
2）块级元素并排显示

盒子模型6大属性：

 1）内容区域  width height 
2）内填充区域  padding 
3）边框  border
4）外填充区域  margin
5）背景  img

内容区域：width 和 height

   对于男盒子来说，表示内容区域 
  对于女盒子，width和height不起作用 

注意点：
1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
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; 用的也比较多

---

内填充区域： 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可以撑起男盒子的高度。

---

边框boeder

border右三部分构成
 边框的粗细
 边框的样式
 边框的颜色

 border-top
 border-right
 border-bottom
 border-left

外填充区域：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有重叠问题（塌陷问题）

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

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

box7

box8

.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塌陷是不好的 也是不css的bug 如何避免？
答：说白了，只设置一个盒子的margin。

父子元素之间的重叠问题:

我是一个段落

.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不行  

盒子模型之背景：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定位。
    一个大盒子中放一个小的背景图，也可以使用background-position定位。
background-attachment: 没什么卵用

三大布局

在css中，有三种布局模型：
	流动布局，默认的
	浮动布局，使用float来实现
	层布局，使用position来实现的

流动布局

默认的，最简单的

默认状态下，HTML中所有的元素都是根据流动布局模型来分布网页内容的。

浮动布局

浮动是css中的难点，也是重点。
作用：用来实现布局的，使得块级元素能够在同一行上和平共处。
属性：float
属性值：left、right
(1).浮动的基本使用
作用：图文环绕，实现网页布局的。
使用：float：属性值
(2).浮动的特点
浮动有如下三大特征：
	包裹性
	破坏性
	块级框
(4).浮动的本质（难点）
在css中，所有的内容都是一个元素。纯文本也是。
在块级元素中，包含的一定是行内元素，行内元素才是描述内容的标签。

层布局

相对定位

特点：
	相对于其正常位置应该出现在哪里
	保持其未定位前的形状
	原本所占的空间仍保留

绝对定位

在实现页面的时候，使用非常的普通。
特点：
	相对于其父定位元素
	元素会从文档流中完全删除，就好像该元素不存在一样
	元素会生成一个块级框

固定定位

特点
相对于视窗（页面窗口）进行定位
用法
	position：fixed
	使用top/right/bottom/left设置位置

a.浮动的特点

Float：left/right
三大特点：
 包裹性
 破坏性：父元素的塌陷
 块级框：如果一个元素浮动之后，那么它就会变成一个块级元素（比如）

具体表现：
 肯定会向父元素的左边（或右边）界靠拢。
 浮动元素不能脱离包含块（水平和垂直方向）
 浮动元素之间不能重叠
 元素不能一直浮动到其父元素的顶端

b.相对定位的特点及如何使用

特点：
 它是相对于自己在文档中的位置来进行定位
 当一个元素设置为相对定位之后，它仍然保留原来的空间
 相对定位的元素不会改变自己的形状（原来是块级的，现在还是块级，原来是行内，现在还是行内的）

使用：
position：relative
需要在水平方向（left/right）、垂直方向（top/bottom）来设置具体的偏移量

绝对定位的特点及如何使用

出现的频率比较高
特点：
 相对于父定位元素进行定位的
 一旦元素设置为绝对定位之后，它就会变成一个块级框（注意行内元素）
 绝对定位元素完全的脱离正常的文档流（立体思维），不会影响正常的文档流
使用：子绝父相
 首先需要设置父元素为相对定位（绝对、固定也可以）position：relative
 设置子元素为绝对定位 position：absolute
 需要在水平方向（left/right）、垂直方向（top/bottom）来设置具体的偏移量
 还需要设置层在z轴方向上的层次关系，使用z-index，值越大，越考上，不要依赖与默认值
注意：
此处的left/right、top/bottom和前面所讲的background-position是两回事，不要混为一谈。

d.固定定位的特点及如何使用

特点：
相对于页面窗口来进行定位的
使用：
 首先，使用position：fixed来进行设置
 其次，在水平方向（left/right）和垂直方向（top/bottom）设置其位置
固定定位在ie6中是不支持的。