1.元素的分类:HTML的标签元素大体被分为三种不同的类型:块状元素、内联元素(行内元素)和内联块状元素。
常用的块状元素有:<div>、<p>、<h1>……<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>。
常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>。
常用的内联块状元素有:<img>、<input>。
2.元素分类——块级元素。设置display:block就是将元素显示为块状元素。
例如:将内联元素a转换为块状元素,从而使a元素具有块状元素的特点。 a{ display:block:}
块级元素的特点:每一个块级元素都从新的一行开始,并且其后的元素也另起一行。即显示时一个块级元素独占一行。
元素的高度、宽度、行高以及顶和底边距都可以设置。
元素宽度在不设置的情况下,是它本身父容器的100%。
3.元素分类——内联元素。块状元素可以通过display:inline将元素设置为内联元素。
内联元素的特点:显示时和其他元素都在一行上。一行中的多个内联元素之间会有一定的间距。
元素的高度、宽度以及顶和底边距不可设置。
元素的宽度就是它所包含的文字或图片的宽度,不可改变。
4.元素分类——内联块状元素。内联快长元素同时具备内联元素和块状元素的特点,使用display:inline-block可以将元素设置为内联块状元素。
内联块状元素的特点:和其他元素在一行上;
元素的高度、宽度、行高以及顶和底边距都可以设置。
5.盒模型——边框。盒子模型的边框就是围绕着内容以及补白的线,可以为这条线设置它的粗细、样式和颜色(边框三个属性)。
如div{ border:2px solid red;}
上面的代码可以分开写成如下代码:
div{
border-width:2px;
border-style:solid; border-style(边框样式)常见样式有:dashed(虚线)、dotted(点线)、solid(实线)。
border-color:red;
}
如果只需要单独设置边框的一个方向,则可以使用如下代码:
div{ border-bottom:1px solid red;}
6.盒模型——宽度和高度。
一个元素实际宽度(盒子的宽度)=左边界(margin)+左边框+左填充(padding)+内容宽度+右填充+右边框+右边界。
7.盒子模型——填充。元素内容与边框之间的距离成为“填充”。填充分为上、右、下、左(顺时针)。边界margin与之类似
如:div{ padding:20px 10px 15px 3opx;}
如果上下填充一样,左右填充一样则写法为:div{ padding:10px 20px;}