day05盒子模型

一、外边距margin的使用

margin 是指两个盒子的边框（border）之间的距离，属性值是数值+单位（px)

前端的方向都是顺时针方向 即上 、右、下、左

margin值不会撑大当前盒子的大小（即外边距所包含的区域为父级大盒子的属性，例如是父级的颜色）

1.margin属性值设置：

​ - 一个属性值：上下左右

​ - 两个属性值：上下 左右

​ - 三个属性值： 上 左右 下

​ - 四个属性值：上右下左

2.margin能不能为负值?

​ - margin是可以为负值的

​ -padding不可以为负值

​ - 重点:设置margin的时候必须要有包含框的接触!!!

3. 总结: 关于内外边距的一些固定用法

​ - 设置浏览器的默认样式 *{margin:0;padding:0}

​ - 设置版心居中 版心选择器{margin:0 auto}

4. margin常见的bug

​ 1有两个元素(父子级关系) 给子级元素设置margin-top的时候 会错误的解析到父级元素

​ -把margin改成padding

​ -给父级添加边框属性?

​ -前端解决布局用的最多的方法: 文本溢出属性 在父级css添加 overflow:hidden

    <style>
        *{
            margin: 0;padding: 0;
        }
        div{
            width: 100%;
            height: 100px;
            background-color: pink;
            /* border: 1px solid red; */
            /* overflow: hidden; */
        }
        p{
            width: 200px;
            height: 50px;
            background-color: red;
            margin-top: 20px;
        }
    </style>

​ 2同级元素上下排列 margin-bottom/top 错误解析 解析之间的最大值

​ - 只给一个方向添加即可

5.标准盒模型的组成部分

​ content、padding、border、margin

​ - 盒子自身的大小 content + padding + border

​ - 盒子真实的大小 content + padding + border + margin

二、 padding属性的使用

​ - padding的作用是填充补白、内边距,通常是用来调父级与子级元素之间的位置关系

​ - padding的添加位置

​ - 通常是添加在父级元素上的 会撑大当前容器的大小 为了保证不影响页面布局 需要减去相应的padding值

​ - 也可以添加在子级元素上的 会撑大当前容器的大小

​ padding的属性值

​ - 调间距的 属性值是数值+单位(像素px)

​ - padding的方向: 前端的方向都是顺时针的 padding-top/right/bottom/left

​ - padding属性值设置

​ - 一个属性值：上下左右

​ - 两个属性值：上下 左右

​ - 三个属性值： 上 左右 下

​ - 四个属性值：上右下左

​ padding能不能设置负值? 不可以!

三、边框border属性的使用

​ 属性:

​ - border-width 边框的宽度(大小)

​ - border-style 边框的样式

​ - border-color 边框的颜色()

       border: 50px solid transparent; /* 透明颜色 */

​ 属性值

​ - 设置边框宽度 数值+单位

​ - solid(实线) dashed(虚线) dotted(点线) double(双实线)

​ - 英文单词

​ 需求:改变某一个方向的属性 属性-方向值

​ - 改变某一个方向的宽度 border-方向-width

​ - 改变某一个方向的样式 border-方向-style

​ - 改变某一个反向的颜色 border-方向-color

​ 简写:

​ 属性: border

​ 属性值: border-width border-style border-color

​ 改变某一个方向上的属性

​ - border-top-width/style/color

​ 改变某一个方向上的所有

​ - border-方向:border-width border-style border-color

1 清除某一个方向上的边框/清除边框

​ - 清除边框: border:0/none

​ - 清除某一个方向上的边框 border-方向值:0/none

四、快捷书写方式

div[class="boxKaTeX parse error: Expected '}', got 'EOF' at end of input: "]*4{}

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>

五、其他

1引入页面的小图标

 <link rel="icon" href="images/icon.ico">   <!-- 引入页面的小图标 -->

2 版心概念

​ - 网页的外围是100% 根据用户的屏幕进行变化

​ - 版心内容永远都是在浏览器的中间的