![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css学习
in_motion
程序员中猿
展开
-
html引入字体的方法归纳
目前有三种方式:1、内联:在HTML标签内用style属性添加CSS,如:字体大小为12像素2、外联:在HTML的head区块内用...标签来添加CSS,如: .zt {font-size:12px}字体大小为12像素3、导入或链接:把CSS放入单独的文件,然后通过Import或Link连接到HTML内,如:@Import url("main.css");或转载 2017-07-19 15:45:07 · 4148 阅读 · 1 评论 -
block,inline和inline-block概念和区别
block,inline和inlinke-block细节对比display:blockblock元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。display:i转载 2017-10-10 16:11:35 · 247 阅读 · 0 评论 -
html <div>标签内背景图片自适应div大小
只需通过css设置background-size属性为contain,即background-size:contain注意:一定要在先设置background之后再设置background-size属性,这样才有效原创 2017-10-29 14:41:58 · 103504 阅读 · 5 评论 -
行内元素细分——行内置换元素和非行内置换元素
以前有个误解:行内元素没有宽高。后来在开发项目时突然发现<img>是行内元素,而它恰恰可以设置宽高。查阅资料后发现如果一个行内元素同时也是置换元素(展示内容由其属性决定),它也就可以定义宽高了。...转载 2018-06-22 21:36:42 · 292 阅读 · 0 评论 -
由BFC导致的display:inline-block的特殊性
入门了前端的应该都知道inline-block是以内联块级特性,即该元素既具有块状元素的盒子模型又具有内联元素的不独占一行特性。于是结论认为inline-block和block除了不独占一行外其余特性皆相同。然而,事实并非如此纯粹简单,inline-block还具有一些细节特性,不求甚解有时会阻碍我们的布局。目前在项目实践中积累了两个细节:1.inline-block虽然具有盒子模型,但是marg...原创 2018-06-23 20:28:23 · 1012 阅读 · 0 评论 -
html文字溢出显示省略号
直接上代码: overflow: hidden white-space: nowrap -ms-text-overflow: ellipsis text-overflow: ellipsis原创 2018-06-23 21:33:09 · 685 阅读 · 0 评论 -
overflow:hidden对于溢出到padding的内容不隐藏
盒子模型的内容区域其实包括content+padding,即padding box,虽然正常情况下元素只在content内排布,但是当内容溢出到padding也是允许的,故overflow:hidden对此不做影响。利用这个特性,我们可以使用div的padding为图片占位,防止图片加载出现抖动现象:<div class="wrapper"> <img ...原创 2018-06-24 20:35:12 · 11042 阅读 · 0 评论 -
CSS3的background-size属性
以前前端开发时写过一篇html 标签内背景图片自适应div大小,用到了background-size属性,其实也就停留在刚好用来“救急”的地步,并未仔细了解。其实background-size属性是个CSS3属性,IE9+才支持,自己做做小项目就罢了,在大公司需要考虑兼容性的情况下随手就用往往弄巧成拙。他还有五个不同取值——默认值auto、length、percentage、cover、con...原创 2019-03-28 16:56:00 · 513 阅读 · 0 评论