美文网首页Web前端之路H5/Web前端开发教程让前端飞
CSS 框模型 element、width、height、bor

CSS 框模型 element、width、height、bor

作者: 一Left一 | 来源:发表于2018-06-20 15:41 被阅读12次

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距边框外边距 的方式。
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

element : 元素。
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。

padding分别设置上、右、下、左内边距:
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。
| padding-bottom | 设置元素的下内边距。
| padding-left | 设置元素的左内边距。
| padding-right | 设置元素的右内边距。
| padding-top | 设置元素的上内边距。
margin分别设置上、右、下、左外边距:
margin-top
margin-right
margin-bottom
margin-left

CSS border 围绕元素内容和内边据的一条或多条,属性允许你规定元素边框的样式、宽度和颜色。
border-top-style
border-right-style
border-bottom-style
border-left-style

border-top-width
border-right-width
border-bottom-width
border-left-width

border-top-color
border-right-color
border-bottom-color
border-left-color

width、height、padding、margin、border区别
width、height、padding、margin、border区别

相关文章

  • CSS 框模型 element、width、height、bor

    CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部...

  • 绝对居中

    一、css3 .element {width: 600px; height: 400px;position: ab...

  • CSS盒模型概述

    盒子模型: 盒子模型,又称框模型 (Box Model) 盒子模型主要的属性:width、height、paddi...

  • 用CSS画三角形

    .triangle{ width: 0px; height: 0px; overflow: hidden; bor...

  • 面试总结

    1. CSS盒模型 IE盒模型:width=content,height=contentw3c标准盒模型:wid...

  • jquery中css("width")与wi

    $(element).width(); // 返回数字,例如:80 $(element).css("width")...

  • 优化版 京东静态登录页面

    废话不多说 习惯之一,先上笔记: 上午: 框模型 定义元素框处理元素内容, width height margin...

  • 前端面试总结

    HTML/CSS 1. 盒模型 标准盒模型width 和 height 是内容区域即 content 的 widt...

  • 盒模型

    问答 盒模型包括哪些属性 属性包括元素 element 的 height、width,长和宽内边距 padding...

  • CSS3 框大小

    CSS3 框大小 CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 pad...

网友评论

    本文标题:CSS 框模型 element、width、height、bor

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