美文网首页
Chapter 7 盒模型

Chapter 7 盒模型

作者: Candy374 | 来源:发表于2017-01-04 00:24 被阅读0次

边距冲突

当top margin碰到 bottom margin, 浏览器会取较大的那个值

解决方案:

  • 使用top padding
  • 加一条border

水平边距不会和浮动元素之间的边距发生这样的折叠,绝对定位和相对定位的元素也不会发生折叠

行内盒子 和 块级盒子

top/bottom padding/margin对行内盒子无效

  • img标签例外(虽然它也是行内元素),但padding和margin会使它变高
  • 浮动的行内元素会被当作块级元素处理

画圆

border-radius: 20%;
border-radius: 20px/40px;

清除浮动

clear属性接受以下选项:

  • left. 样式将落至左浮动元素的下方, 但是仍将环绕右浮动的对象
  • right。强迫样式落至右浮动对象的下方,但是仍将环绕左浮动的对象
  • both。 强迫样式落至左浮动和右浮动的元素下方
  • none。完全关闭清除属性,换句话说它会让项目包围左浮动和右浮动的对象,这也是web浏览器的默认方式

相关文章

  • Chapter 7 盒模型

    边距冲突 当top margin碰到 bottom margin, 浏览器会取较大的那个值 解决方案: 使用top...

  • 弹性盒子

    ● 怪异盒模型(ie7以下) ● 新版盒模型 ○ display:flex设置为弹性盒 ○ ...

  • Chapter 9 模型盒

    不能对内边距和外边距指定颜色,也不能加任何装饰。元素的背景颜色(或背景图像)会延伸到内边距,但不会延伸到外边距。 ...

  • 【基础教学】教大家如何使用怪异盒

    ● 怪异盒模型(ie7以下) ● 新版盒模型 ○ display:flex设置为弹性盒 ○ flex-direct...

  • Chapter9 盒模型

    CSS将每个元素看做一个盒子表示,由内容,内边框,外边框组成。内容可被透明内边框padding包围,内边框周围可放...

  • CSS面试题

    1、盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding +...

  • CSS面试题

    1、 盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding ...

  • CSS盒模型和BFC

    盒模型 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型 IE盒模型也称border-box。属性width,...

  • 前端第四天

    前端第四天 目录: 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

网友评论

      本文标题:Chapter 7 盒模型

      本文链接:https://www.haomeiwen.com/subject/vstovttx.html