首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

全栈之前端 | 4.CSS3基础知识之盒子模型学习

常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性,可以包含其他块级元素和内联元素。...,CSS 渲染绘制时屏幕上盒子实际宽度和高度会加上设置的边框和内边距值,所以在实现响应式布局事会非常烦人,需要时刻注意到这个元素的边框和内边距。...> 指定两个值时,第一个值会应用于上边和下边的外边距,第二个值应用于左边和右边。 > 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。..., 相信大家都明白下述属性含义吧,字面意思*/ margin-top margin-right margin-bottom margin-left 示例演示: 示例 1,尝试更改外边距的值,来查看当前元素和其包含元素... border-边框 描述: 边框是在边距和填充框之间绘制的,如果你正在使用标准的盒模型,边框的大小将添加到框的宽度和高度,如果你使用的是替代盒模型,那么边框的大小会使内容框更小,因为它会占用一些可用的宽度和高度

31220
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    盒子模型(CSS重点)

    表示 上下3像素 左右 5像素 3个值 padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 4个值 padding.../* 清除外边距 */ } 注意: 行内元素是只有左右外边距的,是没有上下外边距的。...内边距,在ie6等低版本浏览器也会有问题。 我们尽量不要给行内元素指定上下的内外边距就好了。 content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。...大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是: /*外盒尺寸计算(元素空间尺寸)*/ Element空间高度 = content...2、计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况。 3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度,则padding 不会影响本盒子大小。

    1.6K10

    CSS重要的盒子模型

    + padding + border (Width为内容宽度) 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 内边距产生的问题 ?...课堂一练 一个盒子宽度为100, padding为 10, 边框为5像素,问这个盒子实际的宽度的是() [x] (A) 130 [ ] (B) 135 [ ] (C) 125 [ ] (D) 115 关于根据下列代码计算...宽度为352px 高度为306px [ ] (C) 宽度为302px 高度为307px [ ] (D) 宽度为302px 高度为252px padding不影响盒子大小情况 如果没有给一个盒子指定宽度,...解决方案: 可以为父元素定义上边框。 可以为父元素定义上内边距 可以为父元素添加overflow:hidden。 还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。...我们根据稳定性来分,建议如下: 优先使用宽度(width) 其次使用内边距(padding) 再次外边距(margin)。

    1K20

    让div等块级元素水平以及垂直居中的解决办法

    只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得div等块级元素居中。  ...实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%...,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。    ...如果当页面div等块级元素宽度和高度是动态的,比方说需要弹出一个div等块级元素元素层并且要居中显示,div等块级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。    ...jQuery设置div等块级元素的CSS,获取div等块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。

    1.8K20

    JavaScript与jQuery获取元素的宽、高和位置

    可视宽高 clientHeight :元素的可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素的可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身宽高 offsetHeight...:元素的高度(包括边框和内边距,不包括外边距) offsetWidth :元素的宽度(包括边框和内边距,不包括外边距) 偏移值 offsetLeft :元素的相对水平偏移位置(左边界距离可视区域最左侧的距离...) offsetParent :元素的偏移容器(父元素) offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离) 事迹宽高 scrollHeight :整个元素的高度(包括带滚动条的隐蔽的地方...() :获得包括内边距(padding)的元素宽度,不包括边框 innerHeight() :获得包括内边距(padding)的元素高度,不包括边框 outerWidth() :获得包括内边距(padding...、内边距和内容 outerHeight(true) :获得整个元素的高度,包括外边距、边框、内边距和内容 注意: 1)ele.css("height") :返回带有完整单位的字符串(例如400px),若运算需要

    3.1K00

    【前端】:margin

    height 属性要么设为 auto,要么设为某种类型的非负值,决不能小于零。 如果把块级框的高度设为百分数,百分数是相对框体的容纳块的高度而言的。...如果未明确声明容纳块的高度,那么百分数高度将被重置为 auto。 百分数外边距、内边距值是相对于父元素的内容区宽度计算。...如果height=auto,那么默认的高度是从最上边那个块级子代元素的上边框外侧到最下边那个块级子代元素的下边框外侧之间的距离。因此,子元素的外边距“游离”在所属元素的外部。...如果块级元素有上内边距或下内边距,或者有上边框或下边框,那么高度是从最上边那个子元素的上外边距的外边界到最下边那个子元素的下外边距的外边界之间的距离。...div> div> 示例3:非替换行内元素行高不会被上下边距、边框影响; ? <!

    1.1K10

    前端成神之路-盒子模型

    + padding + border (Width为内容宽度) 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 4.5 内边距产生的问题 问题 ?...+ 20 + 10 关于根据下列代码计算 盒子宽高下列说法正确的是() div { width: 200px; height: 200px; border: 1px...解决方案: 可以为父元素定义上边框。 可以为父元素定义上内边距 可以为父元素添加overflow:hidden。 还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结。。。 6....我们根据稳定性来分,建议如下: 按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。...以上效果图矩形的圆角, 就不要用 百分比了,因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用 用 高度的一半就好了。精确单位。 2. 盒子阴影(CSS3) ?

    99130

    【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )

    文章目录 一、内边距 1、概念 2、内边距设置语法 3、内边距设置效果 二、内边距代码示例 1、不设置边距的示例 2、设置边距的示例 一、内边距 ---- 1、概念 内边距 是 盒子 的 边框 与...使用标尺测量 盒子模型的宽高都是 200 像素 ; 宽度 200 像素 : 高度 200 像素 : 2、设置边距的示例 为 盒子模型 设置 左边距 和 上边距 , 代码为 : <!...*/ border: 1px solid blue; /* 设置左边距 */ padding-left: 20px; /* 设置上边距 */ padding-top...: 30px; } div>内边距测试div> 展示效果 : 使用标尺测量 盒子模型的 尺寸 为 220...x 230 像素 ; 宽度 220 像素 : 高度 230 像素 :

    88130

    【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )

    , 标签类型有很多 , 不同的情景使用不同类型的标签 ; 块级元素 : div 标签 独占一行显示 , 对应 块标签 ; 行内元素 : span 标签可以 在一行放置多个进行显示 , 对应 行内标签...; 大小可控 : 标签 的 高度 , 宽度 , 内边距 , 外边距 可以自定义设置 ; 默认宽度 : 块级元素 默认 宽度 是 父容器 的 100% 宽度 ; 容器特点 : 块级元素 作为 容器 ,...; 4、代码示例 代码示例 : 为 div 块级元素 设置 宽度 , 高度 , 上边距 , 背景颜色 , 文字颜色 ; 下面的代码中 , 为 div 标签设置了 200x100 像素大小 , 并设置了...2 像素的上边距 , 块级元素 整体背景设置为了黑色 , 文字颜色设置成了 绿色 ; <!...{ /* 宽度 200 像素 */ width: 200px; /* 高度 100 像素 */ height: 100px; /* 上边距 2 像素 */ margin-top

    1.8K30

    你是否彻底了解margin属性?

    垂直外边距合并问题 别被上面这个名词给吓倒了,简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。...div> div class="secondChild">div> div> 如果按照CSS规范,IE的“良好表现”其实是一个错误的表现,因为IE的hasLayout...这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。...再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。...在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。 解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。

    88620

    【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

    , 下方的网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于 顶部导航栏的高度 ; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素...此处标准流盒子设置 100px 的外边距 防止被顶部的固定定位盒子覆盖 */ margin-top: 55px; 由于设置 绝对 / 固定 定位 , 会将元素变为行内块元素 , 其宽度是内部子元素的宽度...; 首先 , 将盒子的顶部设置到浏览器垂直中线位置 , position: fixed; /* 该盒子在浏览器左侧 */ /* 上边偏移 50% 之后减去 150 居中设置 */...水平居中 */ margin: 0px auto; /* 子元素与 */ padding: 10px; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素...此处标准流盒子设置 100px 的外边距 防止被顶部的固定定位盒子覆盖 */ margin-top: 55px; background-color: pink; }

    3.1K50

    看博客学习别人的旋转的星球

    太阳sun,把红太阳放在中间,居中显示,定义position为absolute, 距左50%,剧上50%,左边距负的宽度的一半,上边距负的高度的一半 #sun{ background: red;...earthline,边框显示出来,定义position为absolute,距左50%,剧上负的高度一半,左边距负的宽度的一半 #earthline{ width: 200px; height:...地球 earth,把地球放在水平居中,太阳轨道垂直地球居中,定义position为absolute,距左50%,剧上50%,左边距负的宽度的一半,上边距负的高度的一半 #earth{ background...50%,剧上负的高度一半,左边距负的宽度的一半 #moon{ width: 40px; height: 40px; background: blue; border-radius: 50%...id="sunline"> div id="sun">div> div id="earthline"> div id="earth">div> div id="

    44820

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券