CSS盒模型
在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>
一.块状元素
如果要将内联元素转为块状元素,只需要加入:a{display:block;}
特点:
1.每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
二.内联元素
如果要将块状元素转为内联元素,只需要加入:div{display:inline;}
特点:
1.和其他元素都在一行上;
2.元素的高度、宽度及顶部和底部边距不可设置;
3.元素的宽度就是它包含的文字或图片的宽度,不可改变。
三.内联块状元素
要想实现内联块状元素的特点,必需加入:diplay:inline-block;
特点:
1.和其他元素都在一行上;
2.元素的高度、宽度、行高以及顶和底边距都可设置。
CSS盒模型
简介:如果把一块的区域当成一个盒子,那么里面就包括:边界(border),边缘(margin),边框(border),填充(padding),内容几大部分。
1.边框一
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
eg:
div{border:2px solid red;}或者div{border-width:2px;border-style:solid;border-color:red;}
注:border-width(边框宽度)中的宽度可以设置为thin | medium | thick(但不是很常用),最常还是用象素(px)。
border-style(边框样式)常见的样式有:dashed(虚线)| dotted(点线)| solid(实线)。
border-color(边框颜色)可以设置为十六进制的颜色。如border-color:#888;
2.边框二
目的:只为一个方向的边框设置样式,可以是上右下左四个方向。
语法:div{border-top:2px solid red;}或div{border-right:2px solid red;}或
div{border-bottom:2px solid red;}或div{border-left:2px solid red;}
3.盒模型的宽度和高度
在CSS中设置的宽度width和高度height是填充以内的内容范围。因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
eg:div{width:200px;padding:20px;border:1px solid red;margin:10px;}
那么这个元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。
如下图所示:
元素内容和边框之间是可以设置距离的,可以是上右下左四个方向。
语法:div{padding-top:2px;}或div{padding-right:2px;}或
div{padding-bottom:2px;}或div{padding-left:2px;}
5.盒模型边界
元素与元素之间的距离就是边界margin,可以是上右下左四个方向。
语法:div{margin-top:20px;}或div{margin-right:15px;}或
div{margin-bottom:12px;}或div{margin-left:10px;}