CSS
文章平均质量分 66
白驹过隙 不忘初心
今天也是爱大大的一天吖
这个作者很懒,什么都没留下…
展开
-
margin-top溢出问题及解决方式(对父元素进行操作)
最近写页面碰到的问题,给<body>的子元素<div>设置了一个margin-top:10px;,却出现了下面的效果代码如下:<--css-->*{ margin: 0; padding: 0; } div{ width: 100%; height: 100%; margin:10px 0 0 0 ; background:skyblue; } <--html--><body> <di原创 2021-01-28 15:30:42 · 1301 阅读 · 0 评论 -
CSS实现三栏布局的五种方式
公用html:<article class="main"> <div class="left">左</div> <div class="center">中<br><br><br><br><br><br><br><br>中</div> <div class="right">右</div></article>原创 2020-11-05 10:12:33 · 826 阅读 · 1 评论 -
CSS3 border-radius:50%和100%为什么效果相同 有什么区别
转载的原文链接 之前写css圆形时总是直接设置border-radius为50%。后来看某css动画网站时发现作者都是用的100%。遂去了解了一下2者的差别。border-radius的值是百分比的话,就相当于盒子的宽度和高度的百分比。我们知道在一个正方形内做一个面积最大的圆形,这个圆的半径就为正方形边长的一半。所以border-radius为50%时,则会形成圆。那么可能有人就会问,border-radius为100%时,对应圆的半径长度不就是正方形的宽高么,这种情况下,为什么还是会形成一个和值为5转载 2020-06-09 11:16:49 · 625 阅读 · 0 评论 -
CSS3 border-radius属性 单位px和%的区别
border-radius 属性给元素添加圆角边框最多可指定四个border-*-radius属性(border-radius 属性是个复合属性)语法border-radius:(1-4个) length | %;每个半径的四个值的顺序是:左上角、右上角、右下角、左下角。以%为单位的值的参考对象以length为单位的值是一个明确的值,而以百分比格式为单位的值必须有一个参考对象,那么这个参考对象会是什么?下面举个范例。设置4个宽高相同,border-radius属性值相同的div。第一个di原创 2020-06-09 10:31:43 · 1255 阅读 · 0 评论 -
CSS3 @keyframes规则和animation属性实现动画效果
@keyframes规则定义使用@keyframes规则,可以创建动画,通过逐步的改变,从一个CSS样式到另一个CSS样式。设置指定时间点的变化时使用%,或使用关键字‘from’和‘to’(与from和to相应的是0%和100%)。语法@keyframes animationname { keyframes-selector{ css-styles; }}值说明animationname必需的。定义animation属性的名称。keyframes-selec原创 2020-06-08 18:00:41 · 4957 阅读 · 0 评论 -
CSS :after伪类选择器--文本到底添在哪儿
:after选择器向选定的元素之后插入内容。使用content属性来指定要插入的内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></hea原创 2020-06-08 15:58:34 · 235 阅读 · 0 评论 -
CSS overflow属性
定义overflow属性规定当内容溢出元素框时该如何处理。属性可能的取值值描述visible默认值 内容不会被修剪,会呈现在元素框之外hidden内容会被修剪,并且其余内容不可见scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容inherit规定应该从父元素继承overflow属性的值1.overflow:visible(默认值)<style> di原创 2020-06-08 15:18:58 · 476 阅读 · 0 评论 -
CSS3的新单位vw、vh、vmin、vmax
vw、vh、vmin、vmax的含义(1)vw、vh、vmin、vmax是一种视窗单位,也是一种相对单位。它们相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位1,代表类似于1%。视窗(Viewport)是你的浏览器实际显示内容的区域(不包括工具栏和按钮的网页浏览器)。(2)具体描述:vw:视窗宽度的百分比(1vw代表视窗的宽度为1%)vh:视窗高度的百分比vmin:当前vw和vh中较小的一个值vmax:当前vw和vh中较大的一个值vw和vh与%百分.转载 2020-06-08 12:41:48 · 1245 阅读 · 0 评论 -
CSS如何消除列表每个li之间的行间距
需要得到解决的页面效果可以看到列表的每一行之间都有小小的间隙解决方法:设置ul样式font-size: 0;设置li样式font-size: xxxpx;即可解决 解决问题后的页面效果如下原创 2020-05-25 10:42:34 · 1461 阅读 · 0 评论