如何在不修改父CSS的情况下将HTML元素扩展为父元素的大小？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

图片不变形，宽高不超出父元素的情况下旋转图片

demo 如题，具体的效果见这里。做这样的效果的难点在于，计算没旋转前图片的宽，高和旋转后的宽高。下面来看具体的实现。实现步骤让图片在父元素中水平居中，垂直居中显示。我用的是 flex。.../* 图片的父元素 */ .img-wrap{ display: flex; justify-content: center; align-items: center; height:...我们知道图片在旋转 (2n * 90)度在父元素的宽高是一样的，((2n + 1) * 90) 度在父元素的宽高是一样的。...图片的宽和高要满足不超出父元素图片不能变形在上面的条件下，图片的宽高只有有限的值可以选。...在旋转 (2n * 90) 度的情况下图片的宽为父元素的宽，高度自适应图片的高为父元素的高，宽度自适应在旋转((2n + 1) * 90) 度的情况下图片的宽为父元素的高，高度自适应图片的高为父元素的宽

2.1K3 0

图片自适应父元素大小，并左右上下居中的css方法

图片自适应父元素大小，并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片，希望能够达到的效果。这个效果可以很简单的用css来实现，虽然已经烂熟于心，但是并未记录下来。...DOCTYPE html> html lang="en"> html...width: 0; } .pic img { max-width: 120px; max-height: 120px;vertical-align: middle; } 核心思想就是给父元素添加一个固定...100%高度的伪元素撑开，并使用vertical-align: middle;使得内容垂直居中为中间，这样，图片就会垂直居中了。

3.2K8 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS概要

CSS 基础知识语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。...CSS语法选择符 { 属性:值} 选择符:又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段(p)的文字将变成蓝色，而其他的元素(如ol)不会受到影响。...如:css"> span{ color:red; } 外部式:把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内(不是在标签内)使用标签将css样式文件链接到HTML文件内。...元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。

1.4K5 0

CSS3学习(一)——基础学习

style属性来设置元素的样式问题: 使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要个一个的修改，非常的不方...head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可，内部样式表更加方便对样式进行复用问题: 我们的内部样式表只能对一个网页起作用...第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。...百分比：也可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变 em： em是相对于元素的字体大小来计算的 1em = 1font-size em...在没有auto的情况下回调整外右边距，但有auto的话会优先调改设置为auto的元素。

7472 0

前端知识点总结（html+css）（上）

文章分为上（html，css）中(js)下(vue)三部分。 html篇 html应该是前端中最简单的知识点了，标签用着用着就熟记于心，在面试过程中对html的提问更是少之又少，话不多说，上干货。...（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...p元素 p:first-child 选择属于属于父元素的唯一子元素扩展: 伪元素：::before，::after，::first-line，::first-letter，::selection...px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...与em对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。

3641 1

CSS 实用手册

