CSS基础（三）盒子模型

全文手打，转载请注明出处

全文手打，转载请注明出处

全文手打，转载请注明出处

一）盒子模型

margin（外边距）border（边框线）padding（内边距）content（内容）

margin和padding以border为参照。

div {
  width:800px;
  height:400px;
  border:1px solid red;
  margin:200px;
  padding:
}

 系统默认margin为8px

//外边距margin：元素border以外的距离
margin-left:左边距
margin-right:右边距
margin-top:上边距
margin-bottom:下边距
1个参数（apx）：上下左右外边距均为apx
2个参数（apx,bpx）：上下为apx，左右为bpx
3个参数（apx,bpx,cpx）：上为apx，左右为bpx，下为cpx
4个参数（apx,bpx,cpx,dpx）：上为apx，右为bpx，下为cpx，左为dpx

//内边距padding：元素的文本内容到border的距离
用法和margin相同

//border
border: 1px solid red;       //border:宽度 样式 颜色
样式：none：默认值，无边框
        solid：实线边框
        double：双实线边框
        dotted：点状线边框
        dashed：虚线边框

 

二）display属性

 属性值：

 none：不显示元素

 block：块显示，在元素前后设置换行符。目的：将行标签（不识别宽高）转换为块标签

 inline：行内显示，将块级转换为行级

 inline-block：行内块级标签，将块级或行级标签转换为行内块级标签

div {
  width:200px;
  height:100px;
  background-color:#123456;
  display:inline-block;          //将2个div放到1行上，不涉及浮动，不会脱离文档流，有间距，margin-left灵活设置一下
  display:inline;              //设置inline时，不识别宽高，根据div内容自动延展
}
div:first-child {
  background-color:#567890;  
}
span {
  width:300px;            //span行级标签不识别宽高
  height:200px;
  background:yellow;
  display:block;            //行级标签转换为块级标签
}

<div>adada</div>
<span>span</span>

 

三）表格table样式

table一般不用来布局，用来格式化数据

table,td {
  border: 1px solid blue;      //边框线
}
table {
  width: 500px;
  height: 50px;
  border-collapse: collapse;  //单线边框
  text-align: center;      //table内文字居中
  margin: 0 auto;         //整体表格居中
}
td {
  vertical-align: top;        //table内文字居上
}

<table //border="2">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
  <tr>
    <td>内容111</td>
    <td>内容222</td>
    <td>内容333</td>
    <td>内容444</td>
  </tr>
</table>

//table属性：
width: 宽度
height: 高度
border: 边框线
border-collapse: collapse 单线边框

//td,tr属性：
width: 宽度
height: 高度
border: 边框线
text-align: left(默认)/center/right 文本左右对齐
vertical-align: top/middle(默认)/bottom 文本垂直对齐方式

 

四）列表样式

例如：项目中的菜单，商品列表

列表类型：无序列表（ul）、有序列表（ol）、自定义列表（dl）

ul和ol列表是用li表示的，而dl是由一个dt(标题)和多个dd(描述)组成

样式：(用来修改标识类型)

list-style-image:用图像表示标识

    list-style-image:url("icon.png") 

list-style-position:标识的位置

    outside(默认)/inside

list-style-type:标识类型  

    无序（❁disc空心圆  ❁circle实心圆  ❁square实心矩形框）

    有序（❁decimal默认  ❁decimal-leading-zero编号前面加0  ❁lower-roman小写罗马字符 ❁upper-roman大写罗马字符  ❁lower-alpha  ❁upper-alpha）

样式简写：list-style:   image   position   type （可以按照任意顺序，可以任意省略，所以省略写吧）

<dl>
  <dt>标题</dt>
  <dd>描述1</dd>
  <dd>描述2</dd>
  <dd>描述3</dd>
</dl>

 

五）轮播图布局

轮播图：产品的展示，公司首页相关宣传

组成：轮播组图（2张以上）+控制器+计数器

*{
  margin: 0;      //初始化设计
  padding: 0;
}
li{
  list-style: none;           //把list前面的点取消掉
}
a{
  text-decoration: none;      //把a标签下划线取消掉
}
.carousel{
  width: 1000px;
  height: 400px;
  margin: 0 auto;             //居中
  background-color: #444;
  position: relative;         //相对定位
  overflow: hidden;           //图片超出部分隐藏
}
.carousel-img{
  width: 99999px;
}
.carousel-img li{
  float: left;
}
.carousel-img img{
  width: 1000px;
  height: 400px;
}

//控制器
.prev,.next{
  width: 32px;
  height: 32px;
  position: absolute;         //绝对定位，脱离文档流,相对于position: relative定义的元素进行定位
  top: 50%;
  margin-top: -16px;
}
.prev{
  background-img: url(img/prev.png);   //引入图片
  left:20px;
}
.next{
  background-img: url(img/next.png);
  right:20px;
}

//计数器
.count{
  width: 1000px;
  height: 10px;
  position: relative;         //必须有它，才能用position: absolute
  bottom: 25px;
}
.count ul{
  width: 120px;
  height: 10px;
  margin: 0 auto;
  background-color: #f00;
}
.count ul li{
  width: 10px;
  height: 10px;
  background-color: #666;
  float: left;
  cursor: pointer;            //将鼠标形状设为手型
  border-radius: 50%;         //圆角，矩形框变为圆形
  opacity: .5;                //不透明度0-1之间的小数
}
.count ul .active{
  background-color: #ffc392;  
}


<div class="carousel">
  //轮播主图
  <ul class="carousel-img">
    <li><a href="#"><img src="img/01.jpg" alt="banner"></a></li>
    <li><a href="#"><img src="img/02.jpg" alt="banner"></a></li>
    <li><a href="#"><img src="img/03.jpg" alt="banner"></a></li>
  </ul>

  //控制器
  <div class="prev"></div>
  <div class="next"></div>

  //计数器
  <div class="count">
    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

 

六）布局练习

.aside{
  background: url(../img/haha.png) repeat-x;    //背景图横向平铺
  width: 150px;
  height: 400px;
  float: left;
}