CSS-盒子模型

  • 所有的页面元素都可以看成一个盒子,并且占据着一定的页面空间。无论是div、span、还是a都是盒子,但是,图片、表单元素一律看作是文本,它们并不是盒子。比如说,一张图片里并不能放东西,它自己就是自己的内容;
  • 盒子模型是由content(内容)、 padding(内边距)、 margin(外边距)、 border(边框)这四个属性组成的。

盒模型就是指CSS布局中的每一个元素,在浏览器的解释中,都被当做一个盒装物。对我们来说,只需要理解元素在页面中所占据的位置。

border边框

  • 复合样式:border:边框大小 类型 颜色;
border:5px solid #006633;
border-width: 5px;      大小
border-style: solid;    类型
border-color: red;      颜色
border-top:0px;       /*去除上边框*/
border-top:none;      /*去除上边框*/
  • border-width:边框大小
    • 四个值:上 右 下 左(顺时针)
    • 三个值:上 左右 下
    • 二个值:上下 左右
    • 一个值:四个方向值相等
    • border-top-width 顶部边框大小
    • border-right-width 右边框大小
    • border-bottom-width 底部边框大小
    • border-left-width 左边框大小
  • border-style: 边框类型
    • solid 实线
    • dashed 虚线
    • dotted 点线
    • double 双边框
    • border-top-style 顶部边框类型
    • border-right-style 右边框类型
    • border-bottom-style 底部边框类型
    • border-left-style 左边框类型
  • border-color 边框颜色
    • 四个值:上 右 下 左(顺时针)
    • 三个值:上 左右 下
    • 二个值:上下 左右
    • 一个值:四个方向颜色一样
    • border-top-color 顶部边框颜色
    • border-right-color 右边框颜色
    • border-bottom-color 底部边框颜色
    • border-left-color 左边框颜色

padding内边距

边框与内容之间的距离

  • 四个值:上 右 下 左(顺时针)
  • 三个值:上 左右 下
  • 二个值:上下 左右
  • 一个值:四个方向值相等
  • padding-top 顶部内边距
  • padding-right 右内边距
  • padding-bottom 底部内边距
  • padding-left 左内边距

margin外边距

元素与其他元素的距离(边框以外的距离)

  • margin-top 顶部外边距
  • margin-right 右外边距
  • margin-bottom 底部外边距
  • margin-left 左外边距
  • 自动水平居中
    • margin:auto; 左右居中
    • margin:20px auto; 上下20px 左右居中
    • margin:20px auto 0; 上20px 左右居中 下0

盒子大小的计算

  • content+border+padding盒子大小 = 样式宽 + 内边距 + 边框
  • 盒子宽度 = 左border+左padding+width+右padding +右border
  • 盒子高度 = 上border+上padding+height+下padding+下border

文档流

文档流是浏览器解析网页的一个重要概念,对于一个XHTML网页,body元素下的任意元素,根据其前后顺序,组成了一个个上下关系,这便是文档流。浏览器根据这些元素顺序去显示他们在网页中的位置。
文档流是浏览器默认显示规则

float浮动

浮动起初作用是为了让文字环绕效果。

  • 浮动的定义:使元素脱离文档流 ,按照指定(左右)方向发生移动,遇到父级边界或者相邻的浮动元素停了下来;
  • 文档流 是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置);
  • 脱离文档流 :在页面内中不占位置,所以浮动元素后面的元素会占据浮动元素本来应该所处的位置。
  • 如果水平方向上没有足够的空间容纳浮动元素,则转向下一行
浮动的一般情况
  • float:left;
  • float:right;
  • none;

如果一个元素(无论是块级元素还是行内元素)被设置为float之后,那么它默认会添加属性display:inline-block(行内块级元素),也就是说浮动会让元素变为拥有块级属性的行内元素,这时它的默认宽度不是100%,且给该元素设置padding-top和padding-bottom或者width、height都是有效果的。

清除浮动
  • 什么情况下需要清除浮动?
    父元素没有高度(指的是不设值,height:0不算)的情况下,里面的子元素都设置了浮动。
    只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。 但是一般,高度height很少出现。为什么?因为能被内容撑高!
  • 为什么需要清除浮动?
    当元素设置浮动属性后,会对相邻的元素产生影响。相邻元素是指紧邻后面的元素。
  • 清除浮动办法:
  1. overflow: hidden; 是将父元素解除浮动的影响,需要注意这个属性不仅能清除浮动,还有超出隐藏效果。
    给没有设置高度的父元素设置overflow:hidden,一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。
# 时下主流,应该用在包含浮动元素的父元素上;
.clearfix:after{
              content:'';
              display:block;
              clear:both;
              height:0;  
           } 

css给块级元素设上display: inline与float:left的区别是什么?
设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:left后,才允许同行显示。
设了display:inline的元素,允许它的前后存在其它的内联元素同行显示。如果要让代码在前面的块元素与之同行显示,则要让前面的元素浮动(不管是左还是右浮动)或设为display:inline,如果要让代码在后面的块元素与之同行显示,则只能设为display:inline,浮动不起作用(无论左浮动还是右浮动)。即允许内联同行,块级要看情况。 给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。

position定位

规定元素的定位类型
  • static 静态定位(没有定位),默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
  • relative 相对定位,相对于其正常位置进行定位。
    不会脱离文档流;
    不影响元素本身的特性;
    如果没有定位偏移量,对元素本身没有任何影响;
  • absolute 绝对定位,最近非static定位的父级进行定位。
    使元素完全脱离文档流;
    没有定位父级则相对于body(整个文档)发生偏移;
    绝对定位一般配合相对定位使用;
  • fixed 固定定位,相对于浏览器窗口进行定位。
方位词
  • left: 距离左边的距离
  • right: 距离右边的距离
  • top:距离顶部的距离
  • bottom:距离底部的距离
  • z-index 规定定位的层级(默认0),仅能在定位元素上奏效。
    值:number 值越大层级越高
    注意:方位词相对于哪个对象偏移的

注意1:float和absolute会脱离文档流,所以对其设置宽高,不会影响其父元素的,切不要想通过设置其来撑开父级元素!

注意2:需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

案例

需求:实现如下效果
①进入的时候界面:


CSS-盒子模型_第1张图片
image.png

②鼠标进入里面,两边“耳朵”显示出来:


CSS-盒子模型_第2张图片
image.png

③鼠标移动到某个圆,对应圆亮
CSS-盒子模型_第3张图片
image.png



    
    第四次作业
    


    
  • <
  • >

你可能感兴趣的:(CSS-盒子模型)