css入门
CSS一周小节
经过一周的css学习,对遇到的问题与值得收藏的部分进行小结。
盒子模型
- 什么是盒子模型
盒子模型这个名词来自英文里面的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遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。