CSS。盒子,内外(未整理)

CSS 间距

  内边距:元素距离元素内部的间离

<div>你好</div>

--------------------------

<style>

  div{

    width:200px;

    height:200px;

    background:red;

    padding-top:22px;     文字距离顶部产生距离

    padding-left:30px     文字距离左侧边框有距离

    }

</style>

  注意:padding会改变元素的实际大小,

  可以直接padding:30px 30px 39px 30px 。改变元素大小,对应是上,右,下,左。顺时针方向。

      padding:22px 33px。两个元素时候,第一个元素代表上下对边。第二个代表左右对边。

      padding:30px。一个元素的时候,代表四边都是30px。

 

 

  外间距:元素距离周围元素的间距

<div class= “ggg”></div>

<div class= “hhh”></div>

-----------------------让ggg和hhh的上下相隔20px

<style>

  div{

    width:200px;

    height:200px;  

  .ggg{              

    background:red

    margin-bottom:20px  代表底部距离周围元素有20px

    margin-left:20px    距离左边框20px,设置右边没有效果,因为右边没有元素}

  .hhh{

    background:green}

</style>

  注意,margin:20px 30px 33px 22px 不改变元素大小,对应是上,右,下,左。顺时针方向。当两个元素时候;一个元素时候和padding一样。

  相关技巧:

    设置水平居中  margin:0 auto 

    设置负值,让边框合并   margin-top:-10px

 

盒子模型、实际大小=内容大小+边框(border)+内边距(padding)+外边距(margin)

  <div class= “box”></div>

  <div class= “box2”></div>

-----------------------------------------------

<style>

  .box{

    width:200px;

    height:200px; 

    background:black;

    border:10px solid red

    padding:10px}

</style> 

 

  解决padding改变元素大小的问题

<style>

  .box2{

    width:200px;

    height:200px; 

    padding:10px

    border:10px solid red

    box-sizing:border-box    ###这条代码可以让边框和padding不影响元素本身大小}

</style> 

 

块元素,内联元素,内联块元素

 

块元素:div,p,ul,li,h1-h6,独占一行.....适用于所有的样式

  块元素默认宽度是父集的宽度

 

内联元素:a、span、em、b,不独占一行

  <body>

    hahsjdjnd<span>1111</span,2222

----------------------------------

  <style>

    span{

      height:22px

      width:22px

      backgrou:green   

      margin:20px

      padding:22px}

   </style>

  注意:内联支持部分元素,不支持宽高,不支持上下margin。(支持左右margin)宽高由字体决定。

 

内联块元素:不独占一行。能适用于所有的样式,如input

<body>

    hahsjdjnd<input type= "text">,2222

</body>

 

元素类型的切换

  <div class= “box”>1</div>

  <div class= “box2”>2</div>

  <div class= “box3”>3</div>

-----------------------------

  .box,.box2.box3{

    width:100px

    height:100px}      现在是块元素

##块元素转变为内联元素,如下加入display:inline、

  .box,.box2.box3{

    width:100px

    height:100px

    display:inline}      现在是内联。内联元素宽高不适用,与字体有关

###块元素转变为内联块元素,加入display:inline-block、

  .box,.box2.box3{

    width:100px

    height:100px

    display:inline-block}

-------------------------------------------------------------

内联元素转换成块元素和内联块元素

<body>

  <span>11111<span>

  <span>22222<span>

  <span>33333<span>

  <span>44444<span>

</body>

内联元素转换成块元素

<style>

  span{

    width:22px

    height:22px

    display:block}

<style>

内联元素转换成内联块元素

  span{

    width:22px

    height:22px

    display:inline-block}

 

  注意:displa四个属性。inline代表内联元素,block代表块元素,inline-block代表内联块(一般块元素和内联块都可以适用所有样式,装换成内联块原因是不想独占一行)

    display:none。元素消失。与hover用,鼠标悬停显示,

             在hover下写display:block。把none变成block,元素就显示出来

 

猜你喜欢

转载自www.cnblogs.com/simplecat/p/11359687.html
0条评论
添加一条新回复
  
今日推荐