前端学习笔记十一

作者: 被注册的9527 | 来源:发表于2017-02-26 09:31 被阅读6次

1,外边距

margin也是复合属性也分上右下左

块级元素将左右属性都设置为auto可使块级元素水平居中

使用margin定义块元素的垂直外边距时可能会出现外边距的合并

行内元素不要给上下的margin和padding(上下的margin和padding会被忽略,左右magin和padding会起作用)

2,盒子的宽和高

2.1宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(img和input除外).

2.2计算盒子模型的总高度时还应考虑上下两个盒子垂直外边距合并的情况

当上下相邻的两个块级元素相遇时,如果上面的元素右下边距margin-bottom,下面的元素有margin-top,则他们之间的垂直距离不是margin-bottom加margin-top,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并也叫外边距塌陷。

2.3对于嵌套关系的块级元素,如果父级元素没有上内边距和边框,则父元素的上外边距会和子元素的上外边距合并。合并后外边距为两者中的较大者。

解决方法是:为父元素增加上边框或上内边距

相关文章

  • 前端学习笔记十一

    1,外边距 margin也是复合属性也分上右下左 块级元素将左右属性都设置为auto可使块级元素水平居中 使用ma...

  • Vue 学习笔记 vue-router路由和前端状态管理

    Vue 学习笔记十一、vue-router路由和前端状态管理 什么是路由:网址 11.1 vue­-router路...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • 2月23笔记

    第十天web前端学习笔记 有道云笔记

  • 2月21笔记

    第八天web前端学习笔记 有道云笔记

  • 2月20笔记

    第七天web前端学习笔记 有道云笔记

  • 前端学习十一

    task11_1task11_2task11_3task11_4task11_5 你在学习中遇到什么问题? tas...

  • 前端学习(十一)

    盒子模型(框模型): CSS处理网页时,它认为每个元素都包含在一个虚拟的盒子中,对网页布局,就可以看成就相当于摆放...

  • 2月19笔记

    第6天web前端学习 有道云笔记

  • 收集前端学习资料

    前端的一些学习资源 html和css代码规范 前端知识体系 前端网址大全 学习CSS布局 通用 CSS 笔记、建议...

网友评论

    本文标题:前端学习笔记十一

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