css/html
文章平均质量分 68
css/html相关
u010565037
这个作者很懒,什么都没留下…
展开
-
CSS 文字多行单行省略及悬浮提示
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果。如上三句是关键代码,文字不换行, 没有overflow:hidden 文字会溢出,那么text-overflow属性自然没有作用。给元素设置title属性, title属性的值会作为冒泡提示出现。使用-webkit-line-clamp: n 来固定n行展示。多行行文字省略及提示。转载 2023-01-04 11:46:03 · 748 阅读 · 0 评论 -
flex实现:上下两个div,一个固定高度,另一个填满剩余高度
1.flex<div class="parentDiv"> <div class="childDiv1"></div> <div class="childDiv2"></div></div>.parentDiv{ border:1px solid black; width:100%; height:800px; display:flex;.原创 2020-09-15 10:58:26 · 5791 阅读 · 0 评论 -
CSS外边距合并(塌陷/margin越界)
大纲 1、什么是外边距合并?(折叠外边距) 2、外边距带来的影响 3、折叠的结果 4、产生折叠的原因 5、出现的情况1、什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而左右外边距不合并。 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。转载 2020-08-13 09:42:10 · 391 阅读 · 0 评论 -
css样式笔记tips
1.清除浮动清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题2.box-sizing 属性可以被用来调整这些表现:content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box告诉浏览器:你想要设置的边框和内边距的值是包含在w...原创 2020-03-06 23:20:51 · 191 阅读 · 0 评论 -
设置height百分比生效
css样式当height设置百分比时存在不生效的情况当你设置元素height为百分比时,此元素的父元素及其以上均为设置高度,此时的这个height设置则无效要使其生效,在其父元素设置高度,或设置html{height:100%}即可解决...原创 2019-04-12 15:05:26 · 264 阅读 · 0 评论 -
双飞翼布局和圣杯布局的对比
在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多,那么有没其他方法更加简洁方便呢?在淘宝UED探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局。DOM结构:main内层增加了一个divdiv class="header">Headerdiv>div c转载 2016-11-01 16:43:30 · 292 阅读 · 0 评论 -
纯Css实现三角形
这是一个普通的 div ,一个边长为 100px 的正方形,border 宽度为 10px, 没有任何技术含量,地球人都会画。我们知道 border 是分为 top、right、bottom、left 的,那么这个矩形的四个边是怎样划分的呢?显然,要想公平地分割四条边框,只有这样:<img src="https://pic4.zhimg.com/05转载 2016-12-25 21:46:06 · 383 阅读 · 0 评论 -
用CSS实现布局(两栏布局,多栏布局)
在网页上的布局比较经典的是两栏布局和三栏布局。两栏布局两栏布局是主内容区为主,左(右)侧有一栏,代码如下: style> #header, #footer{ height: 100px; background: red; } #content转载 2017-02-17 21:39:45 · 6028 阅读 · 0 评论 -
前端——水平垂直居中
水平垂直居中的实现方法,网上一搜少说有七八种,这里只总结三种,作为自己后续面试以及实践的知识储备。方法一:绝对定位+margin:auto实现#father{ width: 200px; height: 200px; background: #ccc; position: relative;}#son{ width: 100px;原创 2017-02-17 22:11:03 · 446 阅读 · 0 评论 -
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一、浮动产生原因 - TOP一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。转载 2017-02-09 19:27:33 · 177 阅读 · 0 评论 -
CSS样式-清除元素浮动
浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。 清除浮动的方式有以下几种。1.使用clear:both清除浮动示例1:使用div原创 2017-02-19 18:15:32 · 339 阅读 · 0 评论 -
CSS3新特性
在项目开发中我们采用的CSS3新特性有 1.CSS3的选择器1)E:last-child 匹配父元素的最后一个子元素E。2)E:nth-child(n)匹配父元素的第n个子元素E。 3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。2. @Font-face 特性Font-face 可以用来加载字体样式,而且它还能够加载服务器端的转载 2017-03-06 20:19:04 · 345 阅读 · 0 评论 -
CSS常见布局问题整理
实现div的水平居中和垂直居中多元素水平居中实现栅格化布局1. 实现div的水平居中和垂直居中实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来主要思路其实就是使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高))使用flex属性使用tranfrom做相对位移的调节转载 2017-03-23 17:48:17 · 341 阅读 · 0 评论 -
圣杯布局的实现过程
圣杯布局和双飞翼布局,他们的都要求三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染,而双飞翼布局是对圣杯布局的一种改良,下一篇文章会讲到。圣杯布局:用到浮动、负边距、相对定位,不添加额外标签DOM结构:div class="header">Headerdiv>div class="bd"> div class="main"转载 2016-11-01 16:42:32 · 350 阅读 · 0 评论