前端学习笔记(二)

列表标签和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