文字样式、盒子模型、布局与浮动

文字样式

字体属性:

Color: 颜色名称/十六进制/RGB码 #FFF和#FFFFFF都表示白色
Font-family:字形名称/字形名称.... 可以有多个字形,但只取一个,从头开始选直到找到一个适合的。
Font-size: 数值+%/数值+单位pt、px、em、ex
Font-style:normal普通/italic斜体/oblique斜体
Font-weight: normal普通/bold粗体/bolder超粗体/lighter细体

  
  

A

哈哈

属性:

文字水平对齐: text-align: left/center/right/justify两端对齐;
首先缩进:Text-indent: 数值+%/数值+单位pt、px、em、ex
字符间距:letter-spacing: normal/ 数值+单位pt、px、em、ex
行高: line-height: 数值+单位
是否换行:word-wrap: break-word

  
  

This is a 标题

这个标题在这页的中间

文字效果属性

垂直对齐:Vertical-align:baseline一般位置/super上标/sub下标/top顶端对齐/middle垂直剧中/botton底端对齐
文字装饰:text-decoration: none/underline下划线/line-through删除线/overline上划线
转换字母大小:text-transform:none/lowercase/uppercase/capitalize首字母大写
增加阴影:text-shadow

盒子模型初步

概念:几乎所有标签其实都是一个盒子——而所谓盒子,无非就是一个“矩形的区域范围而已”。其实所谓网页,无非是一个盒子套一个盒子。

在css中,每个盒子模型都是由内容(content)、边框(border)内边距(padding)、外边距(margin)四个部分组成;
组成盒子模型的四部分也可以这样理解:

**内容(content)就是盒子里装的东西;

**边框(border)就是盒子本身了;

**内边距(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;

**外边距(margin)就是在有很多盒子摆放的时候不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。


文字样式、盒子模型、布局与浮动_第1张图片
906897-20160511230352593-1097179453.png
盒子的两种初始状态(基本表现):

类似div的盒子:一个盒子自动“占据一行”(不管其内部内容多少):这就是“块盒子”(块元素)。常用块盒子:
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特点:可以设置固定的宽高,margin,padding,

类似span盒子:一个盒子中的内容会跟同类的盒子并排在一行出现,除非该行已满,则会自然到下一行——类似文字的表现特性。:这就是行内盒子(行内元素)。行内盒子通常放“最终的数据内容”,比如文本,图片。其他行内盒子:
b, strong, font, i, u, a, img, input, textarea, select,
特点:宽高不能设定,而是由其内容“撑出”,margin和padding没有上下方面的表现。

布局初步:

将网页以逐步细化的方式分割成横向或纵向的几个独立区域。对于纵向区块,则可以使用div盒子自然而成。对于横向区块,则需要使用浮动才能实现。但浮动或导致父盒子失去“正确的高度”(自然高度)——因此又要考虑父盒子高度的修正:

1,设置固定高度,保证可以包住子盒子
2,对父盒子设置overflow:hidden样式,可以获得“自然高度”。
3,在父盒子内部添加一个清除浮动的空div:

浮动作用与特性:

float:left, float:right
作用:使一个块盒子可以跟其他块盒子“并列”放置。
特性:使其“浮”在别的标签之上,别的标签视它不存在而正常排列出来。

你可能感兴趣的:(文字样式、盒子模型、布局与浮动)