css样式学习笔记四

注：其中的内容只是自己学习时的一些笔记，好记性不如烂笔头，在此记录方便以后巩固！

1、css定位

元素的显示方式：

一、块级元素（上下布局）

1）默认宽度为100%（继承了父元素的宽度），独占一行

2）可以设置宽度、高度

3）块级元素可以包含（嵌套）行内、块内元素

常见的块元素：div、p、ul、li、ol、h1-h6 tr td form table

二、行内元素（左右布局）

1）默认无宽度，多个行内元素显示在一行

2）不能设置宽度和高度（尺寸不起作用）

3）行内元素不能包含块元素，只可嵌套行内元素

常见行内元素：span a i b strong font u

注意：设计时最好把行内元素放在块级元素中

三、行内块元素

显示在一行内，但是可设置宽、高的元素

常见行内块元素：img、input

块级元素和行内元素可以相互转换

display

block: 显示为块

inline: 显示为行内

none: 显示为无 （不显示）（js处理）

用的比较多的是超链接转块元素

四、浮动定位（布局，使多个元素在一行显示）

float:

none:不浮动【默认的方式】

left：左浮动

right：右浮动

inherit：从父元素继承 float 属性的值。

浮动影响的是本元素和紧挨着的后一个元素

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动的元素要指定一个明确的宽度；否则，它们会尽可能地窄