css的理解

关于css的理解

• css的含义及作用

---

“css”的中文名字叫做层叠样式表，英文“Cascading Style Sheet",其实"css"在写网页的过程中就是一个选择器。

作用：它的作用有布局和美化作用。

布局

• 盒子模型

---

它是写网页时最常用到的，它有六大属性：内容区域（width heigh)
外填充区域（margin)、内填充区域（padding)、边框（border)、背景（background)

1. 内容区域：也就是盒子的高度和宽度。一般来说，盒子的高度是由它里面的内容撑起来的，但是在里面内容都浮动的情况下，它的高度会崩溃，需要自己设定一个高度，或者用“overflow:hidden"等消除影响。
2. 内填充区域：这是里面内容与边框之间的间隙。有五个标签：padding-left(表示距离左边框的距离)、padding-right(距离有边框的距离)、padding-bottom(距离下边框的距离)、padding-top(距离上边框的距离)。还有"padding"是 复合标签，顺序是上、右、下、左。顺序不能改变，当上和下、左和右的距离一样时，可以简写：上下、左右。
3. 边框：顾名思义，就是盒子的边框，标签是"border",它也是一个复合标签，通常用它表示边框的粗细、样式和颜色。
4. 外填充区域：是边框之外的区域。用标签"magron"表示。和“padding"一样是复合标签。
5. 背景：它分为背景图（background-image)和背景颜色(background-color)

• 块级元素并排显示

---

1. 浮动：一般用"overflow-hidden"标签表示，可以让男盒子并排显示，如果盒子宽度不够，还是会分行；如果男盒子全部浮动，会让父元素的高度塌陷。
2. 定位：这是完全出国，是完全脱离标准文档流。

美化

• 字体设置

---

font-size:设置字体大小。一般在谷歌浏览器默认字体是12px或14px

---

font-style:设置字体是否倾斜；“talic”表示倾斜 “nomal”表示不倾斜

---

font-weight:设置字体是否加粗；“bold”表示加粗 “normal”表示不加粗

---

font-family:设置字体类型；比如：“宋体”，“黑体”等

---

这些标签具有继承性：给父元素设置之后，子元素也会继承到。   

• 文本设置

---

text-decoration:用来设置文本的装饰线；有：下划线(underline)、删除线(line-through)
txt-indent:首行缩进；2em表示首行空2格。
text-align:让盒子中的文本居中。
line-height:设置行高 
    1）如果是子标签是男标签，行高可以撑起子标签的高度
    2）如果是子标签是女标签，行高不能撑起子标签的高度

浮动元素的特点

---

1） 贴靠性：  如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果父元素的宽度不够，它会自动换行。
2） 包裹性：  如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3） 一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4） 如果一个女盒子浮动了，就可以设置宽度和高度，说白了，女盒子就变成男盒子。

---

• 元素浮动会造成影响：
  • 对父元素造成的影响
  1. 如果子元素都浮动，会造成父元素的高度塌陷。
  • 对后面的兄弟元素影响
  1. 会造成重叠，margin取大原则。
• 我们需要清除浮动所造成的的影响，也叫清除浮动：
  1. overflow:hidden
  2. 加高法（就是给父元素设置一个高度）
• 内容区域：width 和 height

---

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

    注意点：
    1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
    2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
    3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。

---

• 边框： border

---

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