继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

盒子模型——且听风吟720

且听风吟720
关注TA
已关注
手记 6
粉丝 5
获赞 2

盒子模型,即用来存放网页各种元素的模块(一般用div的嵌套来实现)
盒子模型的完整图片

盒子属性值包括:

  1. 内容的宽(width)和高(height)
  2. 内容盒子的内边距(padding)
  3. 盒子的边框(border)
  4. 盒子相邻的其他盒子之间的距离——外边距(margin)

宽度(width)、高度(height)

  1. 可设置的值:长度、百分比、auto
    • 宽度width常设置px/100%(铺满整个页面)
  2. 最大值max-(width/height):
    • 只可比该值小
    • IE6及以下的浏览器不兼容该属性
  3. 最小值min-(width/height):
    • 只可比该值大
    • IE6及以下的浏览器不兼容该属性
  4. 冲突时的取值:
    • width/height不在max/mix范围内
      • 比max大,取max
      • 比min小,取min
    • max/min冲突时(二者无交集范围),取min
  5. 默认值:
    • width为100%(铺满该页面),等同于设置了auto,默认不继承父元素属性
    • height为内部元素的高度,等同于设置了auto,默认不继承父元素属性
  6. 可设置width、height的元素
    • 块级元素
    • 替换元素(根据标签元素和属性判断显示的具体内容),如<img>、<input>、<textarea>

边框(border)

  1. 宽度border-width:
    • 英文(thin/medium/thick)
    • 具体长度(px/em等),默认不继承父元素属性
  2. 颜色border-color:
    • 颜色(英文、rgb、rgba(a表示透明度,取0-1,0为全透明,1为不透明)
    • 透明transparent
  3. 样式border-style:
    • 常用值:solid(实线)、double(双实线)、dotted(点状线)
    • 默认值:none(无边框) ,且默认四边样式一致
  4. 修改各个边的独立样式:
    • 在宽度、颜色、样式的中间加上位置
      • border-left-width
  5. 简写方式:
    • 四边一样时:
      • width|style|color(宽度|样式|颜色)
    • 四边不同时:
      • 分别给不同位置设置width|style|color
      • 其中width在第一个,后两个可以颠倒

内边距(padding)

盒子和内容之间的距离(设置padding的元素该元素的子元素之间的距离)

  1. 可取值:长度/百分比,值不可以是负,默认不继承父元素属性
  2. 可以四个边分别设置
    • padding-位置(top/bottom/left/right)
  3. 缩写方法:
    • 1个值,默认四边都为该值
    • 2个值,默认为上下、左右
      • 因为只能找到上和右的值,默认下=上,左=右
    • 3个值,上、右、下
      • 找不到左的值,默认左=右
    • 4个值,上、右、下、左(顺时针顺序,从钟的“零点”开始取值
      padding以及margin的取值顺序

外边距(margin)

元素之间的距离/子元素和父元素的距离(此时对子元素设置margin

  1. 可取值:长度/百分比,值可以是负,默认不继承父元素属性
  2. 可给四边分别设置值(同padding)
  3. 缩写方法(同padding)
  4. 默认值:
    • 块级元素默认存在margin
    • 在CSS文档最初,将块级元素的margin统一初始化成0
<style>
	*{margin:0;padding:0;}
</style>
  1. 使用技巧及注意点
    • 设置margin上下0,左右为auto,可实现子元素相对于父元素水平居中,此时左右的margin会由浏览器自动计算
      margin使用技巧1
    • 垂直方向相邻元素的margin会合并,当二者取值不同时,取其中较大的一个
      margin使用技巧2
    • 左右相邻元素的margin是取二者的和来展现的

盒子模型的大小

  1. 盒子占用空间的计算方法:
    • 宽度width:
      margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
    • 高度height:
      margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

注:盒子的实际高度是不包括外边距margin的

  1. IE的盒子模型大小:
    • 宽度width和高度height不包括外边距margin
      IE盒子模型
  2. 文档类型声明对盒子模型解析的影响
    • 文档开头有<! DOCTYPE=html>时,按照标准的盒子模型解析
    • 文档开头没有文档类型声明时,按照浏览器自己的方式解析

修改元素的属性——display

  1. 取值:
    • inline:将块级元素变成在一行内显示
    • block:将行内元素显示成块级元素,每个元素都在不同的行内
    • inline-block:元素既在一行显示,同时也有块级元素的属性(可以设置宽高)
    • none:不显示该元素
  2. 使用技巧:
    • 先让元素不显示(display:none),再通过伪类选择器结合display属性,使得在鼠标悬停时显示元素
<style>
	ul{display:none;}
	div:hover ul{display:inline;}
</style>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP