第一阶段——day04

最新推荐文章于 2019-11-20 10:46:25 发布

唐山吴彦祖

最新推荐文章于 2019-11-20 10:46:25 发布

阅读量156

点赞数

分类专栏：前端开发文章标签：第一阶段——day04

本文链接：https://blog.csdn.net/weixin_45825818/article/details/103157509

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

标签结构

css : 属性文本相关 font 背景 background

day04

布局第一大核心 (盒模型 / 框模型)

在这里插入图片描述

content: 有效内容区域

padding: 内边距

border: 边框

margin: 外边距

简述盒模型 

盒模型包含有效内容区域 ,边框,内边距以及外边距部分

盒模型的宽度 = width + padding-left+padding-right+border-left+border-right + margin-left+margin-right;
盒模型的高度 = height +paddint-top +padding-bottom +border-right+border-left + margin-top+margin-bottom;

1:边框(border)

在这里插入图片描述

border: 四条 
border: 1px边宽   solid  边形 red 边色;  四条边框完全一致 1px 红色实线  

border-width:边宽  
border-width:1px ; 
border-width:1px 2px 0 4px; //顺时针 上右下左 

border-style: 边形  solid 实线  dashed虚线  dotted小圆圈  double双实线

border-color: rgb()/#fff122/red;

border-top:1px solid red;
border-left:2px solid blue;
border-right:2px solid blue;
border-bottom:2px solid blue;

盒模型宽度 = width +border*2 撑大盒模型会发生盒子掉落现象

应用

三角形

在这里插入图片描述

箭头

内边距(padding)

**内边距:指的是盒子内部的间隙 **

fun: 设置有效内容和边框的距离不能为负!!!

内边距设置会增加盒模型宽高所以要记得内减 !!! 在width上减相应的值

在这里插入图片描述


    <style>
    .box {
        /* 宽 506 高 506 */
        width: 50px;
        height: 50px;
        border:3px solid red;
        padding-top: 450px;
        padding-left: 450px;
        background-color: aqua;

    }
    .small {
        width: 100px;
        height: 100px;
        background-color: gold;
    }

    
    
    </style>
</head>
<body>
    <!-- 内边距撑大盒子  内减计算   内边距不放置内容  但是会填充背景色 -->
    <div class="box">
        <div class="small"></div>
        sahfbewbfrew
    </div>
</body>
</html>

外边距(margin)

margin:10px ;  上下左右四个都一样 盒子发生位置变化  
margin:10px 20px;  上下10px 左右20px
margin:10px 20px 30px; 10px 上  20px 左右 30px 下

margin;10px 20px 30px 40px ; 顺时针

外边距作用:1:可以移动盒子 2: 外边距设置盒子与盒子之间的距离的

外边距可以设置负值只是盒子之间的距离拉近会出现交叉现象

在这里插入图片描述
优先考虑内边距,其次考虑外边距

外边距塌陷

描述: 在垂直方向上的外边距会发生塌陷 (子元素如果在垂直方向上设置了外边距 ,子元素会带父元素一起向下移动)

父子关系的塌陷

在这里插入图片描述

兄弟关系的塌陷

在这里插入图片描述

外边距水平居中块级元素

margin: 0 auto;  0 上下外边距为0  auto 自动  浏览器计算---> 盒子水平居中 



margin-left:auto;
margin-right:auto;

前提: 这个盒子必须是块级元素并且有明确的宽度值

元素的分类

块级元素(display:block)

1:宽度width默认是100%,高度取决于内容高度

2:独成一行 (霸道)

3:设置宽高,可以上下左右外边距 ,上下左右内边距

行内元素(display:inline)

1:宽度width高度取决于内容高度

2:并排 ,中间会出现间隙(文本特性)

3:不可以设置宽高,不可以上下外边距 ,但是可以设置左右外边距和四周的内边距

a,em ,i,span…

行内块(display:inline-block)

1:并排又可以设置宽高

2:可以四周的内边距和外边距

3:中间会出现间隙( 文本特性)

在这里插入图片描述


    <style>
      * {
          padding: 0;
          margin: 0;
      }
      .nav {
          width: 100%;
          height: 80px;
          background-color: #444;

      }
      ul {
          /* 1366+100px >1366px  溢出 横向滚动条
          不设置宽度100% 不会溢出
          设置100% 会溢出
          
           */
          /* width: 100%; */
          list-style: none;
          padding-left: 100px;
      }
      a {
          color: #fff;

          text-decoration: none;
      }
      li {
          /* width: 200px; */
          height: 80px;
          line-height: 80px;
          /* 并排  块--->行内块 */
          display: inline-block;
          padding: 0 20px;

      }
      li:hover {
          background-color: yellow;
      }
      

    
    </style>

</head>
<body>
    <!-- 导航nav -->
    <div class="nav">
        <ul >
            <li><a href="#">发现音乐</a></li>
            <li><a href="#">我的音乐</a></li>
            <li><a href="#">朋友</a></li>
            <li><a href="#">商城</a></li>
            <li><a href="#">音乐人</a></li>
            <li><a href="#">下载客户端</a></li>
        </ul>

    </div>
</body>
</html>

音乐

唐山吴彦祖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一阶段——day04

标签结构css : 属性文本相关 font 背景 backgroundday04布局第一大核心 (盒模型 / 框模型)content: 有效内容区域padding: 内边距border: 边框margin: 外边距简述盒模型盒模型包含有效内容区域 ,边框,内边距以及外边距部分盒模型的宽度 = width + padding-left+padd...
复制链接

扫一扫