CSS基础入门 (全)

一、CSS文本设置

1.color：设置文字的颜色，如：color:red;。
2.font-size：设置文字的大小，如：font-size:12px;。
3.font-family：设置文字的字体，如：font-family:'微软雅黑';。
4.font-style：设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜。
5.font-weight：设置文字是否加粗，如：font-weight:bold;加粗 font-weight:normal 不加粗。
6.font：同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';。
7.line-height：设置文字的行高，如：line-height:24px;。
8.text-decoration：设置文字的下划线，如：text-decoration:none; 将文字下划线去掉。
9.text-indent：设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px。
10.text-align：设置文字水平对齐方式，如text-align:center 设置文字水平居中。

二、CSS颜色表示法1.颜色名表示

    比如：red 红色，gold 金色。

2.rgb表示

    比如：rgb(255,0,0)表示红色。

3.16进制数值表示

    比如：#ff0000 表示红色，这种可以简写成 #f00。

三、CSS选择器1.标签选择器

    标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

• *{margin:0;padding:0}
• div{color:red}
  

2.id选择器

    通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

• #box{color:red}
  

3.类选择器

    通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

• .red{color:red}
• .big{font-size:20px}
• .mt10{margin-top:10px}
  

4.层级选择器

    主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

• .box span{color:red}
• .box .red{color:pink}
• .red{color:red}
  

5.组选择器

    多个选择器，如果有同样的样式设置，可以使用组选择器。

• .box1,.box2,.box3{width:100px; height:100px}
• .box1{background:red}
• .box2{background:pink}
• .box2{background:gold}
  

6.伪类及伪元素选择器

    常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

• .box1:hover{color:red}
• .box2:before{content:'行首文字';}
• .box3:after{content:'行尾文字';}
  

四、CSS盒子模型1.盒子模型解释

    ①元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻。
    ②把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

2.边框

• border:10px solid red;
  

3.内间距padding

• padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
  

4.外间距margin

• margin：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
  

5.盒子模型的尺寸

    ①盒子宽度 = width + padding左右 + border左右。
    ②盒子高度 = height + padding上下 + border上下。

6.margin相关技巧

    ①设置元素水平居中： margin:x auto;
    ②margin负值让元素位移及边框合并。

7.外边距合并

    当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
    ①使用这种特性。
    ②设置一边的外边距，一般设置margin-top。
    ③将元素浮动或者定位。

8.margin-top塌陷

    在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
    ①外部盒子设置一个边框。
    ②外部盒子设置 overflow:hidden。
    ③使用伪元素类：

• .clearfix:before{
•     content: '';
•     display:table;
• }
  

9.css元素溢出

    当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
    overflow的设置项：
    ①visible 默认值。内容不会被修剪，会呈现在元素框之外。
    ②hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
    ③scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    ④auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    ⑤inherit 规定应该从父元素继承 overflow 属性的值。

五、块元素、内联元素、内联块元素1.块元素

    ①支持全部的样式。
    ②如果没有设置宽度，默认的宽度为父级宽度100%。
    ③盒子占据一行、即使设置了宽度。

2.内联元素

    ①支持部分样式（不支持宽、高、margin上下、padding上下）。
    ②宽高由内容决定。
    ③盒子并在一行。
    ④代码换行，盒子之间会产生间距。
    ⑤子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式。

3.解决内联元素间隙的方法

    ①去掉内联元素之间的换行。
    ②将内联元素的父级设置font-size为0，内联元素自身再设置font-size。

4.内联块元素

    内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
    ①支持全部样式。
    ②如果没有设置宽高，宽高由内容决定。
    ③盒子并在一行。
    ④代码换行，盒子会产生间距。
    ⑤子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式。

5.display属性

    ①none：元素隐藏且不占位置。
    ②block：元素以块元素显示。
    ③inline：元素以内联元素显示。
    ④inline-block：元素以内联块元素显示。

六、浮动1.文档流

    文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

2.浮动特性

    ①浮动元素有左浮动(float:left)和右浮动(float:right)两种。
    ②浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来。
    ③相邻浮动的块元素可以并在一行，超出父级宽度就换行。
    ④浮动让行内元素或块元素自动转化为行内块元素。
    ⑤浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果。
    ⑥父元素内整体浮动的元素无法撑开父元素，需要清除浮动。
    ⑦浮动元素之间没有垂直margin的合并。

3.清除浮动

    ①父级上增加属性overflow：hidden。
    ②在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）。
    ③使用成熟的清浮动样式类，clearfix。

• .clearfix:after,.clearfix:before{ content: "";display: table;}
• .clearfix:after{ clear:both;}
• .clearfix{zoom:1;}
  

七、定位1.关于定位

    ①relative：生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移。
    ②absolute：生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
    ③fixed：生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
    ④static：默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
    ⑤inherit：从父元素继承 position 属性的值。

2.定位元素特性

    绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。

3.定位元素层级

    定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。

4.典型定位布局

    ①固定在顶部的菜单。
    ②水平垂直居中的弹框。
    ③固定的侧边的工具栏。
    ④固定在底部的按钮。

八、background属性1.属性解释

    ①background-color：设置背景颜色。
    ②background-image：设置背景图片地址。
    ③background-repeat：设置背景图片如何重复平铺。
    ④background-position：设置背景图片的位置。
    ⑤background-attachment：设置背景图片是固定还是随着页面滚动条滚动。
    实际应用中，可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：

• background: #00FF00 url(bgimage.gif) no-repeat left center fixed;