CSS
Elvira_D
这个作者很懒,什么都没留下…
展开
-
2021-01-19
css calc踩坑记录在写样式的时候经常会使用calc()函数,但是在less中发现,明明写的width: calc(100%- 20px),打包编译之后样式变成了这样,width: 80%,这样,与我们的预期不符。解决办法:用~阻止less编译,进而确保calc计算表达式正确性。示例:width: calc(~'100%- 20px')...原创 2021-01-19 10:55:19 · 74 阅读 · 0 评论 -
页面吸底效果
1. bottomBar组件设置一直吸底(显示在屏幕底部)。特别注意,对于iPhone X需要在底部加长距离。1)设置吸底,使用position: fixed; 固定于页面底部,但页面划到底部,页面部分内容会被固定定位组件遮挡。解决方式:① 划动页面高度设置长一点② 页面高度不定,可以在页面最底部加一个空的div撑开页面的高度。2)判断是否为iPhone X,底部加长距离加判断...原创 2019-08-22 17:29:00 · 4234 阅读 · 0 评论 -
CSS-opacity子元素继承父元素透明度的解决方法
在写项目页面的过程中,遇到子元素继承父元素透明度的问题,查找了好多文档给出的都是第一种方法,这种方法主要解决简单场景的,而对于设置复杂的background时,该方法不再适用。分析原因:父元素背景颜色设置透明度opacity:0.5,子元素会继承,给子元素设置opacity:1,子元素的透明度也是在父元素0.5的基础上设置的。第一种方法:父元素背景颜色设置透明度时,避免使用back...原创 2019-08-12 20:08:02 · 3768 阅读 · 1 评论 -
css布局--圣杯&双飞翼
圣杯布局(float + 负margin + padding + position)注意: 三者都设置向左浮动。 设置grail_main宽度为100%,设置两侧栏的宽度。 设置 负边距,grail_left设置负左边距为100%,grail_right设置负左边距为负的自身宽度。 设置grail的padding值给左右两个子面板留出空间。 设置两...原创 2018-09-03 16:52:15 · 147 阅读 · 0 评论 -
使用border属性绘制三角形、五角星、心形
1. 绘制三角形<p>直角三角形</p><section class="triangle1"> <style> #triangle1 { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 50px solid re...原创 2018-09-03 10:37:15 · 1728 阅读 · 0 评论 -
实现高度,左右宽度已知,中间自适应的三栏布局的5种方法
实现方式:float 绝对定位 flexbox布局 table grid网格布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏自适应布局</title> <style t原创 2018-08-24 10:58:47 · 440 阅读 · 0 评论 -
实现左边定宽,右边自适应布局的几种方法
HTML结构<div class="twocol"> <div class="left">left</div> <div class="right">right</div></div>CSS样式* { margin: 0; padding: 0;}原创 2018-08-23 10:38:15 · 373 阅读 · 0 评论 -
利用CSS绘制哆啦A梦
最近在复习CSS,刚好看到box-shadow属性,这个属性还是蛮强大的,可以绘制一些奇奇怪怪的东西,所以就参考资料简单的绘制了一个哆啦A梦,效果如下:Doraemon代码链接:Doraemon.html ...原创 2018-07-19 10:00:06 · 608 阅读 · 0 评论 -
CSS Sprites
CSS Sprites1.简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。2.优点(1)CSS Sprites能很好地减...转载 2018-05-03 21:31:01 · 81 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-right、mar...转载 2018-04-15 10:30:29 · 219 阅读 · 0 评论