hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

CSS框模子观点引见_WEB前端开发

2019-12-01后端开发ki4网18°c
A+ A-

CSS框模子 (Box Model) 划定了元素框处置惩罚元素内容、内边距、边框 和 外边距 的体式格局。

CSS 框模子概述 ( 引荐进修:CSS基础教程 )

元素框的最内部分是现实的内容,直接围困内容的是内边距。内边距显现了元素的背景。内边距的边沿是边框。边框之外是外边距,外边距默许是通明的,因而不会遮挡厥后的任何元素。

提醒:背景应用于由内容和内边距、边框构成的地区。

内边距、边框和外边距都是可选的,默许值是零。然则,许多元素将由用户代办款式表设置外边距和内边距。能够经由过程将元素的 margin 和 padding 设置为零来掩盖这些浏览器款式。

这能够离别举行,也能够运用通用选择器对一切元素举行设置:

* {
  margin: 0;
  padding: 0;
}

在 CSS 中,width 和 height 指的是内容地区的宽度和高度。增添内边距、边框和外边距不会影响内容地区的尺寸,然则会增添元素框的总尺寸。

假定框的每一个边上有 10 个像素的外边距和 5 个像素的内边距。假如愿望这个元素框到达 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提醒:内边距、边框和外边距能够应用于一个元素的一切边,也能够应用于零丁的边。

提醒:外边距能够是负值,而且在许多情况下都要运用负值的外边距。

虽然有要领处理这个问题。然则现在最好的处理方案是逃避这个问题。也就是,不要给元素增加具有指定宽度的内边距,而是尝试将内边距或外边距增加到元素的父元素和子元素。

术语翻译

element : 元素。

padding : 内边距,也有材料将其翻译为添补。

border : 边框。

margin : 外边距,也有材料将其翻译为空缺或空缺边。

以上就是CSS框模子观点引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS框模子观点引见_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>