css框模型

时间：2022-04-21 11:56:32

元素的背景是内容、内边距和边框区的背景。

css中：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

bootstrap中：width 和 height 指的是包含border、padding、element的框的总尺寸,不包含margin。

  1. margin、padding、border四值顺序：top right bottom left。值复制遵循对等原则。
  2. length：规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。%：定义基于父元素宽度的百分比。此值不会如预期地那样工作于所有的浏览器中。
  3. padding-top 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，不允许负值。padding-bottom同理。
  4. padding-left该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.padding-right同理。
  5. 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。a.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。c.假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。d.如果这个外边距遇到另一个元素的外边距，它还会发生合并。e.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
  6. border 规定元素边框的样式、宽度和颜色。如果您希望边框出现，就必须声明一个边框样式。
  7. border-style:
    值 描述
    none 定义无边框。
    hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
    dotted 定义点状边框。在大多数浏览器中呈现为实线。
    dashed 定义虚线。在大多数浏览器中呈现为实线。
    solid 定义实线。
    double 定义双线。双线的宽度等于 border-width 的值。
    groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset 定义 3D inset 边框。其效果取决于 border-color 的值。
    outset 定义 3D outset 边框。其效果取决于 border-color 的值。
    inherit

    规定应该从父元素继承边框样式border-color:
  8. border-color:默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。
  9. 创建有宽度的不可见边框用border-color: transparent;在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。
  10. border-image :将图片规定为包围 div 元素的边框。
    值 描述  
    border-image-source 用在边框的图片的路径。  
    border-image-slice 图片边框向内偏移。  
    border-image-width 图片边框的宽度。  
    border-image-outset 边框图像区域超出边框的量。  
    border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
  11. border-radius:为元素添加圆角边框！border-radius: 1-4 length|% / 1-4 length|%。按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。如： 
    border-radius: 2em 1em 4em / 0.5em 3em;

    等价于：

    border-top-left-radius: 2em 0.5em;
    
border-top-right-radius: 1em 3em;
    
border-bottom-right-radius: 4em 0.5em;
    
border-bottom-left-radius: 1em 3em;
  12. box-shadow：向框添加一个或多个阴影。box-shadow: h-shadowv-shadowblurspreadcolor inset;
    值 描述 测试
    h-shadow 必需。水平阴影的位置。允许负值。 测试
    v-shadow 必需。垂直阴影的位置。允许负值。 测试
    blur 可选。模糊距离。 测试
    spread 可选。阴影的尺寸。 测试
    color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
    inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

相关文章