码迷,mamicode.com
首页 > Web开发 > 详细

5.css3盒模型

时间:2019-10-11 12:39:17      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:百分比   mamicode   alt   png   margin   scroll   info   一个   inf   

1.css3盒模型

margin外边距:

  Margin-topMargin-rightMargin-bottomMargin-left

Border边框:

  Border-width

  Border-style:solid实线边框,dotted点状边框,double双线边框

  Border-color

Padding内边距接受长度和百分比,但不接受负值。

  Padding-topPadding-rightPadding-bottomPadding-left

  Padding *同时设定四个边距

  padding **同时设定上下、左右边距

  padding ***同时设定上、左右、下边距

  Padding ****同时设定上、右、下、左边距

外边距的合并:

  当两个垂直外边距相遇时,它们将形成一个外边距。

  合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

   技术图片

 

   技术图片

溢出的处理:

  Overflow如果内容溢出了,是否对内容的边缘进行裁剪。

  Overflow-x如果内容溢出了,是否对内容的左右边缘进行裁剪。

  Overflow-y如果内容溢出了,是否对内容的上下边缘进行裁剪。

  技术图片

Visible不裁剪,会显示在内容框之外。

   技术图片

Hidden裁剪,不提供滚动机制。

   技术图片

Scroll裁剪,提供滚动机制。

   技术图片

auto如果溢出,则提供滚动机制。

   技术图片

5.css3盒模型

标签:百分比   mamicode   alt   png   margin   scroll   info   一个   inf   

原文地址:https://www.cnblogs.com/chenJieLing/p/11653231.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!