码迷,mamicode.com
首页 > Web开发 > 详细

CSS之盒子模型(深入理解)

时间:2018-03-18 16:12:59      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:无法   inf   问题   splay   wrap   相关   图片   生成   重叠   

CSS--盒子模型(Box Model)

简介:

    CSS盒子模型本质上是一个盒子,对网页中绝大部分的HTML元素进行包装定位(外边距,边框,内边距以及实际内容)。

    但是并不是所有的HTML元素都可以看作是盒子模型,例如图片(img)就不能看作是盒子模型,因为img中只能放图片,并不能添加其他的东西,所以它属于文字流。而盒子模型进行封装的元素大部分是文档流。

盒子模型中主要的区域:

  盒子模型中主要包含元素的宽,高,外边距,边框,内边距以及实际内容。  

  • Width:主要区域的内容(content)的宽。
  • Height:主要区域的内容(content)的宽。
  • Margen:外边距。即整个元素和其他元素的距离。
  • Border:元素的边框。
  • Padding:内边距。即元素的边与内容的距离。
  • Content:内容。也就是实际所看到的区域。

  下面的图片说明了盒子模型的区域:

    技术分享图片

下图为代码演示:

1 #test{
2                 width: 100px;
3                 height: 100px;
4                 background-color: yellowgreen;
5                 margin: 10px;
6                 padding: 10px;
7                 border: 5px solid blue;
8             }

 

技术分享图片技术分享图片

盒子模型属性详解:

  margen/padding: 外边距/内边距

   只写1个值 : 表示四周的外边距都是一个值。

    2个值: 第一个值表示上下,第二个值表示左右。

    3个值: 分别表示上,右,下的值,左边的值默认等于右边。

    4个值: 分别表示上,右,下,左的值。

     auto: 放弃某个方向的主导权,交由它的对方向主导。

            水平居中:margen:0 auto;

            竖直居中:margen:auto 0;

            全局居中:margen:auto;

    boder :边框 (宽度,样式,颜色) 实线:solid 虚线: dashed 样式可以省略,但是原则上三个属性都要写,三个属性的顺序可以随意颠倒,没有先后要求。  

注意:
1.盒子模型可以随意指定任意方向的相关属性值。
2.使用padding后会撑大div的可见区域,所以使用时应注意div的实际大小。

 当父盒子包裹子盒子,给子盒子添加margen-top时,子盒子和夫盒子的上边线重合,导致两个盒子同时下来。

        <div id="d1">
            <div id="d2"></div>
        </div>

      #d1
{ width: 200px; height: 200px; background-color: yellowgreen; } #d2{ width: 100px; height: 100px; background-color: deepskyblue; margin-top: 10px; }

技术分享图片

 

 

 

 

 

 



【解决办法】
1、给父容器添加一定的padding-top ,会给父容器添加不必要的padding区域,不推荐。
2、给父容器添加一定的上边框,会导致父容器产生不必要的边框,不推荐。
3、给父容器或者子容器添加float属性。不推荐。
4、给任何一个容器添加一个属性: overflow:hidden。推荐使用。

技术分享图片

border的补充:

 border-radius: :边框圆角。

   1.共接收8个属性值,分别表示:左上,右上,右下,左下/左上,右上,右下,左下(X轴/Y轴)。

   2.省略Y轴默认与X轴相等。如果4个角写不全,默认对角相等。

   3.只写一个值,默认8个值均等。

   4.div为正方形,当圆角弧度大于等于其宽度的一半,那么该div将显示为圆形。

代码如下:

 

 1             #div1{
 2                 background-image: url(img/cat.jpg);
 3                 height: 200px;
 4                 width: 200px;
 5                 border: 5px solid #FF9E01;
 6                 border-radius: 1030px;
 7                 background-repeat: no-repeat;
 8                 background-size: 200px 200px;
 9                 margin: 10px 0px;
10             }
11             
12                 #div2{
13                 background-image: url(img/cat.jpg);
14                 height: 200px;
15                 width: 200px;
16                 border: 5px solid #FF9E01;
17                 border-radius: 60px 0px;
18                 background-repeat: no-repeat;
19                 background-size: 200px 200px;
20             }

效果图:

技术分享图片

 

 技术分享图片

border-image: :为元素边框添加背景图片

   第一个属性:图片的url地址。

   第二个属性:为切线的大小。( 写法:第一个值/第二个值

   第一个值是切的图片宽度:上右下左,通过四条切线分为九宫格,四个角分别对应边框的四个角,四个角不会平铺拉伸。(不能带单位)

    第二个值是边框的宽度:上右下左,边框的四条边框。可以自行设置平铺拉伸。(必须带单位)
  第三个属性:四个角除外的图片属性。拉伸:stretch,铺满:round,平铺:repeat。


  例如:  border-image:{url(img/QQ图片20180312161643.png  27/27px repeat;}

例子:

1 #image{
2         width: 200px;
3         height: 200px;
4         /*background-color: #Fd9d07;*/
5                 
6         border-image: url(img/QQ图片20180312161643.png)
7                       27/27px
8                       repeat;
9         }                            

技术分享图片

 

盒子阴影----box-shadow:
    
共接收6个属性值,并用空格分隔。
  1. 水平阴影距离,可正可负。右正左负。(必填)
  2. 垂直阴影距离,可正可负。下正上负。(必填)
  3. 阴影模糊半径,只能为整数,默认为0,数值越大,阴影越模糊。
  4. 阴影拓展半径,可正可负,默认为0,数值增大,阴影扩大,数值减小,阴影缩小。
  5. 阴影颜色,默认为黑色。
  6. 内外阴影,默认为外阴影,inset表示内阴影

例子:

            #shadow{
                width: 200px;
                height: 200px;
                background-color: #F1B15A;
                box-shadow: 0px 0px 10px 0px red inset;
                
            }

