CSS
文章平均质量分 56
这是CSS的持续学习
行之所致
纸上得来终觉浅,绝知此事要躬行。
展开
-
unset,inherit,initial,auto的区别是什么?
unset,inherit,initial,auto的区别是什么?1: 问position属性有多少取值?通常的回答是static、relative、absolute和fixed。当然还有一个sticky。其实,除此之外,CSS属性通常还可以设置下面几个值:unset, inherit, initial;1: unset是关键字initial和inherit的组合。如果该属性是默认继承属性,该值等同于inherit如果该属性是非继承属性,该值等同于initial换句话说这个unset关原创 2021-03-07 00:18:10 · 701 阅读 · 0 评论 -
伪类和伪元素区别;
注意: 由::before 和::after 生成的伪元素 包含在元素格式框内, 因此不能应用在替换元素上, 比如或 元素。CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。<!-- CSS中,::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。--><!-- 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。-->/* Add a heart ..原创 2020-11-25 22:28:14 · 298 阅读 · 0 评论 -
bootstrapv4.5.2(栅格系统)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { m.原创 2020-11-15 12:11:02 · 179 阅读 · 0 评论 -
如何隐藏滚动条,同时具有滚动的功能,(同时兼容pc端和移动端浏览器)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { ma原创 2020-11-11 13:47:12 · 619 阅读 · 1 评论 -
bootstrapv3.37源码(响应式工具)
visible-* (常用类)visible-xsvisible-smvisible-mdvisible-lg.visible-xs,.visible-sm,.visible-md,.visible-lg { display: none !important;}/* 屏幕小于767px,显示元素 */@media (max-width: 767px) { .visible-xs { display: block !important; }}/* 屏幕在76.原创 2020-11-08 10:41:18 · 325 阅读 · 0 评论 -
bootstrap4.0中container容器
.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl { /* 初始样式 */ width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}/* 屏幕大于576px,container的最大宽度为540px; */@media .原创 2020-11-08 09:40:50 · 693 阅读 · 0 评论 -
bootstrap中的@media媒体查询
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> &l原创 2020-11-05 13:26:41 · 1420 阅读 · 1 评论 -
css transform导致像素模糊的问题解决办法
方法1: 使用flex布局,居中元素;(推荐)方法2: transfrom:translate(calc(-50%+ 0.5px),calc(-50% + 0.5px)); 用calc函数;原创 2020-10-29 16:59:38 · 784 阅读 · 0 评论 -
阿里矢量图标库
第一步: 定义字体 -> 推荐使用在线字体@font-face { font-family: 'iconfont'; /* project id 1072741 */ src: url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.eot'); src: url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.eot?#iefix') format('embedded-opentype'), url原创 2020-07-11 16:58:09 · 311 阅读 · 0 评论 -
less css预处理语言
// 在平时工作中,我们就可以把 常用的变量// 封装到一个文件中,这样利于代码组织维护。// --- 属性值变量 ---//// color@base: #f938ab;// font-size@ft14: 14px;// margin@mr10: 10px;@mr20: 20px;@mb10: 10px;@mt10: 10px;// border@bd1: ...原创 2020-08-20 16:37:57 · 549 阅读 · 0 评论 -
紧贴底部的页脚footer常用解决方案
问题描述:当页面内容的高度 < 视口的高度 - 页头的高度(header) - 页脚的高度(footer) 就会出现footer页面不不会紧贴在视口的最底部,而是跟在内容的下方。**解决方案一: ** 采用一个视口相关的长度单位 vh/vw 和 calc函数<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view原创 2020-07-08 23:41:42 · 576 阅读 · 0 评论 -
Reset CSS和Normalize CSS的作用和区别
作用:Reset CSS和Normalize CSS都是重置浏览器自带样式。区别:reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。normalize 的理念则是尽量保留浏览器的默认样式,不进行太多的重置。Normalize.cssNormalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normal原创 2020-07-04 10:44:00 · 2456 阅读 · 0 评论