css
关注
分享
扫一扫
jarisMA
这个作者很懒，什么都没留下…
展开
-
css实现缺角div
css实现缺角div<div class="block"></div>方法一：伪元素实现用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方eg: .block{ width: 120px; height: 60px; background: yellow; position: relative; } .block::before{ position: absolute; right: 0;原创 2020-05-09 11:22:49 · 2375 阅读 · 0 评论 -
css选择器
css选择器一、基本选择器*选择所有元素。E选择对应标签的元素。.class选择对应类名的元素。#id选择对应id的元素。E F选择E元素内部所有F元素。E > F选择E元素的所有直接子元素中的F元素。E + F选择紧跟着E元素之后的相邻兄弟节点F元素。E ~ F选择跟着E元素之后的所有兄弟节点中的F元素。二、属性选择器...转载 2019-12-24 18:09:37 · 169 阅读 · 0 评论 -
解决inline-block中间缝隙
解决inline-block中间缝隙本质：inline-block中间缝隙的本质是html中存在的空白字符（inline-block标签之间的回车符）举例：li { display: inline-block; background-color: red;}<ul> <li><a href="#">登录</a></li&...原创 2019-12-20 16:10:22 · 397 阅读 · 0 评论 -
清除浮动
清除浮动清除浮动，预防高度塌陷。举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-12-20 12:28:46 · 169 阅读 · 0 评论 -
css实现隐藏滚动条
css实现隐藏滚动条转载链接1.伪对象选择器::-webkit-scrollbar{ display:none;(或者是width: 0;)}2.变相隐藏大体思路：在div(outer)外面再套一个div(inner);div(outer)设置overflow:hidden;div(inner)设置overflow-y: scroll;div(outer)小于div(inn...转载 2019-08-29 10:12:48 · 338 阅读 · 0 评论 -
纯css实现箭头
纯css实现箭头发布时间：2018-04-10 15:11:21原理：通过伪元素绘制出的两个三角形，一个与背景色相同覆盖部分红色箭头，形成三角线span.arrow-down { position: relative;}span.arrow-down:after,span.arrow-down:before { border: 8px solid transparen...原创 2019-08-28 10:09:04 · 372 阅读 · 1 评论 -
元素水平垂直居中
元素水平垂直居中发布时间：2018-03-21 15:28:061.使用flex布局html,body{ height: 100%; margin: 0;}body{ -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-...原创 2019-08-28 10:07:36 · 196 阅读 · 0 评论 -
20个常用的CSS技巧
20个常用的CSS技巧1.黑白图像这段代码会让你的彩色照片显示为黑白照片img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -mz-filter:grayscale(100%); -o-filter:grayscale(100%);...转载 2019-08-28 09:55:21 · 154 阅读 · 0 评论 -
box-shadow实现四周阴影
box-shadow实现四周阴影发布时间：2018-01-27 17:20:22div{ width:250px; height:250px; background:greenyellow; box-shadow:black 0px 0px 10px;//将h-shadow,v-shadow设为0px,实现四周阴影}效果图...原创 2019-08-27 18:03:23 · 24405 阅读 · 0 评论 -
CSS的兄弟选择器 + 和 ~ 的区别
CSS的兄弟选择器 + 和 ~ 的区别发布时间:2018-01-19 14:30:59<div> <p>这是个ul同父元素的第一个p<p> <ul> <li>这是第一个li。</li> <li>这是第二个li。</li> <li>这是第三个li。</li> ...原创 2019-08-27 17:59:13 · 713 阅读 · 0 评论 -
Bootstrap的下拉菜单被挡住
Bootstrap的下拉菜单被挡住发布时间：2018-01-17 13:19:57代码<div class="range"> <div class="dropdown" style="float:right"> <button class="btn btn-success" type="button" data-toggle="dropdown" aria...原创 2019-08-27 17:55:17 · 6661 阅读 · 0 评论 -
网页布局
网页布局CSS中存在3中定位机制：标准文档流（Normal flow）浮动（Floats）绝对定位（Abosulte positioning）一、标准文档流特点：从上到下，从左到右，输出文档内容。由块级元素和行级元素组成。1.块级元素特点：从左到右撑满页面，独占一行。触碰到页面边缘时，会自动换行。如：div,ul,li,dl,dt,p······2.行级元素...原创 2019-08-27 17:36:27 · 151 阅读 · 0 评论 -
!important
#!important!important的css定义拥有最高的优先级，既相当于让其样式放在离元素最近的地方（最下面）。1.对IE7-10和firefox、chrome均有效2.但其中IE6只能这样写才有效（不支持同一定义中的!important）：eg:a{ color:blue !important;/*color:blue;(无效)*/ color:red;/*color:re...原创 2019-08-27 16:44:35 · 924 阅读 · 0 评论