css
关注
分享
扫一扫
文章平均质量分 74
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 · 2221 阅读 · 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 · 455 阅读 · 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 · 2877 阅读 · 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 · 282 阅读 · 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 · 260 阅读 · 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 · 2234 阅读 · 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 · 496 阅读 · 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 · 410 阅读 · 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 · 202 阅读 · 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 · 710 阅读 · 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 · 1042 阅读 · 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 · 149 阅读 · 0 评论