px 像素 1024px * 768px (7). em 倍数，1em 相当于父元素默认大小 (8). rem 相对于根元素(html)设置的字体大小来指定倍数 5....小部分行内元素允许修改尺寸，html 元素中本身就具备 width 和 height 属性的行内元素允许修改尺寸，否则不能改，如:img 7....元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下) ③....父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度 63....，ndeg) 多个轴同时旋转时使用 X 、Y、Z,取值为 1，该轴参与旋转，如 rotate3D(1,1,1,45deg) X 、Y、Z,取值为 0，该轴不参与旋转，如 rotate3D(1,0,0,45deg

2.7K1 0

掌握这4 个关键的 CSS 属性，你才算入门 CSS

它需要许多不同的值，但坦率地说，在大多数情况下你将只使用 4 个值。 block：CSS 中的块级元素，它占用尽可能多的空间，但它们不能放置在同一水平线上。...您可以在下拉菜单中使用它，当你将鼠标悬停在导航菜单上时会显示附加信息。 2、Float float 属性用于定位和格式化内容。简单来说，float 属性管理HTML内容在父容器一侧边缘的位置。...它只是指 HTML 元素的背景，大多数时候开发人员在多个背景属性之间感到困惑。但是，如果你对如何在 CSS 中选择背景有一个清晰的解释，那么使用 HTML 元素会容易得多。...大多数情况下，你将使用以下 3 个值：绝对：绝对定位的元素查找本身具有相对、绝对或固定位置的父后代元素。相对：具有相对位置的元素将相对于其正常位置进行定位。...但是，当我们为父元素（蓝色容器）提供相对位置时，所有具有绝对位置的元素都将落入新的父元素之下。你可以观察到，当我们将相对位置值传递给父元素时，子元素的高度现在是相对于父元素的。本文完~

1.9K3 0

前端硬核面试专题之 CSS 55 问

} （3）多个块状元素解决方案将元素的 display 属性设置为 inline-block，并且把父元素的 text-align 属性设置为 center 即可: .parent { text-align...(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。...与该元素同级的浮动元素，对于同一方向的浮动元素(同级)，两个元素将会跟在碰到的浮动元素后面；而对于不同方向的浮动元素，在宽度足够时，将分别浮动向不同方向，在宽度不同是将导致一方换行(换行与 HTML 书写顺序有关...rem 是 CSS3 新增的一个相对单位（root em，根em），这个单位与 em 区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

2K2 0

重温前端-css篇

} 6、固定定位 position:fixed 7、CSS单位（一） em和rem 简单的说 em: 就是字体大小，根据元素自身的字体大小来定，如果自身没有定义字体大小，则继承父元素的字体大小，即1em...首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名...3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。转换当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。...原因：当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零...CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。 CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。

8343 0

59道CSS面试题(附答案)

行内式是指将样式写在元素的 style属性内。内嵌式是指将样式写在 style元素内。外链式是指通过link标签，引入CSS文件内的样式。...px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是国定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...与cm对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。 33、什么叫优雅降级和渐进增强？两者有什么区别？...自适应的单位有以下几个百分比：% 相对于视口宽度的单位：ww 相对于视口高度的单位：vh 相对于视口宽度或者高度（取决于哪个小）的单位：Vm 相对于父元素字体大小的单位：em 相对于根元素字体大小的单位...它们都是相对单位 rem表示相对于根元素的字体大小。 em表示相对于父元素的字体大小 58、什么是FOUC？如何避免FOUC？

5K5 0

前端基础篇css

、html相关概念 1.html—超文本标记语言 2.xhtml—可扩展的超文本标记语言 3.html5—html的第五次重大修改注：html和xhtml的区别 xhtml相对于html4.0并没有增加新的标签...–注释内容–> css基础一、css概念及特点 css—层叠样式表特点：实现了结构与表现相分离作用：定义html元素如何在网页中显示二、css基础语法 css由选择器和声明两大部分组成，声明又是由属性和属性值组成...，显示浏览器默认字体 d）特殊字体一律用图片 2.字体大小语法：font-size:数值+单位; eg: p{font-size:12px;} 注：a)字体大小一般设置偶数不设置奇数 b)浏览器默认字体大小为...将元素转换为内联元素，是内联元素的默认display属性值 c)inline-block 将元素转换为内联块状元素，是内联块状元素的默认display属性值（如img,input） d)none 将元素隐藏不可见...锚记名”> eg: 第一章 html基础第一章 ————————————————— 扩展一：如何在网页中插入flash

1.7K3 0

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

| 代码示例 ) 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display..., 如 : left: 10px ; 右侧偏移量 : 盒子模型距离父容器右边线的长度 , 如 : right: 10px ; 4、定位模式定位模式 : CSS 中通过 position 属性设置定位模式...中的静态定位是默认的定位方式 , 就是无定位 , 设置该定位方式 , 定位盒子不生效 ; 为盒子模型设置静态定位模式 , 该盒子模型就会按照标准流的方式摆放布局 , 没有任何边偏移...; 将元素的显示模式修改为行内块显示模式的方法 : 使用 inline-block 可以改变显示模式 , 将元素的显示模式改为行内块显示模式 ; 使用浮动 , 也可以将块内元素...默认为 inherit , 继承自父元素 , 一般默认都是可见的 ; 一般情况下父元素设置不可见 , 子元素也同时不可见 ; visibility 设置属性值 visible , 表示该元素是可见的 ;

3591 0

CSS基础知识点整理笔记

嵌套块元素垂直边距合并，当父级元素没有设置border、padding的情况下，父子元素的margin边距会合并，其取值为较大值 css3的新特性答案解析常用css3新特性：动画属性animation...'' ,权值为1000 第二等：代表ID选择器，如：#content ,权值为0100 第三等：代表类、伪类、属性选择器，如：.content 权值0010 第四等：代表标签选择器和伪元素选择器，如div...答案解析：清除浮动是指的是父元素中的子元素设置float导致父元素的高度为0的情况解决方案父元素设置属性为：overflow:hidden (实质是触发BFC) 父元素中增加一个新的元素，添加属性...css不会阻塞dom树的解析 css会阻塞dom树的渲染 css加载会阻塞后面js的执行原因如：浏览器渲染页面的过程分析结构伪类选择器有哪些选择器功能描述 E:last-child 选择父元素的倒数第一个子元素...用来为css增加一些编程的特性，无需考虑浏览器的兼容性问题同时扩展了@import指令的能力，通过编译环节将切分后的文件重新合并一个大文件。

1.4K2 0

web前端常见面试题

