牛腩总结

最新推荐文章于 2018-07-18 20:29:37 发布

刘佳欢--hannah

最新推荐文章于 2018-07-18 20:29:37 发布

阅读量352

点赞数

分类专栏： bs

本文链接：https://blog.csdn.net/cJune/article/details/80303583

版权

bs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言
叙述
- 什么是盒子模型
  - - 概念
    - 特点
- 盒子模型的应用

前言

牛腩发布系统中介绍的第一个模型，很简单易懂，做一个总结。

叙述

什么是盒子模型

概念

对CSS理解最重要的一点是：一切都是盒子。更具体地说，文档中的每个元素都会生成一个框。此框可能是一个块级框，或者它可能是一个嵌入级框。框类型决定了元素如何影响页面布局。

特点

1.外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;

盒子模型的应用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="CSS/StyleSheet1.css" rel="stylesheet" />
    <title>css测试</title>
    <meta charset="utf-8" />
</head>
<body>

    <div class="menu"> 栏目一</div> 
    <div class="menu ttt"> 栏目二</div>
    <div class="menu ttt"> 栏目三</div>
    <div class="title"> 123456</div>
</body>
</html>
css 设计界面
   body {
}
.menu {                 /*栏目样式*/
    color:#ff0000;  /*文字颜色*/
}
.title{  /*新闻标题样式*/
    color:#0000ff; 
}
#special{ 
    font-weight: bold;/*粗体*/
    color:#0f0;
}
.title span {
 color :#000;
 font-size:12px;/*字体大小*/
 clear : left ;/*清除浮动*/

}
.menu, .title {
    /*background-color: #ee00ff ;*/
}
.niu {
text-decoration:underline ;
color:#eeeedd;

}
.menu {/*栏目样式*/
    color:#f00; /*文字颜色*/
    background-color:#ffe7f7;
    border-width : lpx;
    border:1px solid #00f;
    padding : 5px;
    margin :5px;
    width:150px;
    height :60px;
    line-height :60px;/*让文本垂直居中*/
    float:left;/*盒子向左*/
}
.ttt {
position :relative ;/*绝对定位*/
top :20px;
left :30px;
}