美文网首页
内外边距

内外边距

作者: 洛洛kkkkkk | 来源:发表于2016-11-23 18:55 被阅读0次

外边距

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .divF{
    font-size: 40px;
    color: red;
   }
   /*同名或者同类型的选择器
     同名的选择器样式都会被添加,出现重复的样式的时候后面会覆盖前面的样式*/
   .divF{
    font-size: 100px;
   }
   .divFF{
    color:white;
    background-color: greenyellow;
   }
   /*p{
    background-color: red;
    color: blue;
   }
   *{
    font-size: 55px;
    color: greenyellow;
   }*/
   /*不同类型的选择器同时出现的时候,如果有样式的冲突,则按权值来计算优先级
     1、*            0
     2、标签选择器    1
     3、类选择器      10
     4、id选择器      100
     5、style行间样式 1000
     6、!important   10000
     6、后代选择器 看里面的组成*/
    div p{
     color: blue;
    }
    #first p{
     color: red;
    }
    
   
  </style>
 </head>
 <body>
  <!--<div class="divF divFF">我是一个div</div>-->
  <!--<p>AKL</p>-->
  <div id="first">
   <p class="pp">p1</p>
  </div>
  <div id="second">
   <p class="pp">p2</p>
  </div>
  <div>
   <div>
    <div>
     <div>
      <p>p3</p>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

内边距

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .redDiv{
    /*padding 内边距,不会改变元素本身的位置,会改变元素本身的大小,会改变元素内容的位置*/
    width: 300px;
    height: 300px;
    background-color: red;
    /*padding-left: 30px;*/
    padding-top:10px;
    /*padding可以有复合写法,写法同margin*/
   }
   .blueDiv{
    width: 100px;
    height: 100px;
    background-color: blue;
   }
  </style>
 </head>
 <body>
  <div class="redDiv">
   <!--<div class="blueDiv"></div>-->
  </div>
 </body>
</html>

相关文章

  • 盒子模型基本设置

    内边距:padding 外边距:margin 外边距重叠:外边距重叠.png 浮动:float 内联元素浮动: 内...

  • CSS 外边距- 外边距合并

    1:CSS margin 属性 margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。 margin...

  • 外边距

    外补丁即为外边距 标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为...

  • [SkylerAI]零碎知识点10-CSS3 box-sizin

    一 盒子模型 四个边界:margin(外边距),border(边框),padding(内边距),content(内...

  • 垂直外边距合并(外边距塌陷)

    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块...

  • 外边距合并

    块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(...

  • CSS外边距合并

    块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(...

  • 任务11

    1、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 外边距合并外边距...

  • HTML5+CSS——12垂直外边距重叠、内联盒模型、displ

    一.垂直外边距的重叠 在网页中垂直方向的相邻的!!外边距会发生外边距的重叠,所谓的外边距重叠指兄弟之间的相邻外边距...

  • 前端笔记——CSS常见问题及解决方案

    问题一:外边距合并问题 问题描述:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的...

网友评论

      本文标题:内外边距

      本文链接:https://www.haomeiwen.com/subject/iymvpttx.html