css+div

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

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

div+css的好处：

1、 html文件就会减少大量的table,tr,td,html变简单

2、 内容和样式分离

3、 符合搜索引擎的喜好

从使用span元素我们可以看到，css的基本语法

<元素名 style="属性名:属性值;属性名2:属性值2;...">内容</元素名>

元素可以是html的任意元素；

属性名与属性值:不同的元素属性名不同；(可参考W3C组织给出的文档)

选择器是css中非常重要的概念，css中有三种不同的选择器

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

2、id选择器

3、html元素选择器

4、通配符选择器

类选择器基本语法

.类选择器名{

属性名:属性值;

...

}

id选择器

基本语法

#id选择器名{

属性名:属性值;

}

html选择器

基本语法：

html元素名称{

属性名:属性值;

}

通配符选择器

如果希望所有的元素都符合某一种样式，可以使用通配符选择器

*{

margin:0;padding:0

}

可以让所有html元素的外边距和内边距都默认为0，有时特别有用。

选择器深入

1、父子选择器：<span id="style2">这是一则<span>非常重要</span>的新闻</span>

2、一个元素可以同时有id选择器和类选择器

要考虑优先级：id大于类选择器:<span class="style1" id="special_new">新闻1</span>

3、一个元素最多有一个id选择器，但是可以有多个类选择器

特别注意：

1、在引用多个类class选择器的时候，用空格隔开；

2、多个类选择器在同一个html标签上使用时，如发生冲突会以在css文件中类选择器的先后顺序来指定，写在后面的会被系统认定为可使用的。而不是在html文件引入选择器的顺序为使用准则。 

4、当一个元素被id选择器、类选择器、html选择器同时限定时，优先级是：

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

5、在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起。

注意：将共同的部分以用原类选择器名或原id选择器名或html选择器名以,(逗)号隔开,将共同部分写在{}中，即可达到通用的目地。

 

行内元素(inline element)，又叫内联元素：

内联元素只能容纳文本或其他内联元素(不同浏览器的支持是不一样的)，常见内联元素<span><a>

特点：只占内容的宽度，默认不会换行。

 

块元素(block element)：

块元素一般都从新行开，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素<div><p>

特点：不管内容有多少，它要换行，同时占满整行。

块元素和行内元素--区别

1、行内元素只占内容的宽度，块元素内容不管内容多少要占全行。

2、行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素(与浏

览器类版本和类型有关)

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

 

块元素和行内元素--相互转换

请注意：行内元素和块元素可以相互转换

display:inline-->转为行内元素(比如div)

display:block-->转为块元素(比如a)

 

css核心内容--流

标准流/非标准流

流：在现实生活中就是流水，在网页设计中就是指元素(标签)的排列方式。

标准流：元素在网页中就象流水，排在前面的元素(标签)内容前面出现，排后面的元素(标签)内容后面出现。

非标准流：当某个元素(标签)脱离了标准流[比如因为相对定位]排列，我们统称为非标准排

列。

在实际网页布局中，我们可能需要使用非标准流的方式来布局(让某个元素脱离它原先应该在的位置)

css核心内容--盒子模型

要搞清盒子模型，就必需先明白下面几个概念：

在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。

css核心内容--浮动

浮动是CSS中很重要的概念，必需掌握。浮动涉及到左浮动、右浮动、清除浮动

左浮动(float:left;)

你可以这么理解浮动：如果一个元素右/左浮动则：

1、它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素，特别强调浮动对块元素和行内元素都生效!

2、元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。

css核心内容--定位

定位--基本概念

css定位(Positioning)属性允许你对元素进行定位.position属性值：

static(默认值):元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative(相对定位):元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。

absolute(绝对定位):元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed(固定定位，基本不使用):元素框的表现类似于将position设置为absolute，不过其包含块的视窗本身。

特别注意：相对定位中移动的方向是显示出来的方向是相反的left则是向右，right则是向左，top是向下,bottom是向上

转载于:https://www.cnblogs.com/buptee/p/4713666.html