css:盒子模型

1.盒子模型具有的属性：

内容(content)
填充(padding)
边框(border)
边界(margin)

图示如下:

image

2.流概念

1.流的概念

在现实生活中已经流水，在网页设计中就是指元素(标签）的排列方式，默认情况下，向网页的左上角流动

2.标准流的概念

元素在网页中就像流水，排在前面的元素(标签)内容在前面出现，排在后面的元素(标签）内容在后面出现

3.非标准流的概念

当某个元素(标签)脱离了标准(比如因为相对定位)排列，就称为非标准流．

3.实例代码一：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div-box{
            width:200px;
            height:200px;
            background-color:pink;
            /*指定边框的像素*/
            border:15px solid red;
            /*表示该div与其父元素的上边距的大小*/
            margin-top:40px;
            /*表示该div到浏览器左边界的距离*/
            margin-left:60px;
            /*表示该div中的元素距离边框的距离*/
            padding:5px;
        }
    </style>
</head>
<body>
<div id="div-box">hello world</div>
</body>
</html>

效果：

image

4.实例代码二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            width:300px;
            height:180px;
            border:1px solid blue;
        }
        #div-box{
            width:280px;
            height:160px;
            border:1px solid red;
            margin:  10px 0 0 10px;
        }
        #div-box img{
            width:140px;
            height:100px;
            border:1px solid black;
            margin:10px 0 0 10px;

        }
    </style>
</head>
<body>
<div id="div-box">
    <img src="a.jpg">
</div>
</body>
</html>

效果如下：

image

5.实例代码三：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;/*指定主页面距离父标签的距离*/
            padding:0;
        }
        #div-box{
            width:800px;/*指定灰色边框的宽度*/
            height:500px;/*指定灰色边框匠高度*/
            border:1px solid grey;/*定义边框为1px的实线灰色边框*/
            margin:20px 0 0 20px;/*定义灰色边框距离上个标签20px的距离，距离浏览器边界20px*/
        }
        .img_list{
            list-style:none;/*图像列表无样式*/
            background-color:pink;
        }
        .img_list img{
            width:125px;/*定义每个图像的宽度为125px*/
            height:85px;/*定义每个图像的高度训85px*/
            margin:10px 0 0 20px;/*定义每个图像距离红色边框上边10px,左边20px*/
        }
        .img_list li{
            float:left;/*使用左浮动*/
            border:1px solid red;/*定义每个图像的边框为１px的实线红色边框*/
            width:165px;/*定义每个边框的宽度为165px*/
            height:125px;/*定义每个边框的高度为125px*/
            margin:10px 0 0 10px;/*定义红色边框距离上个标签和左边的标签的距离各为10px*/
        }
        .img_list a{
            display:block;/*把字体转换为块元素*/
            margin-left:60px;/*超链接的字体距离红色边框左边距离为80px*/
            margin-top:-3px;/*超链接的字体距离红色边框下边距离为-3px*/
        }
        .img_list a:hover{
            color:red;/*鼠标悬浮上超链接时，字体变成红色*/
            text-decoration:underline;/*鼠标悬浮上超链接时，字体加下划线*/
        }
    </style>
</head>
<body>
<div id="div-box">
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
    </ul>
</div>
</body>
</html>

效果如下：

image

6.实例代码四：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1000px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:960px;
            height:250px;
            border:2px solid white;
            margin:30px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:200px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:250px;
            height:180px;
            margin:15px 0 0 55px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:80px;
            margin-top:4px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">优酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
    </ul>
    </div>
    <div class="div1">
        <span class="l_cont">优酷牛人</span>
        <ul class="img_list">
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下：

image

7.实例代码五：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1100px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:1060px;
            height:750px;
            border:2px solid white;
            margin:20px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:195px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:200px;
            height:250px;
            margin:15px 0 0 40px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:10px;
            margin-top:4px;
        }
        .con1{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
        .con2{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">优酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
    </ul>
</div>
</body>
</html>

效果如下：

image

盒子基本概念：

padding的设置
padding有四个方向，分别描述4个方向的padding。

描述的方法有两种
padding
1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2、写综合属性，用空格隔开

/*
上 右 下 左
*/

padding: 20px 30px 40px 50px ;

/*
上 左右 下
*/

padding: 20px 30px 40px;

/*
上下 左右
*/

padding: 20px 30px;

/*
上下左右
*/
padding: 20px;
2 border:边框的意思，描述盒子的边框

边框有三个要素： 粗细 线性样式 颜色

按照3要素来写border
border-width: 3px;
border-style: solid;
border-color: red;

/*

border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;

*/
按照方向划分
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
清除边框的默认样式，比如input输入框

border:none;
border:0;
使用border来制作小三角
/小三角 箭头指向下方/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
3 margin
margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/表示四个方向的外边距离为20px/
margin: 20px;
/表示盒子向下移动了30px/
margin-top: 30px;
/表示盒子向右移动了50px/
margin-left: 50px;
margin-bottom: 100px;

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335