Web前端初步——小扎3

盒模型 div table p ul body等

1、边框样式

边框线：border-style:dashed(虚线)|dotted(点线)|solid(实线)

边框颜色：border-color

边框宽度：border-width:px(像素)|thin|medium|thick

eg:

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}    or

div{
    border:2px  solid  red;
}

注：仅设置局部边框样式时，可利用border-top,border-left,border-right,border-bottom关键字实现’

       eg:border-bottom:1px dotted #ccc;

填充padding与之语法相同，边界margin唯一区别是在外定义

eg:

div{
    width:300px;
    height:300px;
border:1px solid red;
}
#box1{margin-bottom:30px;}

2、盒模型——宽度与高度

css内定义的宽（width）和高（height），指的是填充以里的内容范围。

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

eg:

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

CSS布局模型——流动模型(flow)，浮动模型(float)，层模型（layer）

1、flow——默认模式

2、float——内联元素的特点：“包含元素内从左到右水平分布显示”。

     浮动模型可以帮助实现如“让两个块状元素并排显示”这类场景。通过float:right|left实现

3、layer——在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。

     三种定位html元素在网页中位置的方式：

     a、绝对定位(position: absolute)

      div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>
效果图：

相对定位(position: relative)
固定定位(position: fixed)

注：若在一网页下，预使B以A为相对坐标，则A使用position:relative标明，B用position：absolute标明，同时，若将B底部与A底部重合，则令B bottom:0px