爱站程序员基地CSS入门必备基础（适合小白）
- 一、CSS是什么？
- 1、什么是CSS？
- 2、CSS有什么作用？
- 1、CSS样式规则
- 2、引入CSS的方法
- 1)、行内式
- 2)、内嵌式
- 3)、链入式
- 1)、基础选择器
- 2)、后代选择器
- 3)、并集选择器
- 4)、交集选择器
- 5)、通配符选择器
- 1、字体样式属性
- 1)、font-size：字号大小
- 2)、font-weight: 字体粗细
- 3)、font-family:字体
- 4)、font-style:字体风格
- 5)、font:
- 1)、line-height：行间距
- 2)、text-align: 文本对齐方式
- 3)、text-decoration:修饰线
- 4)、text-indent:首行缩进
- 5)、color:文本颜色
- 1、CSS的层叠性
- 2、CSS的继承性
- 3、CSS的优先级
- 1、内容区域：width 和 height
- 2、内填充区域： padding
- 3、 边框： border
- 4、外填充区域：margin
- 5、背景： background
- 1、元素的浮动
- 2、清除浮动
一、CSS是什么？
1、什么是CSS？
CSS是层叠样式表
2、CSS有什么作用？
用来美化、布局。以HTML为基础，提供了丰富的功能，如设置字体颜色、大小、样式、背景颜色，以及页面排版等等。
二、CSS核心基础
1、CSS样式规则
首先需要了解CSS样式规则，基本语法如下：
选择器{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}
2、引入CSS的方法
1)、行内式
也叫内联样式，是直接写在标记名后面的。基本语法如下：
<标记名 style =“属性1:属性值1;属性2:属性值2;···属性n:属性值n;”>/</标记名>
2)、内嵌式
写在head头部标签中，并且使用style标记定义，基本语法如下:
<head><style>选择器{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}</style></head>
3)、链入式
在head头部标签中直接通过link链接到html文档中，基本语法如下：
<head><link herf=\"CSS文件路径\"type=\"text/css\" rel=\"stylesheet\"></head>
2、CSS选择器
1)、基础选择器
标签选择器： html标记名作为选择器。基本语法如下：
标记名{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}
类选择器： class选择器。使用 .类名 进行标识，基本语法如下：
.类名{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}
id选择器： 使用 #id名称 进行标识，基本语法如下：
#idname{属性1:属性值1;属性2:属性值2;···属性n:属性值n;]
2)、后代选择器
后代选择器用来选择元素或者元素组的后代，把外层标记写前面，内层标记写后面，中间需要加上空格。
例如：.box p soan {属性1:属性值1;属性2:属性值2;···属性n:属性值n;}
3)、并集选择器
任何形式的选择器都可以作为并集选择器的一部分，中间需要用逗号隔开。
例如：
h1,h2,p,.classNmae{属性1:属性值1;属性2:属性值2;···属性n:属性值n;]
4)、交集选择器
也称作标签指定式选择器，在A选择器中选中的B选择器，中间用.连接，没有空格。
例如：
p.box{属性1:属性值1;属性2:属性值2;···属性n:属性值n;]
表示选择p标签中的class=\”box\”这个类
5)、通配符选择器
通配符用*表示，能匹配页面中所有元素，作用范围最广。
例如：
*{margin:0;padding:0}
三、文本的样式属性
1、字体样式属性
1)、font-size：字号大小
属性值了可以使用相对长度单位em，推荐使用像素单位px。
2)、font-weight: 字体粗细
属性值默认normal，可以设置加粗bold,更粗bolder，或者100,200···
3)、font-family:字体
属性值通常可以设置为黑体、微软雅黑、宋体···
4)、font-style:字体风格
属性值默认为normal，可以设置xieti 样式italic,或者oblique。
5)、font:
复合属性，font:font-style font-weight font-size/line-height font-family
前两个属性可以省略或者调换位置，后面的两个都不可以。
2、文本样式属性
1)、line-height：行间距
单位通常使用px,em或者百分比。1）如果是子标签是男标签，行高可以撑起子标签的高度 。2）如果是子标签是女标签，行高不能撑起子标签的高度
2)、text-align: 文本对齐方式
属性值默认left左对齐，可以设置为center居中，也可设置right右对齐。
3)、text-decoration:修饰线
属性值默认是none，可以设置下划线underline，删除线line-through，上划线不常用。
4)、text-indent:首行缩进
属性值可以为不停单位的数值，em字符宽度的倍数，或者相对浏览器的百分比，允许使用负值。
5)、color:文本颜色
属性值可以是十六进制表示颜色，或者英文单词，或者用rgb表示。
四、CSS的高级特性
1、CSS的层叠性
多种CSS样式可以叠加，例如内联式定义p字号大小12px,链入式定义p颜色为红色，那么p标签的字体就是12px,红色。
2、CSS的继承性
子标签继承祖先的属性，例如字体样式和文本样式属性。
3、CSS的优先级
自己写的样式 > 继承过来的样式 ; id> > class > 标记 ;行内 > 内嵌；行内 > 链入；内嵌和链入比较权重，权重相同就近。
五、盒子模型
1、内容区域：width 和 height
对于男盒子来说，表示内容区域
对于女盒子，width和height不起作用
注意点：1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。
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、 边框： 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
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）父子元素之间的重叠问题
margin塌陷的前提：1）男标签 2）垂直方向margin到底是多少：取大原则首先需要知道 margin塌陷是不好的 也是不css的bug 如何避免？答：说白了，只设置一个盒子的margin。
父子元素之间的重叠问题:
按理说：p标签上面的应该有80px的margin实现是：只有50px margin这种现象叫：父子元素之间的margin重叠解决：1）给父元素加border2）给父元素加padding 只加一个0px不行
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定位。一个大盒子中放一个小的背景图，也可以使用background-position定位。
六、浮动
1、元素的浮动
float: 属性值默认为none不浮动，还可以设置left左浮动，right右浮动。基本用法如下
选择器{float：left;}
浮动元素的特点：1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。4）如果一个女盒子浮动了，就可以设置宽度和高度，说白了，女盒子就变成男盒子
2、清除浮动
元素浮动会造成影响：1）对父元素造成的影响2）对后面的兄弟元素影响我们需要清除浮动所造成的的影响，也叫清除浮动：1）清除对父元素所造成影响A）overflow:hiddenB）加高法
clear： 属性值有left清除左浮动，right清除右浮动，both两侧都清除
注意点：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。
overflow: overflow:hidden本意是处理溢出，解决塌陷的。
七、拓展
- 问：一个DIV中浮动元素，能不能脱离DIV。
答：浮动肯定脱离不了父元素了，可以影响父元素的高度，肯定跑到别的盒子中。
- 问：两个浮动的元素的能不能重叠到一起？
答：不能
- 问：什么时候，可以让两个盒子重叠到一起：
答：1）一个盒子浮动，另一个不浮动 2）定位，定位完全脱离标准文档流
- 问：浮动元素都是先向上浮动吗？
答：对的
- 问：浮动元素是先上向浮动，浮到什么地方？
答：浮动了父盒子的边界
如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷，使用overflow:hidden; 不能清除浮动，所以说不要直接在body中裸奔。
- 问：body是一个盒子吗？
答：是
