潭州学院html学习（day05）

一.盒子模型（本文部分内容摘自：https://www.cnblogs.com/smyhvae/p/7256371.html）

盒子模型原理

盒子模型（box model）。无论div,span,a都是盒子模型。

图片，表单都不是盒子，他们是文本，因为它们不能放图片

盒子中的区域

一个盒子主要的区域就5个：width,height,padding,margin,border

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

理解css盒子模型

可以把它当成日常中的一个盒子去理解。content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。而再外一层就是border边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子堆码直接的距离，可以通风，也美观同时方便取出。

我们理解了盒子模型，有助于我们了解一个元素的最终尺寸是怎么样决定的，同时也帮助我们理解元素在网页上是如何定位的，而盒子模型主要适用于块级元素。

Padding

内容区域

width height background

内边距

值：px %（基于夫级元素的宽度）

属性分别代表内边距上下左右四个方向的内边距

padding-top/bottom/left/right:

复合属性

一个值，四个方向

padding:10px;

两个值：上下左右

padding: 10px 20px;

三个值：上左右下

padding:10px 20px 30px;

四个值：上右下左

padding:10px 20px 30px 40px;

百分比：

padding:10px;

border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。

border-style:
                 none : 无边框（默认值）
                 solid：实线
                 dashed：虚线
                dotted：点状线
                double：双实线
                groove ：3D凹槽
                ridge：3D立槽
                inset：3D嵌入边框1
                outset：3D嵌入边框2

border拆分

border是一个大综合属性。比如说：

border:1px solid red;

就是把4个边框，都设置为1px宽度、线型实线、red颜色。

border属性是能够被拆开的，有两大种拆开的方式：

（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top、border-right、border-bottom、border-left。

1）按三要素拆：

border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;     //颜色。

等价于：

border:10px solid red;

(2)按方向来拆：

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

等价于：

border:10px solid red;

（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)

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

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            width: 200px;
            height:200px;
            background-color: green;
            border-width: 10px 20px;
            border-color: red pink gold green;
            border-style: solid dashed dotted;
            margin: 15px;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: red;
            border-width: 10px;
            border-color: green;
            border-style: solid;
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
      <div class="box2">     </div>
</div>
</body>
</html>

Margin(跟padding的用法一样)

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; margin: 0;}

        .box1{
            width: 100px;
            height: 100px;
            background: #ccc;
            /*外边距
            值：px    %(基于父级元素的宽度)

            */
            /*一下属性分别代表外边距   上   右   下   左   四个方向的外边距*/
            /*margin-top: 10px;  */
            /*margin-right: 20px;*/
            /*margin-bottom: 30px;*/
            /*margin-left: 40px;*/

            /*复合属性*/

            /*一个值：四个方向*/
            margin: 10px;

            /*两个值：上下 左右*/
            /*margin: 10px 20px;*/

            /*两个值：上     左右      下*/
            /*margin: 10px 20px 30px;*/

            /*两个值：上   右   下   左*/
            /*margin: 10px 20px 30px 40px;*/

            /*百分比*/
            /*margin: 10%;*/

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; margin: 0;}



        /*垂直外边距合并：当上下相邻的两个元素，在相邻的面同时拥有外边距时，其外边距值只会取其中较大的值*/
        /*.box1{ background: black; margin-bottom: 30px; }*/
        /*.box2{ background: green; margin-top: 50px; }*/

        /*内外边距合并
        1. 当父子关系的两个元素，子级拥有上外边距时，其外边距不会作用于父级，而是会传递给父级
        2. 当父元素和子元素都有上下外边距时，合并后的外边距会取其中较大者

        为什么会造成内外边距合并？
            子元素和父元素直接接触了
            解决办法：
                1.给父级元素加上内边距
                2.给父级元素加上边框
                3.在父级元素和子元素之间添加元素或者内容，元素的内容不能为空。
        */
        /*.box1{*/
            /*width: 200px;*/
            /*height: 200px;*/
            /*background: green;*/
            /*margin-top: 70px;*/
        /*}*/
        /*.box2{*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*background: yellowgreen;*/
            /*margin-top: 50px;*/
        /*}*/

        .box1{
            width: 200px;
            height: 200px;
            background: green;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是p标签</p>
        <div class="box2"></div>
    </div>

</body>
</html>

清除默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通配符选择器优先级最低*/
        *{ padding: 0; margin: 0; }  /*清除所有标签的默认内外边距*/
        ul,ol{ list-style: none; }
        a{ text-decoration: none; color: inherit; }
    </style>
</head>
<body>
<!--
    1.    避免重复定义他们，提高样式代码的重用。
    2.    设置自己的风格，字体，颜色等。
    3.    减少代码->减少维护成本
    4.    可以提供完全空白的画布，然后你就可以自己定义相应的样式了。
    5.    开发更加有逻辑性：你只是添加样式而不是移除和修改。
    6.    浏览器的兼容性问题可以降到最小。（每个浏览器默认样式不一样，比如行高，某个浏览器是1，另外一个浏览器可能是1.1，这样在开发网页写样式表的时候，处理起来比较麻烦，所以直接给重置统一，这样就能很方便的处理兼容性。）



-->
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <p>我是p标签</p>
    <ul>
        <li>我是li</li>
    </ul>
    <a href="">百度一下</a>
</body>
</html>

潭州学院html学习（day05）

border拆分

猜你喜欢