div + css 基础知识

2016-07-11 鲁鲁槟 收藏

一、来源

1.1、传统页面

通常采用 table 来布局和显示数据

(1)缺点

① 显示样式和数据是绑定在一起的

② 布局的时候灵活度不高

③ 一个页面可能会有大量的 <table> 元素,代码就会冗余

④ 增加带宽

⑤ 搜索引擎不喜欢这样的布局

(2)优点

① 理解起来比较简单

② 不同的浏览器看到的效果是一样的

③ 显示数据还是很好的

1.2、div + css

数据和样式分离,是目前比较流行的网页布局技术

(1)div:存放需要显示的数据(文字、图标)—— 数据内容

(2)css:cascading style sheets 层叠样式表单

用来指定怎样显示,从而做到数据、样式和显示相互分离的效果

(3)优势

① 符合 w3c 标准,微软等公司均为 w3支持者

② 搜索引擎更加友好

③ 样式的调整更加方便,内容和样式的分离使得页面和样式的调整变得更加方便

④ css 的极大优势表现在简洁的代码,对于一大大型网站来说,可以节省大量宽带

⑤ 表现和结构分离,在团队开发中更容易分工而减少相互关联性

1.3、网页设计的三个历史时期

(1)table 网页设计:内容和样式(外观和布局)混合

(2)table+css 网页设计:table 布局,css 指定外观

(3)div+css 网页设计:div 放内容,css指定样式(外观和布局)

注意:div+css 并不是要我们抛弃 table,因为 table 在显示数据时更加方便

二、css 基本内容

2.1、css 的基本语法:css 不区分大小写

选择器{
    属性1: 属性值;
    属性2: 属性值;
    ...
}

2.2、css 中常用的四种选择器

 —— 类选择器 .class、id选择器 #id、html选择器、通配符选择器 *

(1)四个选择器的优先权:id > class > html > 通配符

(2)父子选择器:#id1 span { }

① 父子选择器可以有多级,但在实际开发中不要超过三层

② 父子选择器有严格的层级关系

③ 父子选择器不限于选择器的类型

(3)一个元素可以同时有 id 选择器和 class 选择器

(4)一个元素中 id 选择器一般只有一个,类选择器可以有多个

(5)当发生冲突的时候,则以写在 css 文件后面的那个选择器为准

(6)在做开发的时候,选择 class 选择器还是 id 选择器?

答:选择 class 选择器,好处如下:

① 一个元素可能有多个类选择器,当我们有特殊要求的时候,有机会更改它;

② class 选择器的优先级不如 id 选择器,当对某个元素有特殊要求时,可用 id 选择器满足要求

2.3、元素类型:行内元素和块元素

(1)行内元素只会显示自己内容的宽度,不会占据整行:a、span、input、img

(2)块元素不管内容多少,都会占据整行,而且会换行显示:div、p

注:一些 css 属性对行内元素不生效,比如 margin、left、right、width、height,建议尽可能使用块元素定位,不过这与浏览器的版本和类型也有关系。

(3)行内元素和块元素可以相互转换

① 使用 display: inline 表示使用行内元素方式显示

② 使用 display: block 表示使用块元素方式显示

2.4、标准流和非标准流

(1)流:元素(标签)的排列方式

(2)标准流:元素在网页中就像流水,排在前面的元素内容先出现

(3)非标准流:当某个元素脱离了标准流,那么它就处于非标准流

三、css 的盒子模型

3.1、border

border-width、border-style、border-color

(1)border-style: hidden 隐藏边框、solid 实线边框

(2)border: 1px solid red ,顺序无区别,但是最好按这个顺序

3.2、margin 和 padding

(1)margin 设置外边距属性,padding 设置内边距属性,所有浏览器都有各级默认的 margin 和 padding

(2)margin:一个参数 —— 全部四边,两个参数 —— 上下,左右,三个参数 —— 上,左右,下,四个参数 —— 上右下左

(3)margin: auto 表示自动居中

(4)padding,若大于盒子则盒子会自适应变大

四、HTML <!DOCTYPE> 标签

1、<!DOCTYPE> 声明必须是 html 文档的第一行,位于 <html> 标签之前

2、<!DOCTYPE> 声明不是标签,它是指 web 浏览器关于页面使用哪个 html 版本进行编写的指令

3、在 html 4.0.1 中有三个,而在 html 5 只有一种:<! DOCTYPE html >

五、详细内容 —— 浮动、定位

5.1、经验

若可以选择背景图片显示,优先选择背景图片

body {
     backgorund: url('luluqi.jpg');
}

background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y(背景图像仅在纵向平铺)

5.2、链接

(1)a:link{ } 设置超链接样式

(2)a:hover{ } 鼠标移动到上方变化

(3)a: active{ } 链接被点击的时刻

(4)a:visited{ } 超链接后变的样式选择

(5)traget: _blank 在新窗口中打开链接、_parent 在父窗口中打开链接

_top 在当前窗口打开链接,并替换当前的整个窗口、_self 在当前窗口打开链接,默认

5.3、浮动 float

(1)左浮动:指一个块元素尽量向左边移动,这样就让出它右面的空间,让别的元素显示

(2)右浮动:指一个块元素尽量向右边移动,这样就让出它左面的空间,让别的元素显示

(3)浮动的特别说明:如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”

(4)如果使用浮动属性,则该元素不管是不是块元素,都会按照 display: blcok 来显示

(5)清除浮动:clear: right/left/both (慎用)

5.4、定位:position

static 静态定位(默认)、relative 相对定位、absolute 绝对定位、fixed 固定定位,其中 float 和 absolute 可脱离文档流

(1)相对定位:相对元素应当显示的位置重新定位,虽然脱离标准流,但它的空间不能被占用

(2)绝对定位:对该元素最近的那个脱离标准流的元素定位,如果没有父元素,则相对 body 左上角定位(或者有父元素,但父元素没有脱离标准流)

(3)固定定位:不管怎么样,都是以视窗的左上角定位

(4)静态定位:static 定位是靠 margin-left、margin-top 来移动位置的,left、top 对 static 静态定位无效

(5)z-index:用于设置对象 (div) 显示时候,层叠的属性,z-index 值越小,则越在下层显示

5.5、text

(1)text-algin 水平对齐:left、center、right、justify

text-align 和 <center> 的区别:

① <center> 不仅影响文本,还会把整个元素居中

② text-align 不会控制元素的对齐,而只是影响内部内容

(2)text-overflow:规定当文本溢出包含元素时发生的事情

① clip 修剪文本

② ellipsis 显示省略符号来代表被修剪的文本

③ string 使用给定的字符串来代表被修剪的文本

(3)direction:ltr 默认 —— 文本方向从左到右,rtl ——文本方向从右到左

(4)text-decoration:none、underline、overline、line-through 贯穿线、blink 文本闪烁

5.6、cellspacing cellpadding

阅读 1468