DOCTYPE html> HTML 4.01 Strict（HTML 4.01 严格模式）的 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（如font），它的文档类型声明：...对于很多字体来说，1ex ≈ 0.5em； em 1em 等于父级元素的字体大小，2em 就是父级元素字体大小的二倍； rem 当用在根元素（html>）的 font-size 上面时，它代表了它的初始值...视口高度 vw 和宽度 vh 两者中的最小值 vmin 视口高度 vw 和宽度 vh 两种中的最大值； % 相对于父级元素的大小来确定；参考：CSS [1] CSS percentage...，并做同样的事情，然后是下一个，等等，直到它到达html>元素；而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。...，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。

2.3K2 0

CSS 常见面试题速查

E 元素后代的 F 元素 E > F 子元素选择器，匹配所有 E 元素的子元素 F E + F 相邻元素选择器，匹配所有紧随着 E 元素之后的同级元素 F E ~ F CSS3，匹配任何在 E 元素之后的同级...F 元素属性选择器 CSS 2.1 E[attr] 匹配所有具有 attr 属性的 E 元素（E 可以省略，如 [checked]） E[attr=val] 匹配所有 attr 属性值为 val...em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值 rem：相对单位，可理解为"root em...",相对根节点 html 的字体大小来计算，CSS3 新增的属性 # 块级元素水平居中的方法 margin: 0 auto 水平居中 html> # 盒模型盒模型是什么当对一个文档进行布局时，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子 CSS 决定这些盒子的大小、位置以及属性

9111 0

CSS之1px问题

本文将扩展和完善第3篇的内容，详细讲解如何在H5 App中利用WebSockets实现实时通信，并附带示例代码。 CSS单位相关问题前言：为什么有 1px 这个问题？实现 1px 有哪些方法？...也就是说，当逻辑像素是 1pt 时，在 DPR 为 2 的设备上显示为 2px 的物理像素移动端1px 解决方法：一种是利用 css 中的 transfrom：scaleY(0.5) 媒体查询根据不同...1% rem/em rem作用于非根元素时，相对于根元素大小；rem作用于根元素字体大小时，相对于其初始字体大小，本质就是等比缩放 em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时...如果改元素没有设置，则一直向父级元素查找，直到找到，如果没有设置大小，使用浏览器默认大小。...缺点： rem需要借助js进行动态修改根元素大小，实现计算rem时，需要借助sass或者less等预处理的函数，不能100%等比例缩放 em 改变父元素的字体大小，所有子元素都回流大厂成熟解决方案淘宝移动端自适应方案

591 0

CSS小技能:常用样式属性、选择器分类、盒子模型

CSS 声明块与选择器配对，以生成 CSS 规则集。 1.1 HTML中引入CSS的方式外部样式，link标签将外部样式表链接到页面。...--不推荐此方式，因为在一个站点里，在需要更改 CSS 时修需要改每个页面文件。--> 内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。...1）字体颜色 color:颜色英文单词、#十六进制形式 RGB 如：color:#0099ff 2）字体大小 font-size 3）字体样式 font-style 4）字体 font-family...：块级盒子（block）盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽每个盒子都会换行 width 和 height 属性可以发挥作用内边距...positioning）如果想相对于父节点进行定位：最好设置父节点的position为relative，原则“子绝父相”。

1.8K1 0

前端面试题-每日练习(3)

rem rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数只相对于根元素的大小 rem（font size of the...root element）是指相对于根元素的字体大小的单位。...作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法 em 文本相对长度单位...(相对父元素的字体大小倍数) em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。...（相对是的HTML元素的字体大，默认16px） em与rem的重要区别：它们计算的规则一个是依赖父元素另一个是依赖根元素计算

1542 0

yui3：widget

这样的分离是为了让widgets在安全地修改它的状态以后，再把这些修改体现到DOM元素中。这样的一个分离的概念，把代码区分成两种方法，一种方法用以处理widget的状态和逻辑，一种用以处理DOM。...通常这是widget对DOM的第一次修改。 bindUI方法该方法的职责是添加事件监听器，将UI的状态和widget的状态关联起来。...widget代码标签图示下图展示widget的HTML标签和class名：为什么使用嵌套的两个盒子两个嵌套盒子为CSS应用、装饰元素支持、bounding box宽高控制提供方便。...这些元素作为content box的兄弟元素，当他们和content box有同一个父元素时，对他们的定位、大小的设定会更方便。...这些特性和功能应被打包成扩展或者插件，以便在多个类(extension情况下)或多个实例(plugin情况下)中都能通用。

1.5K2 0

我碰到的那些面试题html+css

子元素在纵向正中间 baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。...浏览器默认字体是16px, 整个页面内1em不是一个固定的值; 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下：class为id1的div字体大小继承自父元素body...： 16px*1.5em = 24px class为id2的div字体大小继承自父元素id1： 24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em...通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。...如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置；（2）字体尺寸尽量使用em,rem 为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置

1.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