盒子模型

盒子模型

margin与padding的用途

​ 可以用margin与padding来调节内外盒子的相对位置,而不是用position这种方法!!

​ 上面的方法更好理解!

body的margin与padding的默认设置

  
  *{margin:0;padding:0}
  ​

  
          <style type="text/css">
              *{margin:0;padding:0;}
  ​
              .phil{width:300px;height:100px;background:#FC0;
                  /*外边距*/
                  margin:200px auto;
  ​
                  /*增加元素框的总高度，增加50px*/
                  padding-top:50px;
      
                  /*内边距*/
                  padding:20px;   
              }
          </style>
  ​

---

css中的定位才是核心中的核心,必须好好学习

margin与margin之间的关系是不相互在碰撞的!!

<1> 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;

<2> 行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";

<3> 使用display属性改变成框的类型

即：display:block; 让行内元素设置为块级元素，display:none; 没有框

块级元素与行内元素的转换方法

<3> 使用display属性改变成框的类型

只是标签就有的通用属性

即：display:block; 让行内元素设置为块级元素，display:none; 没有框

  
  p span{color:red;
          /*把行内元素升级为块级元素*/
          display:block;
        }     

将p中的span标签的内容升级为块元素,独占一行!!

css定位机制,非常重要----普通流,浮动.定位.

  
  position:absolute;
      <!--相对于父框进行移动-->
   .adv_absolute {
    position: absolute;
    left: 30px;
    top: 20px;
  }
  ​
  ​

这是相对于父框进行移动,离左边30px,离顶部20px

  
  position:relative;
      <!--相对自己原来的原置进行移动-->
      .adv_relative {
    position: relative;
    left: 30px;
    top: 20px;
  }
  ​

code的意思为将离自己原位置向右30px,向下20px

相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。

通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动

绝对定位：元素的位置相对于最近的已定位祖先元素，如果元素没有已定位

的祖先元素，它的位置相对于最初的包含块。

  
  <style>
  *{margin:0;padding:0;}
  .arry{width:200px;height:200px;background:#6C0;float:left}
  .krry{width:200px;height:69px;background:blue;float:left}
  </style>
  大家一起向左看齐,这样所有的点才能依次排开 

流体布局,从上到下依次布局

解决一下markdown的图片问题,管它的,就发挥其跟本作用,就是写代码,在上面写代码

float属性--脱离文档流,不占空间

在盒子内部的浮动平铺,会影响父盒子的布局,一定要加上{clear:both;}来进行清除对于父框的影响.

  
  .box{border:1px solid red;}
  .box.b_left{width:100px;height:100px;background:#6C0;float:left;}
  .box.b_right{width:100px;height:100px;background:#F90;float:left;}
  ​
  /*清除浮动*/
  .clear{clear:both;}

  
      
      <div class="box">
          <div class="b_left"></div>
          <div class="b_right"></div>
          <!--清除浮动-->
          <!--哪里浮动清哪里,妈妈再也...-->
          <div class="clear"></div>
      </div>

清除浮动对周围元素的影响

在父框下建立一个框名为clear,然后

  
  <div class="clear"></div>

然后在style里面输入清除浮动指令

  
  .clear{clear:both;}

这样仅仅是解决外面的框框的浮动问题

浮动以后,就会脱离原来的父box,父box没有东西撑起来,就萎缩了!

所以这里要

  
  <style type="text/css">
  .box{border:1px solid red;height:100px}
  </style>

用定义高度的方式height:100px;将div撑开,但是这种方式不好,因为高度这个东西是不确定的!!也会导致后台开发出现问题!!会被后台的人骂的!!

• 文档流

relative依自己原先的位置进行定位,就算没有设置也会有默认位置

Absolute:脱离文档流,不占空间(意思是悬浮在父框之上!!)且相对其包块来定位

保持文档流

float:脱离文档流,不占空间

子框用absolute

父框用relative

display

​ none

​ inline

​ block

div是块级元素,记住了!!有点混xiao

写完代码后,要注释清楚,让别人非常方便阅读,

不写注释,就是没有职业道德

透明度的几种写法!!

opacity:0.6;

​ ??这个是普通写法?#

filter:a;pha(opacity=60)

​ 这是老写法,前两个会把div里面的文字也透明了,所以不好用

background-color: rgba (0,0,0,0.5);

​ css3的透明写法,SO就用这个.

  
                      <div class="t_message" contenteditable="true"></div>
                      <!--这个输入框依然用div做一个输入框,用contenteditable这个参数来执行!!-->

CSS 伪类用于向某些选择器添加特殊的效果。

  
  CSS 伪类用于向某些选择器添加特殊的效果。
  ​

---