了解CSS

CSS定义：cascading style sheet 层叠样式表。

  

语法：

选择器 {

     属性名1:属性值1;

     属性名2:属性值2;

     属性名3:属性值3;

     属性名4:属性值4;

}

CSS使用：

1、通过选择器选择上标签

2、在选择的标签上设置样式

选择器分类：

标签选择器： p{}

类选择器：     .className{}

id选择器：     #id{}

一些常见的样式：

color:red; 文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

---

一共有三种样式：50px字体、红色、下划线

正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有红、大、线，一旦携带这个类名，就有相应的样式变化：

所以要总结两条：

1） class可以重复，也就是说，同一个页面上可能有多个标签同时具有某一个类；

2） 同一个标签可以同时携带多个类，每个标签，就去选取自己想要的类： 。

类的使用，能够决定一个人的css水平。

总结：

1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

---

CSS高级选择器：

直接看代码

s1  s2             后代选择器

s1,s2              并集选择器(选择器组)

s1s2               交集选择器

s1>s2            直接儿子选择器，和后代选择器不一样

s1+s2           下一个兄弟选择器,后面紧挨着的第一个兄弟

---

---

---

盒模型

盒子中主要的属性就5个：width、height、padding、border、margin。

padding:内边距   margin：外边距

盒模型的示意图：

1、

div{

   width: 200px;

   height: 200px;

   padding-left: 10px;

   padding-right: 20px; 

   padding: 40px 50px 60px; // 上右下左（顺时针方向,某一个方向没写就取对边的值）

   padding-bottom: 30px;

   /*border: 8px solid #000000;*/

   border: 8px solid #000;

}

RGB R:red G:green B:blue

200+8*2+50*2=316

200+8*2+40+30=286

---

有一些标签，默认是带有padding，比如ul标签：

所以做网站时候便于精确计算，把这些默认的padding都去掉

*{

    margin: 0;

    padding: 0;

}

*效率不高，可以使用并集选择器，罗列出所有标签，这个标签不用背，直接拷贝过来即可。

ul,ol，h1,h2{

   margin: 0;

   padding: 0;

}

---

border:

就是边框。边框有三个要素：粗细、线型、颜色。

实线：solid  点：dotted   虚线： dashed

颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。

border是一个大综合属性:border:1px solid red;

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left

---

浮动和定位： 

块级元素：div、h、ul、li、p

1. 独占一行（ 独占的不是body的一行，而是父容器的一行），不能与其他任何元素并列。
2. 能够设置宽、高。
3. 如果不设置宽度，那么 宽度将默认变为 父亲的100%。 

行内元素：span、a、input、u、i、img

1. 与其他行内元素可以并排。
2. 不能设置宽、高。默认的宽度、高度，就是文字的宽度、高度。

块级元素和行内元素的相互转换

块级元素可以设置为行内元素

行内元素可以设置为块级元素

div{                       display: inline;                      background-color: pink;                      width: 500px;                      height: 500px;               }

display 是“显示模式”的意思，用来改变元素的行内、块级性质

inline 就是“行内”。

一旦，给一个标签设置

display: inline;

那么，这个标签将立即变为行内元素。 此时它和一个 span 无异 ：

· 此时这个 div 不能设置宽度、高度；

· 此时这个 div 可以和别人并排了

同样的道理，

span{                       display: block;                      width: 200px;                      height: 200px;                      background-color: pink;               }

“ block ”是“块”的意思

让标签变为块级元素。此时这个标签，和一个 div 无异：

· 此时这个 span 能够设置宽度、高度

· 此时这个 span 必须霸占一行了，别人无法和他并排

     · 如果不设置宽度，将撑满父亲

< html >

  < head >

     < meta charset = "UTF-8" >

     < title ></ title >

     < style >

        div {

           display : inline ;

           width : 200 px ;

           height : 200 px ;

           background-color : red;

           margin-top : 2 px ;

        }

        span {

           display : block ;

           width : 200 px ;

           height : 200 px ;

           background-color : green;

        }

      </ style >

  </ head >

  < body >

     < div >Div1</ div >

     < div >Div2</ div >

     < div >Div3</ div >

     < span >Span测试</ span >

  </ body >

</ html >

---

---

定位的分类（5类）:

1、默认的定位

     默认的块元素垂直排列（div，p，h，ul，uo），行内元素左右排列（img，a，span，input）

     这种默认的排列方式成为 流定位 。

标准流里面限制非常多，在做界面布局时候经常需要下面这种需求：

让块级元素既能设置宽和高，又能左右排列

这个就是要解决的问题？？？？

脱离流定位。

2、特殊的定位（4中）

• 浮动定位：可以让块元素左右排列（没有失去块级元素可以设置宽和高的优点）。
• 相对定位：可以让元素以自身为目标产生微小的偏移。
• 绝对定位：可以让元素以父类为目标产生很大的偏移。
• 固定定位：可以让元素以窗口为目标产生很大的偏移。

      后面三种定位都是以某元素为目标产生便宜。

浮动定义：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离DOM流，父级元素会表现的浮动框不存在一样。

浮动示例：

清除浮动

1、clear 属性规定元素的哪一侧不允许其他浮动元素。

clear:消除浮动对自己的影响，当前元素会移动到浮动元素的下方。

2、浮动和清除浮动成对出现

3、清除浮动一般放在最靠近浮动元素的尾部，清除浮动只对同级元素有效