![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSS基础
Fade Away
这个作者很懒,什么都没留下…
展开
-
父元素下的奇数偶数元素选择器[nth-child-odd/even]
table tr:nth-child(odd):hover{background:gainsboro}table tr:nth-child(even):hover{background:greenyellow}原创 2019-03-12 09:18:35 · 1926 阅读 · 0 评论 -
清除本元素的float效果
float:none即可去除本元素的浮动效果在响应式布局可能会对ul下的li设置不同样式有的时候需要横着显示[float]有的时候需要独占一行[float:none]原创 2019-03-11 11:29:07 · 345 阅读 · 0 评论 -
各种各样的块级元素
1.内联块级元素有宽高属性,但是不独占一行 典型 img2.普通的块级元素默认独占一行,可以设置宽高,但是依然独占一行典型div下面的元素就很特别了先看一下这个下面的顺序是指在无父子级关系的情况的排列顺序这是元素层叠顺序图,相当于住房子一样,后来者居上,从层叠上下文到正z-index,层叠上下文是1楼的,正index式7楼的,从楼顶坐电梯往下,先到7层,再依次到1层,可以看到...原创 2019-03-10 20:24:54 · 454 阅读 · 0 评论 -
搜索栏的元素float关系
布局:outer父容器search icon right可以是用margin - 调整位置但是inb却不能调整,有可能是父元素宽度原因,课程上的宽度比较大,自己设置的是正好的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Doc...原创 2019-03-30 11:19:03 · 130 阅读 · 0 评论 -
移动端文本多行省略
.ellipsis2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orinent:vertical;}原创 2019-03-14 10:41:58 · 279 阅读 · 0 评论 -
移动端横向滚动条
先上代码&lt;div class="container "&gt; &lt;div class="box"&gt; &lt;div class="content"&gt; &lt;/div&gt; &lt;div原创 2019-03-13 21:42:44 · 1372 阅读 · 0 评论 -
CSS画三角形【border-width】
<style> .triangle_border_up{ width:0; height:0; border-width:30px 30px 30px 30px; border-style:solid; border-color:red gold green hotpink;/*透明 透明 灰*/ margin:40px auto;...原创 2019-03-13 09:36:31 · 575 阅读 · 0 评论 -
关于制作与文字等高和低于文字的border
和文字等高的border设置line-height === font-size先了解一下行高的测量行高是以文字中心为准,向两侧扩展,行高小于字号,也是可以的,看图*************,这里很重要line-height = 0制作高度小于文本高度的边框tips:对于块级元素,未设置高度时,如果内部有内联元素,空的内联元素也行,块级元素高度等于行高tips:当块级元素有高度...原创 2019-03-12 21:31:07 · 926 阅读 · 0 评论 -
CSS3 calc rem [css的计算器]
html{font-size: calc(100vw/7.5);} /* 每一个像素的vw 50px 就乘以这个1vw */ body{font-size: .24rem;}1vw 是屏幕的百分之一100vw/7.5 = 1rem[相对根元素html的度量单位]后面的数据都除以了100,相当于除以了750,实际使用像素是750,也就是每一个像素是100vw/750,再将实际测得的像素*re...原创 2019-03-12 15:22:36 · 1118 阅读 · 0 评论