html css零碎收集...

border大法无敌

1.当文字超出时,如何显示...

white-space: nowrap;  //不折行显示
overflow: hidden;        //超出隐藏
text-overflow: ellipsis;  //文本超出变为省略号

2.white-space: pre //会保留输入过程中的空格,输入多个空格后不会只转化为一个空格

3.如何去除checkbox和radio的默认输入框

visibility: hidden;

4.outline: 0 清除button选中时的边框

5.当鼠标移动上去时实现发大功能,利用transition和transform:scale(2,2)//放大2倍

6.border-collpase;//将表格变为一个单一的边框

7.box-shadow: 5px 5px 5px #ccc;//数字分别表示x轴偏移,y轴偏移,阴影模糊度,颜色

8.background相关
background-attachment:fixed;//表示背景图片固定在浏览器中的某个位置,不随滚动条滚动
background-size:cover;//完全覆盖背景区域
background-size:contain;//适应背景区域

9.cursor: pointer;//改变鼠标的样式 详见cursor

10.box-shadow: 0 0 10px 5px black inset;//前两个表示xy轴的偏移量,当设置为0的时候四边都有阴影,第三个值指的是阴影的模糊距离,第四个值指的是模糊尺寸,inset值阴影产生在盒子内部。

11.设置paddiing上下距离为某个值可以实现垂直居中
transform: translate(-50%,-50%);实现垂直居中(自适应)
例子: 垂直居中

12.伪元素实现垂直居中
.xxx:before {
content:''
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.要居中的元素 {
display: inline-block;
vertical-align: center;
}

13.width和max-width的区别:
width:500px; //当浏览器缩小到小于500px时会出现滚动条
max-width:500px; //当浏览器缩小到小于500px时不会出现滚动条

14.对于inline-block的缝隙问题 先对其父元素font-size设置0,再对子元素设置font-size就可以消除间隙

15.b标签和strong标签的区别两者在实现的效果上是一样的,但是b标签仅仅是指bold加粗没有其他语义,而strong标签着重表示强调,可以给strong改变样式为下划线来强调内容

16.font-weight: 700 相同与font-weight: bold;

17.如何实现满屏 body,html都设置height:100%,再在需要满屏的元素上设置100%

18.当要使用hover属性来显示字体图标时,不要使用伪元素而是使用实体标签来替代,

19.当border-radius无效时,可能是子元素的背景遮盖了圆角,此时在父元素上加overflow:hidden可解决

20.transition属性实现渐变效果:
1.设置初始状态如: background-color: #FFF;
2.设置transition: background-color 0.5s ease 0.2s; //从左到右依次为要改变的属性 几秒后达到目标值 (ease规定慢速开始,然后变快,然后慢速结束的过渡效果) 延迟0.2s执行
3.设置目标属性值 如 div:hover {background-color: #666}
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

21.z-index:-1;让一个层在所有层下当背景

22.text-align和float并不冲突

23.使用opacity做透明度时,子元素也会继承opacity,解决方法:使用rgba

24.去除h1标签的加粗为font-weight: normal;而不是none或者0 //这两者都无效

25.对于a标签的默认颜色color: inherit;可以解决

26.有关rgba和opacity的区别:
前者只设置了背景色,当包含块中有内容时,内容并不会透明,而opacity可以继承给后代元素,后代也会透明

27.user-select: none;用户将无法选中文字

28.loading效果

.xxx {
  width: 100px;
  height: 100px;
  border: 20px solid green;
  border-radius: 50%;
  border-top: 20px solid red;
  animation: 1s infinite linear  round ;
}
@keyframes round {
  from{
      transform: rotate(0)
  }
  to{
    transform: rotate(360deg)
  }
}

29.设置flex和绝对定位四个方向都设置为0,通常用来做垂直居中的dialog

.xxx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

30.表单的autofoucus表示自动获取焦点

31.有关几种请求的Method
(1) get '/users' 获取某个用户的数据
(2) get '/users/id' 获取某个用户的id
(3) post '/users' 新增数据
(4) patch/put '/users/id' 更新某个用户的数据
(5) delete '/users' 删某个用户的数据

31.~的用法
w3School

32.css往复动画 alternate

33.cc:ie用来解决ie兼容性 browserhacks

伪元素伪类大全
flex布局

34.osi七层模型
从上到下依次是 应用层 表现层 会话层 传输层 网络层 数据链路层 物理层

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,722评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,298评论 0 11
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,384评论 0 5
  • 其实我一早就想讨论关于敏感孩子的教育问题,但我一直想等我遇见的这个女孩情况有所好转。现在我终于可以写写这个话题了。...
    阿宝的育儿宝典阅读 340评论 1 4
  • 朝花夕拾(2) 我小时候的生话确定不能和现在的小孩子相比,能够用于吃喝玩乐的东西很匮乏。 先说吃,印象最深的一种零...
    思缘阅读 227评论 0 0