文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css必知的几个底层知识和技巧

hover::before{     content: "你 love 我";     color: transparent;     outline: 2px solid #cd0000; } 我们会发现，当容器宽度设置为...本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度...overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局: /* 父元素设置 */ .pd-...margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案： 父级设置为块级格式化上下文元素 父元素设置border-top/bottom值 父元素设置padding-top/...，则计算尺寸是基于父元素 如果left/right 或top/bottom这些对立属性同时出现时，只有一个方向的属性会生效，优先级与文档流的顺序有关，默认的文档流是自上而下，从左到右的，所以top优先级高于

2.1K20

如何把控css的方向感

before{ content: "你 love 我"; color: transparent; outline: 2px solid #cd0000; } 复制代码 我们会发现，当容器宽度设置为...本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度...但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案： 父级设置为块级格式化上下文元素...父元素设置border-top/bottom值 父元素设置padding-top/bottom值 父元素设置高度 复制代码 空块级元素margin合并...，则计算尺寸是基于父元素 如果left/right 或top/bottom这些对立属性同时出现时，只有一个方向的属性会生效，优先级与文档流的顺序有关，默认的文档流是自上而下，从左到右的，所以top优先级高于

1.2K10
您找到你想要的搜索结果了吗？
是的
没有找到

详解DOM对象中clientWidth、offsetWidth等属性

clientWidth与只与元素有关，它的计算方式如下。 clientWidth=width(样式中设置的)+左padding+右padding-垂直滚动条宽度。...offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。...总的来说两条规则： 　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。 　　...2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。...当不存在水平或垂直滚动条时，scrollWidth和scrollHeight等于clientWidth和clientHeight， 当存在水平或垂直滚动条时，请看下面演示(将div#sub-contetn

1.7K20

HTML+CSS基础

又比如当设置float:left，那么margin-left直接起作用，假如内部元素的宽度不够，那么margin-right也可能不会表现出作用。...，子级的margin-top会传递给父级，解决办法：给父级加上border                2.2.2     margin叠压问题，见2.1                2.2.3    ...margin-bottom 无效问题，有时候需要设置某块级元素在该父类的底部显示，但是此时设置margin-bottom:0; 却无效。...，那么第二个盒子会距离第一个盒子10px，如果设置为0，那就会紧挨着第一个（当然第二个的margin-top也是设为0时），margin-bottom是设置同级元素间的间隔，并不是设置它在父元素中的位置...1、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {...} 2、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{..}来控制#b里面的元素样式； 注：

2.7K91

前端成神之路-CSS（选择器、背景、特性）

父级 子级{属性:属性值;属性:属性值;} 语法： .class h3{color:red;font-size:16px;} ? 当标签发生嵌套时，内层标签就成为外层标签的后代。...块级元素的特点 （1）比较霸道，自己独占一行 （2）高度，宽度、外边距以及内边距都可以控制。 （3）宽度默认是容器（父级宽度）的100% （4）是一个容器及盒子，里面可以放行内或者块级元素。...2.5 三种模式总结区别 元素模式 元素排列 设置样式 默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度...概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性，只需将它应用于父元素即可。 简单的理解就是： 子承父业。...比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

1.9K20

寒假提升 ｜ Day6 CSS 第四部分

写出案例，证明CSS属性的继承性 当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div...默写出display常见的值，并且说出对应的特性，并且写出测试案例 block：让元素显示为块级元素;可以让元素独占一行,可以设置宽度和高度,高度默认由内容决定 inline：让元素显示为行内级元素 ;...可以和其他行内级元素在同一行,不可以设置宽度和高度,宽度和高度由内容决定 inline-block：让元素同时具备行内级、块级元素的特征 ;可以和其他行内级元素在同一行,可以设置宽度和高度,默认宽度和高度由内容决定...,将a的值设置为0 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素 opacity设置透明度, 设置为0 设置整个元素的透明度, 会影响所有的子元素 五.京东案例 七....给父元素设置 padding-top\padding-bottom 给父元素设置border 触发BFC: 设置 overflow 为 auto（Block formating context） 建议

1.3K20

CSS入门？一篇就够了！

其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。...由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他 子级都需要浮动。这样才能一行对齐显示。 元素添加浮动后，元素会具有行内块元素的特性。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。...（停职留薪） overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 visible : 　不剪切内容也不添加滚动条。

5.2K20

scrollwidth和clientwidth_vue监听页面滚动

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。...id=”t”>如果为 p 设置了 scrollTop，这些内容可能不会完全显示。...LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离; clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 offsetLeft 返回对象相对于父级对象的布局或坐标的...left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽，不包边线宽度

1.8K10

HTML+CSS练习题【详解】

块级元素默认宽度是父级的100% B. 块级元素独占一行 C. 块级元素不可以设置宽高 D....D. margin 下列选项中正确设置CSS3盒模型并且实际宽度是200px的div是( ) A. div { box-sizing:content-box;width:200px; height:100px...取值为column，可以将主轴设置为Y轴 D： flex-direction默认取值是column 如何将flex布局的主轴设置为Y轴( ) A： flex-direction:column;...固定定位的元素会跟随浏览器滚动条进行滚动 B. 绝对定位的元素会参考设置了定位(非静态)的父元素或者祖级元素进行定位对齐 C. 静态定位是元素的默认定位方式，不需要设置 D....相对定位一般与固定定位配合使用 C. 项目布局中，基本不会使用相对定位 D. 相对定位大多数使用与绝对定位配合，组成子绝父相 以下选项，针对绝对定位描述错误的是( ) A.

23010

建议收藏！总结了42种前端常用布局方案

div> 最终的实现效果如下： 上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...实现CSS代码如下： .parent { /* 为父级容器设置行高 */ line-height: 500px; } .child { /* 将子级元素设置为 inline-block 元素...> 内容 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下： .left...使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3.

4.1K30

建议收藏！总结了 42 种前端常用布局方案

div> 最终的实现效果如下： 上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...实现CSS代码如下： .parent { /* 为父级容器设置行高 */ line-height: 500px; } .child { /* 将子级元素设置为 inline-block 元素...> 内容 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下： .left...使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3.

4.1K30

前端成神之路-定位

定位(position) 目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1....CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中： 普通流（标准流） 浮动 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。...； 跟父元素没有任何关系；单独使用的 不随滚动条滚动。...案例小结： 子绝父相 —— 子元素使用绝对定位，父元素使用相对定位； 与浮动的对比： 绝对定位：脱标，利用边偏移指定准确位置； 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。...所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

1.9K20

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。...:hidden;” id=”p”> 如果为 p 设置了 scrollTop，这些内容可能不会完全显示。...LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离; clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 offsetLeft 返回对象相对于父级对象的布局或坐标的...left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽，不包边线宽度

6.8K20

CSS-03

radius 半径（距离） 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。...# 外边距实现盒子居中 可以让一个盒子实现水平居中，需要满足一下两个条件： 必须是块级元素。 盒子必须指定了宽度（width） 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。...# 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并...模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */ box-shadow: 0 15px 30px rgba(0, 0, 0, .4); } # overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容...应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 权重相同时，CSS遵循就近原则。

2K30

CSS布局(二) 盒子模型属性

auto 　　宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽。...所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性...【为什么margin:auto无法实现垂直居中】   水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间   垂直方向不可以居中是因为块级元素的高度默认是内容高度...，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0 margin: 0 auto; 【为什么图片使用margin:auto不能水平居中】   图片无法水平居中，类似于块级元素无法垂直居中...因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。

1.9K70

纯CSS实现拖拽--resize、scale、包裹性

不可以缩放 both 水平和垂直方向上均可调整元素的大小 horizontal 在水平方向上调整元素的大小 vertical 在垂直方向上调整元素的大小 注意： 块元素 overflow 属性不能设置为...收缩与包裹 width 默认值为 auto，其有4种不同的表现： 充分利用空间： 的宽度默认是100%于父级容器的； 收缩与包裹：浮动、绝对定位（absolute、fixed）、inline-block...中文是随便断的，英文单词不能断； 超出容器限制：内容很长的连续英文和数字，或者元素被设置了white-space: nowrap； 格式化宽度： 绝对定位（absolute、fixed）的元素，默认情况下宽度表现是...当 left/right、top/bottom 对立方位的属性同时存在时，宽度表现是“格式化宽度”，宽度大小相对于最近的具有定位特性（非static）的祖先元素计算。格式化宽度具有完全的流体性。...利用 inline-block 的包裹特性即可实现：内容少，宽度自适应（文字left–撑满元素，元素center）；超过一行，$('.content') 的宽度为父容器宽度300px（文字left，元素

2.9K10

纯CSS实现拖拽--resize、scale、包裹性

不可以缩放 both 水平和垂直方向上均可调整元素的大小 horizontal 在水平方向上调整元素的大小 vertical 在垂直方向上调整元素的大小 注意： 块元素 overflow 属性不能设置为...收缩与包裹 width 默认值为 auto，其有4种不同的表现： 充分利用空间： 的宽度默认是100%于父级容器的； 收缩与包裹：浮动、绝对定位（absolute、fixed）、inline-block...中文是随便断的，英文单词不能断； 超出容器限制：内容很长的连续英文和数字，或者元素被设置了white-space: nowrap； 格式化宽度： 绝对定位（absolute、fixed）的元素，默认情况下宽度表现是...当 left/right、top/bottom 对立方位的属性同时存在时，宽度表现是“格式化宽度”，宽度大小相对于最近的具有定位特性（非static）的祖先元素计算。格式化宽度具有完全的流体性。...利用 inline-block 的包裹特性即可实现：内容少，宽度自适应（文字left–撑满元素，元素center）；超过一行，$('.content') 的宽度为父容器宽度300px（文字left，元素

3.4K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券