css
关注
分享
扫一扫
TE杨
整天遇坑，还是路走得太少了
展开
-
解决空隙问题(记录)
html中默认标签之间的空格是占位置的，解决方法font-size原创 2020-05-14 19:55:47 · 259 阅读 · 0 评论 -
横向滚动容器的实现
父元素加上overflow-x: auto;子元素设置成行内块元素或者行内元素加上white-space: nowrap;不换行原创 2020-04-26 13:15:59 · 352 阅读 · 1 评论 -
前端透明图片(加功能就是遮罩)原生css的实现方案
1、父元素设置背景为黑色，子元素设置透明度opcityhtml代码css(这里是less)代码原创 2020-04-25 16:39:59 · 564 阅读 · 0 评论 -
图片下间隙的4种解决方案
1、把图片设置为块级元素display:block;2、因为行内元素默认是放置在父元素的基线上的，解决方案，设置vertical-align属性为「top，text-top，bottom，text-bottom」都可解决3、设置父元素溢出隐藏：overflow:hidden;4、设置图片浮动...原创 2020-04-25 16:33:31 · 484 阅读 · 0 评论 -
css之2d转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-18 11:18:56 · 89 阅读 · 0 评论 -
最全的css选择器说明
1.css老版本选择器（1）元素选择器element(权重0)直接在style中用元素设置的选择器（2）类选择器.(权重10）（3）id选择器#（权重100）（4）通配符选择器*(权重0)（5）伪类选择器（权重10）link,visited,hover,active（6）其他一些不常用的没有列举2.css3的选择器1.属性选择器（权重1）e[属性] 选择什么属性的选择器e...原创 2019-12-18 10:49:56 · 135 阅读 · 0 评论 -
css选择器权重以及权重叠加问题
css中权重大小：* 标签 0类 10ID 100标签内样式 1000！important 无穷大样式继承的权重为0，权重之间不能越界，11个类也没有id的权重大...原创 2019-12-15 11:55:28 · 778 阅读 · 0 评论 -
css之怎样解决图片下间隙的问题
图片下间隙问题的原因，行高是由四条线组成的，顶线，中线，基线，底线，图片的底边默认和基线对齐，这就造成了基线与底线之间的留白。解决方法：1,改变标签的元素状态，图片默认是行内块元素，把它设置为块级元素即可2.让图片的底边不与基线对齐，vertical-align设置为除基线以外的其他任何一条线即可...原创 2019-12-15 11:46:18 · 384 阅读 · 0 评论 -
css之嵌套关系垂直外边距合并解决方案
（1），设置border-top:1px solid transparent;（2）,可以给父级指定一个上padding值（3），给父级设置overflow:hidden;原创 2019-12-13 20:59:00 · 230 阅读 · 0 评论 -
css之padding的妙用
当我们在设置子元素的时候，尽量不要设置宽度，默认继承父级宽度100%，我们设置padding的时候，不会撑开盒子；但是当我们设置了确切的宽度之后，宽度加上padding，如果大于父级元素的宽，却会撑开盒子。所以尽量不要设置确定的宽度...原创 2019-12-13 20:50:04 · 156 阅读 · 0 评论 -
css之外边距塌陷
当两个相邻元素都有垂直外边距并且连接在一起时，会造成塌陷，例如，上面的元素设置成margin-bottom:20px;下面的元素设置成magrin-top:10px，我们想象中的它俩之间的距离是30px，但是实际只有20px，较小的那个外边距会消失...原创 2019-12-13 20:46:36 · 136 阅读 · 0 评论 -
css三大特性总结
缺少了一项，补充，css具有继承性，继承的权重为0原创 2019-12-12 23:18:01 · 120 阅读 · 0 评论 -
媒体查询
@media screen and (min - width:768px) and (max-width : 960px){代码在里面写， 会进行样式的覆盖}media 查询 screen 屏幕min-width 最小宽度 max-width 最大宽度原创 2019-12-09 15:28:01 · 102 阅读 · 0 评论 -
CSS中link 和@import的区别
1.@import是css提供的语法规则，而link是html的标签，link不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等2.加载顺序有差别,link引入的css将在加载页面的时候被同时加载，而@import引入的css将在页面加载完成之后被引用3.@import是css2.1之后才出现的，所以较低版本的浏览器加载不出来，而link可以被所有浏览器加载4.可以通过 JS...原创 2019-12-07 14:31:39 · 440 阅读 · 0 评论 -
px和em和rem的区别
1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。3、而rem不同，rem是相对于根元素htm...原创 2019-12-07 14:23:41 · 8883 阅读 · 0 评论 -
css3新增伪类
属性值含义p:first-of-type选择的是p元素的父级里子级的第一个p元素p:last-of-type选择的是p元素的父级里子级的最后一个p元素p:only-of-type选择的是p元素的父级里子级中只有一个p元素的元素,大于一个p的不选，有其他元素的可选p:only-child选择的是p元素的父级里只有一个p元素的元素p:nth-chil...原创 2019-12-07 14:13:32 · 138 阅读 · 0 评论 -
css3动画效果属性
1、transition： 平衡过渡transition简写属性，transition{transition-property，transition-duration，transition-timing-function，transition-delay}transition-property属性值含义all所有none没有属性property定义应用过...原创 2019-12-07 10:31:46 · 262 阅读 · 0 评论 -
样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块
样式的层级关系为了书写的美化，比如说ul 和li ，可以ul{}，li{}，也可以ul li{}，推荐使用后者选择器优先级！important>id选择器>类选择器>标签选择器,样式遵循就近原则，遵循后载入原则样式冲突遵循上面抽离样式模块{padding: 0; margin: 0;}不建议使用，因为通配符要把所有的元素都遍历一遍，增加了浏览器的负载body,...原创 2019-12-07 10:03:43 · 535 阅读 · 0 评论 -
position和dispaly的用法
position和dispaly的用法positionstatic:默认值，没有定位relative:没有脱离文档流，相对于原来它的位置做定位,原本占据的空间依然会保留absolute:绝对定位，相对于离它最近的做过定位的祖先元素做定位。或者相对于html元素做定位fixed:绝对定位，相对于浏览器窗口做定位，当页面滚动，它的位置不变sticky：它的行为就像 position:rel...原创 2019-12-07 09:49:56 · 345 阅读 · 0 评论 -
如何保持浮动层水平垂直居中
如何保持浮动层垂直水平居中1、display: flex;justify-content:center; /* 水平居中 */align-items:center; /*垂直居中*/原创 2019-12-07 09:18:34 · 200 阅读 · 0 评论 -
css弹性布局
css弹性布局display：flex是一种弹性布局方式，意思是让盒子保持最大的灵活性，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。1.flex-direction属性决定项目的方向,默认横向排列属性值描述row默认值，横向排列row-reverse横向排列，但与row相反column垂直排列co...原创 2019-12-07 09:00:26 · 472 阅读 · 0 评论 -
关于清除浮动
关于清除浮动一、为什么要浮动我个人认为是为了页面的美观，方便布局，但是浮动是把双刃剑，有利也有弊二、什么时候需要清除浮动很多种原因。1.如果父元素没有设置高度，而子级元素设置了浮动，这样会导致父元素高度的坍塌。2.导致背景不能显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。3.浮动会导致父级子级之间设置了padding，导致了属性不能正常传达，导致margi...原创 2019-12-06 23:43:04 · 98 阅读 · 0 评论 -
css的绝对定位和相对定位
css的绝对定位和相对定位position有四个重要的值，static默认值，absolute和fixed统称为绝对定位,relative是相对定位一、relativerelative是相对定位，意思就是相对于原来的位置移动了，元素设置了此属性之后仍然处在文档流（文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的...原创 2019-12-06 23:18:41 · 117 阅读 · 0 评论 -
css盒模型的讲解
css盒子模型css盒模型本质上就是一个盒子，它包括外边距，边框，内边距，实际内容margin 外边距 外边距是透明的border 边框padding 内边距content 内容盒子的宽 = 左外边距+边框*2+左内边距+内容+右边距+右外边距盒子的高，同理亦之切记，此处在ie较早版本有兼容问题...原创 2019-12-06 22:48:44 · 129 阅读 · 0 评论