前一篇所讲的html标签可以认为是在浏览器窗口中从左到右、从上到下,按照标签的特性一次排列,就像堆积木一样,而标签的种类可以分为块级元素和行内块元素,它们的区别在于块级元素独占一行,行内块可以在一行内排列多个
<div style="background: pink;">块级元素1</div> <div style="background: skyblue;">块级元素2</div> <span style="background: red;">行内块元素1</span> <span style="background: red;">行内块元素2</span> <div style="background: yellow;">块级元素3</div>
虽然这些标签具有默认的样式,但是大部分都不能满足要求,通过css可以对页面上的所有元素重新定位、排列和渲染
在页面上出现的元素根据其占用的位置大致可以分为三类,块级元素、行内元素和行内块元素
块级元素的特点就是独占一行,可以指定宽高,代表元素有:div、h系列、p、br、hr等
行内元素的特点就是并排展示,指定宽高无效,具体的宽高由本身的内容决定,代表元素有:span、a、img等
行内块元素的特点是具有块级元素和行内元素的共同点,即可以指定宽高,并且可以在一排上放置多个元素,通过css可以将元素的类型改为行内块
页面上的所有元素展示时并不是只有内容组成,一个元素由外边距、内边距、边框和内容组成
这些部分组合起来就称为盒子模型,页面上就是由这些盒子组成的
首先说内容,内容就是希望使用这个盒子装什么东西
选中div内容区域后会发现,内容占了一整行,由于未指定高度,默认就是文字的高度,内边距、外边距和边框默认都是0
接着给它添加一个5px的内边距
可以看到除了内容的高度与宽度外,在它的外部又额外套了一层,这层内容就称为内边距
继续添加5px的边框
看着和上图没什么区别,其实它是在内边距的基础上又套了一层,这层就被称为边框
外边距是相对其他元素来说的,此处继续指定5px的外边距
根据上面的内容可以看出,盒子模型中几部分的组成内容基本相似,而这些部分都可以通过css进行控制
无论是什么元素,css控制此类的盒子模型基本都是一样的
对于内容,css可以控制它的字体属性、文本属性,比如字体大小、粗细、倾斜、文本颜色、行间距等
具体每个样式可以取哪些值可以通过官网或离线手册查询,除了值不同外写法都是相同的,本次列出的基本都是日常开发中经常使用的
其中文字缩进里使用到的em代表的也是一种单位,比如2em代表的就是2倍的字体大小,所以缩进了两个文字
内边距是用来撑开内容与边框之间的距离的,它可以指定的样式很少
对于边框,可以指定它的高度、样式、颜色等信息,边框角度指的是边框上四个角的弧度
外边框和内边框类似,它主要用来指定盒子距离上下左右四个方向上其他盒子的距离
为了便于书写,为以上几种样式都提供了简写形式,通过参数的排列指定特定位置的样式
其余的样式同上