首页 > 代码库 > CSS_添加CSS文件方法,盒模型和定位

CSS_添加CSS文件方法,盒模型和定位

学习笔记整理,非原创。

添加css的方法

  1. 链接外部样式表

<link rel=stylesheet type=text/css href=http://www.mamicode.com/style.css>

Rel表示在页面中使用外部的样式表。type指文件的类型是样式表文件,href指文件的位置。

 

  1. 内部样式表

<style type=”text/css”>

<!—

//定义style

-->

</style>

 

  1. 导入外部 样式表

<style type=”text/css”>

<!—

@import style.css

//定义其他style

-->

</style>

使用时外部样式表的路径,方法和链接外部样式表的方法类似,但导入外部样式表输入方式更有优势。实质上它是相当于存在于内部样式表中。

 

  1. 内嵌样式

<table style=color:red;margin-right:220px>

 

link和import的区别

其实link和@import的最根本区别就是,link是一个html的一个标签,而@import是css的一个标签,
link除了调用css外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能
调用css。

当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。

利用link体例一个最首要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都撑持rel=”alternate stylesheet”属性(即可在浏览器上选择分歧的气概),当然你还可以利用JavaScript使得IE也撑持用户改换样式.

@import的小短处

若是你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有气概样式的页面,然后跟着CSS文件被下载完成才可以看到应有的气概.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

04-11更新: @import会使得CSS整体载入时候变长.而且在IE中会导致文件下载顺序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

 

 

盒模型

一个独立的盒子模型由Content(内容),padding(内边距),border(边框)和margin(外边距)4部分组成。

 

内容是盒子模型的中心,它呈现了盒子的主要信息内容。内容去是盒子模型必备的组成部分,其他的三部分都是可选的。内容区有三个属性,width,height和overflow。

 

内边距是内容区和边框之间的空间。可以被看作是内容区的背景区域。内边距有5个属性,padding-top,padding-bottom,padding-left,padding-right以及综合了以上四种方向的快捷内边距属性padding。

 

边框的属性有border-style,border-bottom,border-width,border-color以及综合了上面三种属性的border属性。

外边距位于盒子的最外围,它不是一条边线而是添加在边框外面的空间。外边距的属性有五种,margin-top,margin-bottom,margin-left,margin-right和综合上面四种属性的margin。

外边距属性margin可以设1到4个值,如果只设1个,则应用于所有的4个边界。如果设置2个或者3个值,则省略的值与对边相等。如果设置4个值,则按照上下左右的顺序分别对应其边距。

 

定位属性

 

  1. 定位方式position

static,absolute,fixed,relative

static:默认值

absolute:绝对定位。需要同时使用left/right/top/bottom。

 绝对定位是相对于最近的已定位的祖先元素,如果不存在已定位的祖先元素,那么相对于最初的包含块。

fixed:固定定位。表示当页面滚动时,元素不随着滚动。

 元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。

relative:相对定位。表示采用相对定位,对象不可层叠。相对定位是相对于元素在文档中的初始位置,即该元素在没有定位前的本来位置+偏移量。

 

  1. 层叠顺序

z-index:auto/数字

auto的时候,表示遵从其父对象的定位。

数字表示层。数字的大的覆盖小的。

 

  1. 浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

float 可以设置文字在某个元素的周围,能应用于所有的元素。

float:none|left|right

left表示文字浮动在元素的右边,right表示文字浮动在元素的左边。

 

  1. 清除

clear:none|left|right|both

none表示两边都可以有浮动对象,是默认值

left:表示不允许左边有浮动对象

right:表示不允许右边有浮动对象

both:表示不允许有浮动对象

清除浮动的方法:

  • 在下面添加空元素,并且定义clear属性。
  • 包围元素(父元素)定义clear属性。

 

  1. 溢出处理overflow

visible|auto|hidden|scroll

visible:默认值。表示层的大小和内容都会自动显示出来。

auto:表示只在内容超出层的范围时才显示滚动条。

hidden:表示会隐藏超出层范围的内容。

scrool:表示总是显示滚动条。