css教程
关注
分享
扫一扫
文章平均质量分 61
老汤前端博客
web前端开发博客专注web前端开发领域！
展开
-
css3伪元素有哪些(两个必会的伪元素)
一.css3伪元素是什么？css3伪元素用于向某些选择器设置特殊效果。已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。比如伪元素 :before和:after，这两个非常常用前端必会，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在css渲染层中加入。<!DOCTYPE html><html><head><meta转载 2022-04-26 08:48:17 · 3879 阅读 · 1 评论 -
css3有哪些新特性?有哪些改进
1.新增选择器p:nth-child(n){color: rgba(255, 0, 0, 0.75)}2.新增伪元素::before和::after3.弹性盒模型display:flex;4.多列布局column-count: 5;5.媒体查询@media (max-width: 480px) {.box: {column-count: 1;}}6.个性化字体@font-face{font-family: BorderWeb;src:url(BOR...转载 2022-04-11 15:59:58 · 4956 阅读 · 0 评论 -
css下拉菜单代码（用纯css实现下拉菜单）
用纯css代码写一个css下拉菜单，二级菜单opacity默认是0，鼠标在一级菜单hover时opacity就是1，opacity从0到1有一个transition过渡时间1秒钟，就实现了css下拉菜单动画缓慢出现效果，具体看下面例子代码。css下拉菜单代码：<style>ul {list-style: none;margin: 0;padding: 0;}ul li a {display: block;text-decorat.转载 2022-04-11 11:04:13 · 6610 阅读 · 0 评论 -
css垂直居中布局的方法
上篇文章说到常见css布局水平居中的方法，前端开发css布局还有垂直居中，也是很常见的布局方法，本文分享3种垂直居中布局的方法，table-cell + vertical-align、absolute + transform、flex + align-items，很常见，很实用。垂直居中布局方法一：table-cell + vertical-align 1 2 ...转载 2019-09-28 15:14:11 · 292 阅读 · 0 评论 -
6种方法实现css布局水平居中
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 ...原创 2019-07-02 10:58:05 · 5367 阅读 · 3 评论 -
详解CSS3中的border-radius样式
border-radius是CSS3中诞生的新样式，它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现；不但臃肿，而且还容易产生布局BUG，不适于自适应框架的书写。1.首先介绍一下语法：border-radius：[<length>|<percentage>]{1,4} [ / [<length>|<...原创 2019-05-22 09:52:33 · 2497 阅读 · 0 评论 -
css两端对齐,用css3多列属性轻松实现
要实现css两端对齐，我在网上找了很多方法，都不怎么实用，都是兼容性闹得，column是css3的属性，是多列布局，使用column来实现两端对齐简单实用，就要设置下模块的个数跟column的列数一致就行，先看它的的3个属性：1.column-count 属性规定元素应该被分隔的列数2.column-gap 属性规定列之间的间隔2.column-rule 属性设置列之间的宽度、样...原创 2018-12-14 17:17:44 · 1149 阅读 · 0 评论 -
这6个css隐藏内容的方法，用过没？
最近有个不同行的盆友问我，怎么把内容隐藏起来，我第一想到了用css的方法隐藏起来，我测试了以下这6中方法是可行，欢迎一起交流下，css的其他方法，我们最常用的应该是display:none就行了，其他5种方法好像有seo作弊的嫌疑，虽然能把内容隐藏起来，但我个人感觉正规网站不提倡使用。1.常用的display:none方法 1 <pstyle="di...原创 2018-12-20 10:54:10 · 1481 阅读 · 0 评论 -
你熟悉css中的这个letter-spacing属性吗？
身为web前端开发人员，我们用DIV+CSS布局时，我们经常用line-height行高这个熟悉，大家肯定熟到家了吧，当height等于line-height时可以垂直居中，但是今天不是说这个。css中的这个letter-spacing属性，你应该知道。1.letter-spacing是什么？就是文字与文字间的间距，值可以负数，默认值normal2.兼容性所有浏览器都支持 le...原创 2019-04-24 17:32:58 · 3400 阅读 · 1 评论 -
大型网站的CSS代码初始化，你见过吗？
大型网站的CSS代码初始化，你见过吗？CSS代码之所以要进行初始化，是因为能尽量减少各浏览器之间的兼容性问题，比如：margin:0;padding:0一般都会去初始化下，今天看下大型网站的CSS代码初始化。1.淘宝官网，CSS代码初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, l...原创 2018-04-11 21:19:05 · 505 阅读 · 0 评论