前端学习笔记(四) - 盒子模型及其相关


盒子模型(Box model)
  1. 简介

    • css处理网页时,它认为每个元素都包含在一个不可见的盒子里
    • 故css在处理网页布局的时候可以看做是在摆放一个又一个的盒子
    • 一个盒子可以分为四个部分内容区(content),内边距(padding),边框(border),外边距(margin)
      Box model
  2. 边框(border):三个样式缺一不可

    属性效果可选值
    boder-width边框宽度css长度单位
    boder-xxx-width边框宽度boder-left/right/top/bottom-width,同上
    boder-color边框颜色css颜色单位
    boder-xxx-color边框颜色boder-left/right/top/bottom-color,同上
    boder-style边框样式solid(实线),dashed(虚线),dotted(点状),double(双线)详见boder-style 属性
    • boder-xxx如果设置一个值,表示上下左右边框均为该值。如果设置两个值表示上下为第一个值,左右为第二个值。如果设置为三个值,表示上为第一个值,左右为第二个值,下为第三个值。如果设置四个值分别代表上右下左的值(顺时针) [上述规则适用于同类所有属性]
    • 以上属性简写样式:border:10px red solid ;,以上属性没有顺序,但每次指定都是四个边的值,boder-topboder-bottomboder-leftboder-right可分别对四条边设置属性,同boder
  3. 内边距(padding):指的是盒子的内容区和盒子边框之间的距离,内边距会影响可见框的大小,内容区的背景效果会延伸到内边距,属性值,padding-toppadding-bottompadding-leftpadding-right,表示上下左右边距,简写padding: ;,规则同boder-width

  4. 外边距(margin):不会影响盒子可见框的大小,但是会影响盒子的位置,类似内边距,属性值有margin-top,margin-bottom,margin-left,margin-right,其中的值可以设置为正值也可以设置为负值,也可以设置值为auto,将margin-left/right其中一个设置为auto则取当前可能最大值,如果两者均取值为auto则在父元素中居中,同样类似与padding可以使用简写

    • 垂直方向的相邻元素外边距会取二者外边距的最大值并不是两者之间的和

    浏览器对于每个元素即使没有样式,也会设置marginpadding的默认值,可以通过统配选择器*{ margin: 0; padding: 0;}清除,但是效率不高

    块元素内边距,外边距和边框均可以设置。但是对于内联元素,不能设置widthheight,不支持垂直外边距,水平外边距可以设置,两个元素之间的水平外边距求和布局,而非取最大值。可以设置水平内边距,亦可以设置垂直内边距,但是垂直内边距变化不会影响布局,边框同内边距。

  5. display属性:通过改变display属性的值可以改变内联元素为块元素,值有inline(内联元素),block(块元素),inline-lock(行内块元素),none(隐藏元素,不可见);

    display: none;visibility: hidden相比,前者隐藏元素的时候直接在布局时不显示,但是后者仍然占有布局位置,只是元素不显示

  6. overflow属性:设置子元素溢出父元素时溢出的内容如何显示,可选值:visible(溢出内容显示到父元素外),hidden(溢出内容不显示),scroll(不管是否溢出都加水平和垂直滚动条),auto(智能模式,若溢出则显示滚动条,那个方向溢出显示那个方向的滚动条)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值