首页 > 代码库 > div +css基础

div +css基础

div+css是什么?

div元素是用来为html文档内大块(block-level)的内容提供结构和背景元素。

css是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现html或xml等文件样式的计算机语言。

div+css是网站标准(或称web标准)中常用术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位。

 

可以这样理解div+css:

div是用于存放内容(文字、图片、元素)的容器。

css是用于指定div中的内容如何显示,包括这些内容的位置和外观。

 

div+css的优势:

要深刻理解div+css的优势,我们不得不提到网页设计的三个历史时期table,table+css,div+css。

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

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

3、div+css网页设计:div放内容,css指定样式(外观和布局),这样内容和样式彻底分离。

 

css的四种选择器:选择器在css中创建,而在网页页面中使用。

-->当一个元素同时被id选择器、class选择器、html选择器同时限定时,优先级是:

id选择器>class选择器>html选择器>通配符选择器

 

1、类选择器,又叫class选择器

2、id选择器

3、html选择器

4、通配符选择器

 

一个元素被id和class同时修饰时,id的优先级>class选择器。

一个元素最多有一个id选择器,但是可以有多个类选择器。

 

在引用多个class选择器的时候,用空格隔开。

当class选择器发生冲突时,以在css文件中,最后出现的class选择器样式。

 

 

块元素和行内元素-概念

行内元素(inline element),又叫内联元素;

内联元素只能容纳文本或者其他内联元素,常见内联元素<span><a>

 

块元素(block element)

块元素一般都从新行开始,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一行,块元素也要把整行占满。

常见块元素<div><p>

 

块元素和行内元素的转换

如果我们希望一个元素按照按块元素方式显示,则:

display:block;

如果我们希望一个元素按照行内元素方式显示,则:

display:inline;

 

 

css核心内容:流

标准流/非标准流:

 

流:在网页设计中指元素(标签)的排列方式

 

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

排后面的元素(标签)后面出现。

 

非标准流:当某个元素(标签)脱离了标准流(比如相对定位)排列,

我们统称为非标准流排列。

 

css的盒子模型:

1、html元素都可以看成一个盒子。

2、盒子里的参照物不一样,则使用的css属性不一样。

 技术分享

div +css基础