前端(HTML/CSS)
文章平均质量分 51
html&css little keys
陌上寒山
这个作者很懒,什么都没留下…
展开
-
外边距合并问题
1.外边距合并外边距合并指的是:当两个(垂直外边距)相遇时,它们将合并成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大的那个。2.发生合并的几种情况父子元素之间当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。解决办法:方法一:给父元素的overflow属性设置为hidden。方法二:给父元素添加border属性;方法三:给父元素设置内边距(padding);兄弟元素之间当一个元素出现在另原创 2021-01-02 18:09:33 · 756 阅读 · 0 评论 -
CSS3——2D、3D变换
2Dtransform: none|transform-functions;transform-origin: x y ;------设置变换中心。(x,y可以是像素值、百分比或方位名词–均是相对于自身左上角为起点而言)一、位移//平移transform: translate(x, y);transform: translateX(n);transform: translateY...原创 2020-02-24 22:47:12 · 155 阅读 · 0 评论 -
CSS3三类选择器
1.属性选择器选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择att属性为val的E元素E[att^=“val”]匹配att属性开头为val的E元素E[att$=“val”]匹配具有att属性、且其值以val结尾的E元素E[att*=“val”]匹配具有att属性、且值中含有val的E元素E[att~=“va...原创 2020-02-24 16:22:40 · 180 阅读 · 0 评论 -
HTML、CSS小技巧三——图片、精灵图、溢出文字省略号显示、滑动门技术、margin负值、CSS三角形
去除图片底侧空白缝隙产生原因:图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。解决方法给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。给img 添加 display:block; 转换为块级元素就不会存在问题了。精灵图(雪碧图)即将网页中的一些背景图像整合到一张大图中(精灵图)有效地减少服务器接受和发...原创 2020-02-19 19:04:13 · 312 阅读 · 0 评论 -
HTML、CSS小技巧二——CSS清除浮动
为什么要清除浮动?因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,这样的话,后面标准留的盒子就会跑到浮动的元素下面去,影响布局。清除浮动的方法额外标签法(隔墙法)在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>优点:通俗易懂,书写方便缺点:添加许多无意义的标签,结构...原创 2020-02-19 16:40:54 · 89 阅读 · 0 评论 -
HTML、CSS小技巧一 零碎(持续更新)
文字块级标签中最好不要放其他块级元素例如:h1-h6等清除轮廓线(开发中默认将所有轮廓线都清除)outline:0/none;去掉button自带边框button{ border:none }禁止拖拽文本域resize:none;...原创 2020-02-19 15:50:54 · 98 阅读 · 0 评论