一,盒子模型
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解,所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
首先解释一下概念:红色部分是你的操作区域(比如说一个文本框)。蓝色部分应该是我们的网页。
边框:border所在的区域是边框线条,有点粗,像区域了,但是他是边框。
内容:是1050*26那里,那里是内容部分。
内边距:内容到边框的距离。
外边距:边框到蓝色框的距离。
*CSS选择器优先级:ID选择器 >类选择器>HTML标签选择器
*CSS核心内容:标准流,盒子模型,浮动,定位。
1.边框
简单格式:
border:1px solid #00F;(简写使这种格式,系统默认格式。)
1px:边框粗细为1像素
solid:线条样式
#00F:线条颜色
详细格式:
border-width: 1px;
border-color: #ff0000;
border-style: dotted;
二,内边距
简单
padding:5px,6px,7px,8px;(设置顺序是上,右,下,左 ,意思是上内边距为5,右内边距为6,以此类推)
详细
padding-top:5px;
padding-right:6px;
padding-bottom:7px;
padding-left:8px;
三,外边距
设置样式和内边距雷同。
四,相对定位和绝对定位
position:relative; /*相对定位*/
left:20px;
相对位移是在你其他盒子的基础上来进行定位的。
position:absolute;/*绝对定位*/
top:20px;/*移位*/
绝对位移是以整个伟业为基准来进行定位的。