从零开始前端学习[3]:css+div盒子模型_前端获取盒子子代div css-CSDN博客

从零开始前端学习[3]:css+div盒子模型

css的样式
div盒子模型

提示：
作者：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

css样式

Css样式指的的对于html标签样式的设计，html等于是框架，Css样式是对于框架的一种装修

css的构成

Css规则是由两个主要的部分结构，选择器+一条或者多条样式属性声明

这里写图片描述
从上面可以看出，css样式其实就是选择器+属性+值，所构成的
选择器可以是我们的标签名，可以是id，可以是我们的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的css样式</title>
    <style>
        p{width: 300px;height:300px;background-color:deeppink;color: #777;}
    </style>
</head>
<body>
    <p>
        最简单的css样式
    </p>
</body>
</html>

显示的效果如下所示:
这里写图片描述

注意事项：

不同属性之间是需要用分号进行间隔的
选择器是主要是选中时哪一个标签，哪一个盒子等等

常见的css的属性

一些最简单的css样式属性:
1. color 字体颜色的设置
2. height :高度设置
3. width:宽度
4. background:背景颜色的设置
5. font-size:字体大小的设置

注意：在Css样式中，颜色的写法有两种，一种是16进制的写法#fff,#bbb，另外一种是英文单词的写法:red,blue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的css样式</title>
    <style>
        h1{width:200px;height:80px;font-size: 22px;color: #00aa00;
            background: orange; }
    </style>
</head>
<body>
    <h1>
        这是一个h1标签
    </h1>
</body>
</html>

显示效果如下：
这里写图片描述

通过css样式，就可以直接改变了h1原来的默认的样式显示，当然，以上都是最最简单常用的css的样式的一部分，后面继续补充

css的分类

Css样式在加载的时候，同样是需要去链接属性的，所以，对css样式的加载又可以分为一下三种

- 内部样式
- 行内样式
- 外部样式

内部样式：
内部样式：
上述案例中使用的是内部样式，即在style标签中去定义的样式
行内样式
行内样式: style=”width:300px;background:red;”
上述h1的案例进行改写后的行内样式:行内样式就是写在选择器(对应标签内部的样式，效果是一样的)

  <h1 style="width:200px;height:80px;font-size: 22px;color: #00aa00;background: orange;">
        这是一个h1标签
    </h1>

-外部样式
外部样式：

外部链接样式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部链接样式</title>
    <link rel="stylesheet" href="外部样式链接.css" rel="">

</head>
<body>
    <h1>
        这是一个h1标签
    </h1>
</body>
</html>

外部链接样式.css

h1{
    width: 300px;
    height: 300px;
    background:red;
    color: #00ffaa;
    font-size:20px;
}

通过link就直接去链接了外部定义的相关样式，同样可以展示我们需要展示的风格

这里写图片描述

关于外部样式，内部样式，行内样式的几点注意事项：
1：优先级：外部样式 < 内部样式 < 行内样式,所以优先级别最高的其实是行内样式，如果定义了行内样式的话，那么外部样式和内部样式就不生效
2：rel属性规定当前文档与被链接文档之间的关系

div盒子模型

首先想象一下生活中的盒子模型，一个盒子主要包括的是：外壳和内部空间，那么外壳主要又包括了外壳的厚度，外壳的上侧面，和底侧面，那么同样在前端设置中的盒子也是一样。

div盒子元素框 = 元素的内容 + 内边距 +边框 +外边距；

div盒子

元素的内容:主要指的是元素最内部分所承载的实际的内容 (element)
边框:围绕元素内容和内边距的一条或者多条线 (border)
内边距:元素内容和边框之间的空白区域 (padding)
外边距:边框以外是外边距默认透明的，因此不会遮挡其后的任何元素(margin)

内边距padding(元素内容与边框之间的空白区域)

主要有以下几个属性:
- padding-top: 顶部内边距 padding-top:30px;
- padding-left:左侧内边距 padding-left:30px;
- padding-right:右侧内边距 padding-right:30px;
- padding-bottom:底部内边距 padding-bottom:30px;

以上的内边距属性是都单一侧面来展示的，但是同时内边距同样有自己的复合展示属性padding
padding:复合属性
padding：30px 30px 30px 30px;
代表的是上，右，下，左(按照顺时针的方向来生效)
padding：30px 30px 30px ;
代表的是上，左右，下
padding：30px 30px ；
代表的是上下，左右生效
padding：30px ;
代表的是四个方向都生效

边框以外是外边距默认透明的，因此不会遮挡其后的任何元素(margin)
margin主要有以下四个属性，类似于padding:

margin-top: 顶部外边距 margin-top:40px;
margin-bottom: 底部外边距 margin-bottom:40px;
margin-left: 左侧外边距 margin-left:40px;
margin-right: 右侧外边距 margin-right:40px;

margin也是和padding一样的支持复合属性的使用:
margin:40px 40px 40px 40px;
代表的是上，右，下，左(按照顺时针的方向来生效)
margin:40px 30px 40px;
代表的是上，左右，下的外边距设置
margin:40px 30px;
代表的是上下，左右外边距设置
margin:40px;
代表的是上下左右的外边距设置

补充:使用margin:auto;可以让块级元素在父元素中居中显示

围绕元素内容和内边距的一条或者多条线 (border)
border属性主要代表的是边框属性，也就是外边距和内边距的分界线部分；
所以与内外边距一样，其是支持上下左右属性以及复合属性的
主要分为以下四种:

border-top: 上边框 border-top: 1px solid red;
border-right: 右侧边框 border-right:1px dotted red;
border-bottom: 底部边框 border-bottom:1px dashed green;
border-left: 左侧边框 border-left:1px solid blue;

border的复合属性主要有：
border: 复合属性 border:1px solid red

关于border的其他的属性:
border-style，一般性常用的大概就以下

值	含义
none	没有边框样式
solid	实线边框
dotted	点状边框
double	双实线边框
dashed	虚线边框

border-width
border-width同样也是复合类型:

属性	含义
border-width	复合边框样式类型
border-top-width	顶部边框宽度
border-right-width	右侧边框宽度
border-bottom-width	底部边框宽度
border-left-width	左侧边框宽度

border-color

属性	含义
border-color	复合边框颜色类型
border-top-color	顶部边框颜色
border-right-color	右侧边框颜色
border-bottom-color	底部边框颜色
border-left-color	左侧边框颜色

当然关于以上的border-style border-width border-color一般情况下用的都比较少，因为border复合属性其实已经可以完成其功能了;

  border:border-width border-style border-color;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .main{
            width: 400px;
            height:400px;
            background: deeppink;
            margin: 10px auto;
        }
        .main .content{
            width: 250px;
            height: 250px;
            background: red;
            margin-top: 40px ;
            margin-left: 20px;
            padding:20px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="main">
        这是外部盒子
        <div class="content">
            这是内部盒子
        </div>
    </div>
</body>
</html>