技术分享图片

外围线---- outline:
在元素的边框以外,不占据任何空间,但有可能会覆盖四周的内容,写法上与border一致。
技术分享图片

下面来介绍CSS属性中比较重要的属性--浮动(float):

  浮动--float

   规律1:标准流模型中的块级盒子,默认宽度是100%;而浮动的块级盒子,宽度不会自动伸展,而是由内容(文字、padding)撑开。浮动后的行级元素会变成块级元素, 可以设置宽度高度等属性值。

  技术分享图片

   规律2:当一个盒子浮动后,标准流中的其他未浮动盒子将视浮动盒子不存在而占据浮动盒子(浮动盒子的背景会覆盖掉与之大小相同区域的未浮动盒子的背景),但是未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响(浮动盒子不能盖住未浮动盒子的文字内容),也就是浮动可以打破文档流,但是不能打破文字流。

技术分享图片

   规律3:可以使用clear属性使未浮动的盒子不受浮动盒子的影响。

 clear:清除其他元素浮动对自身造成的影响。
   可选值:left(清除左浮动) right(清除左浮动) both(清除两个方向浮动)
规律4:如果父盒子没有指定高度,而父盒子中的所有子盒子全部浮动,将导致父盒子的高度塌陷,也就是高度无法被子盒子撑开而变为0。

技术分享图片

解决子盒子浮动父盒子塌陷的问题:

  1.给父盒子添加overflow:hidden属性。[常用]

  2.让父盒子也浮动(前提是父盒子的宽度为100%)。

  3.在父容器的最后添加一个高度为0的空div并且添加clear:both属性。

  4.使用伪对象选择器::after生成一个空的元素

          #div4::after{
                            display: block;
                            content: "";
                            height: 0px;
                            clear: both;}

技术分享图片

盒模型分类:
CSS3的 box-sizing:Content-box: 标准盒模型(W3C盒子) 。设置的宽和高就是本身内容区域的宽和高,也就是content区域,padding,border等都不算在内,添加padding,border后可是区域会变大。
Border-box: 怪异盒模型(IE盒子)。 设置的宽和高是可视化区域的所有的长度(content+padding+border),其中包含了padding,border等。如果添加了padding和border后,content区域会被亚索,可视区域不会变大。技术分享图片
手动改变盒子模型: 
    
     #div
{        box-sizing: border-box;         }

  定位---position:
[相对定位]:

    1、使用position:relative。设置成相对定位。

    2、使用top/right/bottom/left设置定位的位置。

    3、定位机制:

      1.相对定位是相对自己原来所属位置进行定位。
      2.相对定位不会释放掉原来自己所属的位置,也不会影响其他元素。
      3.如果left/right同时存在,left生效。top/bottom同时存在,top生效。

    4、关于Z轴的重叠次序:

       1.定位元素,默认的Z轴高于普通文档流和浮动元素。
       2.同为定位元素,后来者居上。
       3.可以使用z-index调整上下层关系(只能使用在定位元素)

    技术分享图片    [绝对定位]:
      1、使用position:absolute。设置成绝对定位。
      2、定位机制:
        1.相对与第一个有定位的父元素进行定位。(第一个使用定位)
        2.如果元素没有已定位的祖先元素,那么它的位置相对于浏览器左上角定位。
      3、绝对定位文档流会彻底删除,原空间被释放。 
技术分享图片
[固定定位]:
  1、 使用position:fixed。设置成固定定位。是一种特殊的绝对定位。
  2、元素的位置相对于浏览器窗口左上角定位。即使窗口是滚动的它也不会移动。
  3、固定定位使元素的位置与文档流无关,因此不占据空间。
  4、固定定位的元素和其他元素重叠。  [Z-index]   1. 使用z-index可以调整层叠顺序。数值越大,层叠越往上;z-index数值相等,后来者居上。
  2.  z-index只能作用于定位元素。
  3. 元素的z-index属性要考虑父容器的z-index约束。
如果父容器设置了z-index,那么子容器不能脱离父容器的约束,而必须与父容器处同一级。
如果父容器没有设置z-index,或者设置了z-index:auto。则子元素不受父容器约束。
  4. z-index:0与z-index:auto区别:
    z-index:auto和z-index:0处于同一层,且z-index:auto是默认值。
    z-index:auto不约束子元素;z-index:0约束子元素。

裁切 --- clip:
  1、clip属性只能用于裁切图片,显示图片的指定区域。
  2、clip属性只能作用于absolute和fixed定位的元素上。
  3、属性值只接受一个rect函数,函数传入四个值,分别表示上右下左。
[注意]:与其他的上右下左不同,上下为从原图的上方到想要区域的顶部和底部的距离,左右为从原图的左边到想要区域的左端和右端的距离。

负边距应用:
设置元素在父容器中水平垂直居中,也可以增加元素的宽度。
  1、设置子元素为定位元素。
  2、给子元素添加属性:
left: 50%;
     top: 50%;
     margin-left: -(width/2)px;
     margin-top: -(height/2)px;
技术分享图片

CSS之盒子模型(深入理解)

标签:无法   inf   问题   splay   wrap   相关   图片   生成   重叠   

原文地址:https://www.cnblogs.com/JiangLai/p/8595309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!