css
关注
分享
扫一扫
css
门门men
玩命敲码中
展开
-
滚动条不占位 overlay属性
overflow-y: overlayoverflow的值为overlay，它的行为与auto相同的，但是在溢出时出现滚动条的展示方式有区分，overlay是覆在……上面，它是不占位的；例如：在表格中使用overflow-y: overlay：滚动条是不占位的，而滚动条占位会使数据整体向某个方向移动；注意：在Chrome浏览器中受支持；若设置后在火狐浏览器中滚动条不生效，在写一个overflow: auto;，火狐浏览器中无法像谷歌浏览器里那样overlay；...原创 2022-04-08 14:21:02 · 9181 阅读 · 0 评论 -
改变Antd Angular 默认样式
类名等 前加::ng-deep；类名等 前加：root；类名等 前加:host /deep/；在审查元素中找到对应的类名或id，然后直接在自己的css文件中用相同的名字定义样式就可以直接替换了。 ::ng-deep .ant-input-group-addon{ background-color: @tabs-card-head-input-background; border: 1px solid @tabs-card-head-input-background;原创 2021-06-22 16:02:15 · 431 阅读 · 0 评论 -
css点击按钮改变样式
:active，元素被点击时变色，但颜色在点击后消失 .mybtn:active { color: #4FA9FD; border: 1px solid #4FA9FD; }:focus， 元素被点击后变色，且颜色在点击后不消失 .mybtn:focus { color: #4FA9FD; border: 1px solid #4FA9FD; }由于div等元素无法接受键盘或其他用户事件，即不支持:foc原创 2021-06-21 14:12:30 · 26393 阅读 · 0 评论 -
css height属性中的calc方法
若父盒子是100%的高度，盒子里面的head部分固定位140px，内容部分始终为剩余的全部高度，height: calc(100% - 140px);切结"+或-"两边要有空格 不然不生效如何让一个侧边栏垂直方向全尺寸拉伸？ height:calc(100% - 10px)...原创 2021-05-31 13:16:05 · 562 阅读 · 0 评论 -
css背景色渐变
在-webkit-linear-gradient里面写left，设定渐变从右边开始，到左边结束。在这里需要注意的是，写了top就不要写bottom了哦（left同理）。 background: -webkit-linear-gradient(left,#258BDF,#26A4DF);原创 2021-04-29 17:58:19 · 252 阅读 · 0 评论 -
Sass基本使用
Sass是什么？Sass是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。用CSS预处理器可以让你的编码效率提高十倍。Sass 和 SCSS 有什么区别？一开始Sass规定的语法格式是严格的缩进式语法，不带大括号和分号，所以造成程序员在写sass的时候有非常大的不习惯，虽然它是最早的预处理器，却没有人家LESS用的人多，所以又支持了使用大括号和分号，这就是SCSS。原创 2021-04-01 11:58:31 · 494 阅读 · 0 评论 -
LESS
扩展文件名的格式是 xxx.lessLESS使用方法一：<script src="less.js"...> 这种方式编译less方法二：//安装lessnpm install -g less变量@变量名:值@width：100px;.box{ width:@width;}混合定义classa 然后可以将classa引入到classb中.classa(a){ width:@width;}.classb{ .classa(a).原创 2021-04-01 14:01:35 · 349 阅读 · 0 评论 -
前端面试题问答
CSS中那些属性可以继承？答：[A] 字体属性：font-family,font-size,font-style,font-variant,font-weight,font;可继承ps： font-size继承的是计算后的实际值[B] 文本属性：可以继承:word-spacing;letter-spacing;text-align;text-transform;text-indent;line-height不可继承：text-decoration;ve.原创 2021-04-28 10:05:25 · 140 阅读 · 0 评论 -
导航吸顶效果
HTML<div class="container"> <header></header> <div class="mark"></div> <div class="content"> <ul> <li> <p class="title">导航01</p> &l原创 2021-03-29 11:26:27 · 147 阅读 · 0 评论 -
用纯CSS实现吸顶效果
HTML<div class="header"></div><nav> 吸顶的头</nav><div class="content"></div><footer> 底部</footer>CSS.header { width:100%; height:160px; background:#87CEEB;}nav { width:100%; height:100p原创 2021-03-29 11:16:06 · 696 阅读 · 0 评论 -
CSS布局两边固定中间自适应
两边固定中间自适应利用浮动（float）让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入下一行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g原创 2021-03-26 16:22:47 · 344 阅读 · 0 评论 -
CSS布局两边固定中间自适应
两边自适应中间固定flex布局（利用flex-grow进行布局）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ display:flex; flex-dir原创 2021-03-26 16:08:03 · 111 阅读 · 0 评论 -
谷歌浏览器字体小于12px解决方法
谷歌浏览器最小字体尺寸是12px，想要调成更小的字体，缩放 transformH5获取mac地址 js调用摄像头原创 2021-03-23 09:38:55 · 3297 阅读 · 0 评论 -
CSS布局flex布局常用属性
display: flex 使用 flex 布局首先要设置父容器；水平方向： justify-content: flex-start;起始端对齐 justify-content: flex-end;末尾段对齐 justify-content: center;居中对齐 justify-content: space-around;均匀分布 justify-content: space-between;两端对齐，中间均匀分布垂直方向：原创 2021-03-16 20:49:24 · 266 阅读 · 0 评论 -
CSS边框，实线、虚线、破折号
border:1px solid red; /*实线*/border:1px dotted red; /*虚线*/border:1px dashed red; /*破折号*/原创 2021-03-16 20:46:45 · 1211 阅读 · 0 评论 -
CSS 隐藏页面上的一个元素有哪几种方法？
display:none，visibility:hiden，opacity:0 这三种；设置 fixed 并设置足够大负距离的 left top 使其“隐藏”；用层叠关系 z-index 把元素叠在最底下使其“隐藏”；用 text-indent:-9999px 使其文字隐藏。还有Position，Clip-pathPosition将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。.hide{position:absolute;top:-9999px;left:原创 2021-03-16 11:52:39 · 260 阅读 · 0 评论 -
前端面试题
一、CSS相关1.1 左边定宽，右边自适应方案：float + margin，float + calc/* 方案1 */ .left { width: 120px; float: left;}.right { margin-left: 120px;}/* 方案2 */ .left { width: 120px; float: left;}.right { width: calc(100% - 120px); float: left;}1.2 左右两边定宽原创 2021-02-22 14:15:49 · 175 阅读 · 0 评论 -
display:block；和display:inline；display:inline-block的区别
display:block将元素显示为块级元素。block元素的特点是：总是在新行上开始；处于常规流中，width没有设置会自动填满父容器高度没有设置的情况下，会被处于常规流中的子元素撑开高度，行高以及顶和底边距都可控制；margin，pading生效vertical-align无效宽度缺省是它的容器的100%，除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。原创 2021-01-27 22:08:58 · 359 阅读 · 0 评论 -
display:none；与visibility:hidden；的区别
visibility: hidden;和baidisplay: none; 在作用、对HTML元素的影响、定义上有所不同;1、作用不同visibility: hidden：将元素隐藏，但是在网页中该占的位置还是占着。display: none：将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素不同visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display原创 2021-01-27 21:55:42 · 309 阅读 · 0 评论 -
specified value,computed value,used value计算方法
specified value（规范值）: 计算方法如下： 如果样式表设置了一个值，使用这个值 如果没有设置值，这个属性是继承属性，从父元素继承 如果没设置，并且不是继承属性，使用css规范指定的初始值computed value（计算值）:以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。lin转载 2021-01-27 21:47:43 · 326 阅读 · 0 评论 -
link和@import的区别
建议使用link，慎用@import1. 兼容性不同link是XHTML的标签,无兼容性问题；@import是在CSS2.1时候提出的，由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别2.从属关系link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性@import：@import是css提供的语法，只有导入样式表的作用,只能加载CSS3.加载顺序不同link：link在页面加载时CSS同时被加载@impor原创 2021-01-27 21:34:48 · 109 阅读 · 0 评论 -
CSS Hack
什么是CSS Hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS Hack!CSS Hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览原创 2021-01-27 21:24:34 · 87 阅读 · 0 评论 -
css sprite 是什么,有什么优缺点？
概念将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。优点减少 HTTP 请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现缺点图片合并麻烦维护麻烦，修改一个图片可能需要重新布局整个图片，样式联系它们都能让元素不可见区别display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidd原创 2021-01-26 21:56:03 · 257 阅读 · 0 评论 -
CSS 选择器有哪些及优先级
*通用选择器：选择所有元素，不参与计算优先级，兼容性 IE6+#X id 选择器：选择 id 值为 X 的元素，兼容性：IE6+.X 类选择器： 选择 class 包含 X 的元素，兼容性：IE6+X Y 后代选择器： 选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性：IE6+X 元素选择器： 选择标所有签为 X 的元素，兼容性：IE6+:link，:visited，:focus，:hover，:active 链接状态： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: I原创 2021-01-26 21:51:55 · 345 阅读 · 0 评论 -
水平垂直居中
定位： 盒子宽高已知position: absolute; left: 50%; top: 50%;margin-left:-自身一半宽度;margin-top: -自身一半高度;table-cell布局父级：display: table-cell; vertical-align: middle; 子级：margin: 0 auto;定位 + transform 适用于 子盒子 宽高不定时；position: relative / absolute;/*top和.原创 2021-01-11 20:27:26 · 76 阅读 · 0 评论 -
让文本不可复制
-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;原创 2021-01-04 09:19:22 · 87 阅读 · 0 评论 -
flex 常见属性
flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效。子元素可以横向排列，也可以纵向排列。flex布局原理简单说就是通过给父盒子添加display：flex 属性，来控制子盒子的位置和排列方式。<!DOCTYPE html><html lang="en"><head> .原创 2020-12-22 20:49:32 · 1280 阅读 · 0 评论 -
css给某个li添加样式
:nth-child(1) 第几个括号里填几.findbutton-top>li:nth-child(1){ border-top: 2px solid #D9D9D9;}原创 2020-12-17 20:36:58 · 1149 阅读 · 0 评论 -
什么是BFC？
什么是BFC？刚接触BFC时看了好多博客，这篇文章就谈谈我个人对BFC的理解。BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。可以理解为BFC是一个块独立的作用域，它有些自己独立的特性。怎么去触发BFC浮动元素：float 除 none 以外的值。绝对定位元素：position除static或者relative以外的值，例 (abso原创 2020-12-13 20:12:05 · 280 阅读 · 0 评论 -
css文字超出自动换行或换成省略号代替
文字内容超出宽度时显示（…）text-overflow:ellipsis;需与overflow:hidden;一起使用文字超出自动换行white-space: nowrap;//不换行white-space:pre-wrap;//换行原创 2020-11-24 15:13:55 · 794 阅读 · 0 评论