列表标签和DIV盒子模型

一.层叠样式表概念

样式 = 选择器 + 申明

所有申明都要用{}大括号包裹,

每条申明 都由    属性和值组成 属性使固定的 值是可变的;并且有的属性可以由多个值; 每条属性由;分号隔开.

写样式时要 换行写; 每条申明结束要换行; 遵循从上往下 从外向内的顺序写样式; 样式可视性好,直观;可维护性很重要.

二.三种列表标签

    1.无序列表标签

ul li标签组合; 必须成对出现,父子关系;

ul下面只能放li标签;

li标签下面可以放任意元素,除了自己.

行内样式type 外部样式list-style-type

none:没有文字点的点; disc:实心圆点; circle:空心圆; queare:方块符号.

    2.有序列表标签

ol li标签组合;必须成对出现,父子关系

行内样式type( 1[默认],A,a,I,i )

外部样式 list-style-type:decimal (1.  2. 3. 4. )

upper-alpha (A. B. C. D. )

lower-alpha (a. b. c. d.)

upper-roman (I. II. III. IIII. )

lower-roman (i. ii. iii. iiii. )

    3.自定义列表标签

dl dt dd配套使用

dl 父     dt 列表名    dd列表项 子

一个dt    一个dd

一个dt    多个dd

多个dt    一个dd

多个dt    多个dd

三.div盒子模型

div标签通常被称为盒子,(严格来讲所有的标签都是盒子,div比较典型);网页中div被大量使用.

是一个通用的留内容容器;

里面可以放任意元素,用来布局网页或者给元素分组;

    1.边框

是一个用于设置各种单独边界的属性.

border:1px solid red;( 这三个值对应:边框大小 边框风格 边框颜色 ).

border-top:1px solid red; ( 单独设置一条边框线 上边框线).

其中:

border-top-width: 5px; 上边框线的宽度5px;

border-top-style: solid; 上边框风格为实线;

border-top-color: red; 上边框线颜色为红色;

border-type:

none    无边框线 (默认)

solid    实线

dashed    虚线

dotted    点状线

double    双线

groove    3D 凹槽

ridge    3D 垄状

inset    3D insert边框

outset    3D outset边框

颜色:

颜色的标准英文关键词:red blue yellow orange pink;

十六进制颜色 #开头    前两个值代表红色 中间两个代表绿色 后两个值代表蓝色

两个值相同可简写成一个字母,如:#aa00ff 可以写成#a0f

    2.外边距 margin

移动盒子位置用maigin

maigin属性为给定元素设置所有四个(上右下左)方向的外边距属性.

可简写成maigin:100px;

四个外边距属性:margin-top    margin-right    margin-bottom    margin-left;(值允许负值)

百分比: 是根据父元素的宽高来自动设置;

如:maigin:50%;

复合式写法

div{

margin:100px; /*上下左右*/

margin:100px 100px;    /*上下    左右*/

margin:100px 200px 300px;    /*上    左右    下*/

margin:100px 200px 300px 400px;    /*上    右    下    左 (顺时针)*/

}

    3.内边距

padding属性设置一个元素的内边距,pandding区域是指一个元素内容与其边界之间的空间,该属性不能为负值.

单样式写法

div{

pandding-top:100px;

padding-right:100px;

padding-bottom:100px;

padding-left:100px;

}

复合写法

div{

padding:100px;    /*上下左右*/

padding:100px 200px;    /*上下    左右*/

padding:100px 200px 300px;    /*上    左右    下*/

padding:100px 200px 300px 400px;    /*上    右    下    左 (顺时针)*/

}

特性:

元素框的最内部分是实际内容,直接包围内容的是内边距.

在CSS中,width和height属性是指内容区域的宽度和高度.增加内边距、边框和外边距不会影响内容的区域的尺寸,但会增加元素框(父元素)的总尺寸.

盒子占位大小:

盒子的实际大小+margin    如果是块级(block)那么后面(右方)都是盒子的占位大小

盒子的宽度= 盒子的本身宽度 + 边框左右宽度*2 +左右padding大小*2

 

 

 

 

本文为原创文章，转载请注明出处！