![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 69
Eva3288
这个作者很懒,什么都没留下…
展开
-
zoom和transform:scale()的区别
文章目录1. 兼容行区别2. 控制缩放的属性值不一样3. zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置4. 对文字的缩放规则不一致5. 执行的渲染顺序不同总结:zoom 不兼容火狐zoom 使等比例缩放,scale可以只缩放一个方向;属性值也不同zoom缩放基点是左上角,scale 是中心位置,用transform-orgin来改变zoom缩放文字受12好字体限制,scale 可以缩小到12号字体一下zoom 先缩放再渲染,s原创 2020-08-22 18:19:34 · 1945 阅读 · 1 评论 -
网页里小于12号的字体怎么处理?- transform:scale()
在新版的chrome中,已经禁止了改属性,建议使用CSS3中的方法:transform:scale(0.875);当使用transform:scale(0.75)时; 不仅是文字变小了,整个文字所在的容器也同时会变小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt.原创 2020-08-21 14:39:32 · 409 阅读 · 0 评论 -
<img src=“./logo.jpeg“ style=“width: 400px!important;“ alt=““>修改图片的宽度
max-width:100px;给图片设置box-sizing: border-box;padding: 0 50px;,但图片左右会有50px的内边距利用缩放,给图片设置zoom: 0.625利用缩放,transform: scale(0.5,0.5),但是占据的位置还是原来的200pxjs获取元素使用imgs[0].setAttribute(“style”,“width:300px!important;”)或者imgs[0].style.cssText=‘width:300px;’动画:谷歌.原创 2020-08-21 11:28:24 · 2640 阅读 · 0 评论 -
margin塌陷以 及 margin合并
文章目录1. 什么是margin 合并? 及 何时会margin合并?2. margin 合并的几种情况1. 兄弟元素margin 合并2. 父子元素(父元素没有padding 或 border把两个margin分开,让其不相遇)父元素margin大 -- 正常margin合并子元素的margin大 -- --------------margin塌陷 --------------------3. 一个空元素,没有border和padding3. margin合并解决方法兄弟元素:父子元素:总结:普通原创 2020-08-15 16:15:36 · 261 阅读 · 0 评论 -
BFC - 特性、应用及 如何触发
文章目录1. BFC2. BFC的布局规则3.触发 BFC4. BFC 特性及应用1. 防止margin上下重叠(不同bfc 里的元素互不影响)2. 清除浮动(BFC 可以包含浮动的元素)3. 自适应两栏布局 -- BFC 不与浮动元素重叠1. BFCBFC 即 Block Formatting Contexts (块级格式化上下文)具有 BFC 特性的元素可以看作是隔离了的独立容器(独立的渲染区域),容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性2. BFC原创 2020-08-13 21:57:47 · 228 阅读 · 0 评论 -
CSS盒模型: ie盒模型 / 标准盒模型
元素的外边距(margin)、边框(border)、内边距(padding)、内容(content)就构成了CSS盒模型盒模型分为:IE/怪异盒模型 和 W3C标准盒模型。标准盒模型:width/height = content宽高,不包含border和padding;IE 盒模型: width/height = content + padding + border,包含 border和padding。Css3新属性box-sizing: content-box | border-box | in.原创 2020-08-12 22:45:13 · 1878 阅读 · 0 评论 -
未知宽高元素上下左右垂直居中
文章目录1. 绝对定位 + margin反向偏移/ transform: translate(-50%,-50%)2. flex布局3.绝对布局4.`table-cell`实现居中<div class="wrap"> <div class="box"> </div></div> 1. 绝对定位 + margin反向偏移/ transform: translate(-50%,-50%) .box{ width: 100px;原创 2020-08-12 22:36:00 · 422 阅读 · 0 评论 -
flex场景面试题
文章目录1. flex-内容宽度等分( flex: 1;)2. 左右布局,一侧定宽,一侧自适应撑满(一个width:200px;另一个:width:100%;)3. 未知高宽上下左右居中 (justify-content: center;align-items: center)1. flex-内容宽度等分( flex: 1;).box { display: flex;}.box div { flex: 1; border: 1px solid red;}<原创 2020-08-12 21:26:16 · 356 阅读 · 0 评论 -
flex布局
文章目录容器属性1. display: flex / -webkit-flex; --元素定义为flex 容器2. flex-direction - 主轴的方向,也就是容器中项目的排列方向3. flex-wrap -- 项目大小超过主轴宽度时,是否换行4. justify-content -- 定义项目在主轴上的对齐方式5. align-items -- 定义项目在交叉轴上的对齐方式项目属性1. order -- 项目在容器中的排列顺序2. flex-grow -- 项目的放大比例3. align-sel原创 2020-07-22 21:24:29 · 165 阅读 · 0 评论 -
【常见页面布局】- 2、登录等上中下布局--背景等比例缩放background-size、calc()
<template> <div id="login"> <div class="header"> 头部 </div> <div class="content"> 内容 </div> <div class="footer"> 底部 </div>原创 2020-07-22 20:19:15 · 668 阅读 · 0 评论 -
【常见页面布局】- 1、应用网站常用布局 - 侧边栏 和头部固定
<template> <div id="app"> <div class="sider"> 侧边栏 </div> <div class="header">头部</div> <div class="content"> 内容 <p style='height:2000px;'></p> 111111111111111 .原创 2020-07-11 17:33:06 · 960 阅读 · 0 评论 -
css相关
css相关1、display:none与visible:hidden的区别1、display:none与visible:hidden的区别display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:display:none —不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。visible:hidden— 使对象在网...原创 2020-02-01 09:43:07 · 125 阅读 · 0 评论