CSS入门小结

CSS一周小节

经过一周的css学习，对遇到的问题与值得收藏的部分进行小结。

盒子模型

1. 什么是盒子模型
   盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢？我认为凡是里面可以盛装其他内容的标签，我们都可以称之为盒子。例如：div,p,span等等标签都可以往里面再添加元素，我们都可以称之为盒子模型，相反例如img，input等等 里面是无法盛装其他元素，我们就能称之为盒子。

2.关于盒子，主要有以下几个要点：
width/height：内容的宽高
padding：内边距
border：边框
margin：外边框

3.注意问题
(1).一些默认的元素是带padding，margin的。
可以用这段来清除各个元素的默认margin，padding属性:

*{
  margin:0;
  padding:0;
}

浮动

浮动的初衷：为了实现新闻的字围效果。

浮动的元素半脱离标准文档流：
出国了
浮动刚开始就为了实现字围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫字围效果。

现在我们基本上利用浮动并不是为了实现字围效果，我们主要使用浮动来让块级元素并排显示

浮动的特点:贴靠性,包裹性。
浮动的影响:对父元素造成的影响,对后面的兄弟元素影响。

我们需要清除浮动所造成的的影响，也叫清除浮动：
1）清除对父元素所造成影响

   overflow:hidden
   加高法

元素浮动也会对它后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
最实用：clear:both

CSS Id 和 Class

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

CSS Display - 块和内联元素

1.改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素:

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

css三大属性

继承性

因为css具有继承性，所以在可以body里面设置字体等此网页中常用的属性，这样可以极大程度的简化的编写。

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换句话说，就是特定的CSS属性向下传递到子孙元素。

层叠性

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。
在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

优先级

继承样式的权重为0。也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。

2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。