Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >你不知道的css(三)

你不知道的css(三)

作者头像
2014v
发布于 2019-11-20 06:28:06
发布于 2019-11-20 06:28:06
30400
代码可运行
举报
文章被收录于专栏:2014前端笔记2014前端笔记
运行总次数:0
代码可运行

1.border

  • border-width不支持百分比

2.单位ex(相对字体和字号的单位) 利用ex使图标居中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.icon{
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url() no-repeat center
}

此时调节字体大小,图标都会居中 3.line-height

  • line-height就是内联元素的完全高度;是替换元素前一个空白幽灵节点的高度;块级元素无影响
  • line-height有数值,百分比值,长度值(em),都是相对于font-size计算得来,如果是数值,子元素继承的就是这个数值,而如果是其他,那么子元素继承的就是计算得来的值
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
7个Web前端程序员必须会用CSS技巧
1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时,其是相对父元素的宽度width的而不是我们想象的高度height;
用户5827212
2019/12/11
5070
你不知道的css(二) ----content与替换元素,margin,padding
触发margin:auto的前提条件是对应方向会自动填充,所以一般高度不会自适应,可以使用writing-mode: vertical-lr改变文档流方向,而这样水平方向无法居中,所以需要设置position,将正常流宽度改变成格式化宽度和格式化高度
2014v
2019/11/20
9260
CSS中的vertical-align跟line-height相互作用
其中,有个属性值暴露了vertical-align和line-height之间的基友关系,大家猜猜看是哪个属性值?
javascript.shop
2019/09/04
9230
CSS中的vertical-align跟line-height相互作用
CSS 关于line-height详细讲解
line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。
好吃懒洋洋
2022/11/15
7210
CSS 关于line-height详细讲解
一、前端基础-css-css的属性操作一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:after{ content: "("attr(href)")"; } </style> </head> <body> <!-- css属性操作一 1、颜色属性 2、字体属性 3、背景属性 4、文本属性
堕落飞鸟
2022/02/12
4990
css笔记 - 张鑫旭css课程笔记之 vertical-align 篇
元素vertical-align垂直对齐的位置与前后元素都没有关系 元素vertical-align垂直对齐的位置与行高line-height没有关系。 vertical-align垂直对齐的位置只与font-size大小有关。
xing.org1^
2018/09/20
2K0
css笔记 - 张鑫旭css课程笔记之 vertical-align 篇
Web - CSS3基础语法与盒模型
这篇文章是关于 Web 前端 CSS3 的基础语法与盒模型的讲解。包括 CSS3 层叠性及处理冲突规则、伪元素和新增伪类元素、属性选择器等。还介绍了文本与字体属性,如段落和行相关属性、字体文本属性。最后阐述了盒子模型,如元素隐藏、行内与块元素转换、盒子构成及相关属性等。
stark张宇
2025/02/02
1930
【面试题】104道 CSS 面试题,助你查漏补缺(下)
https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md
pingan8787
2020/11/03
2.6K0
【面试题】104道 CSS 面试题,助你查漏补缺(下)
CSS基础
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 '''         selector {                   property: value;                   property: value;              ...  property: value                     }           ''' 例如: 1 h1 {color:red; font-size:14px
用户1214487
2018/01/24
2.2K0
CSS基础
Css详细介绍
(就近原则): !important > id > class > tag (!important 比内联优先级高)
FGGIT
2024/10/15
1940
css基础系列
border边框,margin外边距,padding内部距,content内容,width宽度。
达达前端
2019/07/03
1.8K0
css基础系列
【云+社区年度征文】2020一网打尽CSS世界
一个水平流上只能单独显示一个元素,因此理论上都可以配合clear属性来清除浮动带来的影响。
奋飛
2020/12/14
5.1K0
CSS 入门指南(一):基本概念 & 选择器 & 常用元素属性
层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)
IsLand1314
2025/03/11
4030
CSS 入门指南(一):基本概念 & 选择器 & 常用元素属性
前端面试之CSS重点概念精讲
今天,我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列,也算是一种变向的「未雨绸缪」。
前端柒八九
2022/12/19
2.6K0
前端面试之CSS重点概念精讲
前端基础篇之CSS世界
我想你每天写css代码有时候也会觉得很痛苦:这个布局的css怎么这么难实现!我也经常会有这种感觉,一个看似简单的布局总是要琢磨半天才能实现,偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形,并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》,才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记,为缩减篇幅丢弃了张老师冗余的小幽默,丢掉了些含金量较低的章节内容,因为ie已经被淘汰出局,所以有关css兼容性的地方也全部忽略不记,同时对个人觉得不易理解的地方加上了一些自己的理解和验证,所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具,国内镜像站点,方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新,希望到最后能够文如标题展现出真正的css世界。
Nealyang
2019/10/14
2.2K0
前端基础篇之CSS世界
掌握这些CSS知识点,Coding如飞!
整理了一些在CSS(层叠样式表)中的知识点,或许你曾看过一些什么“万字总结”、“面试必看”,但还是希望更多同学能够沉下心来学习,不仅仅满足于停留在“API工程师”的层面,多从CSS约定的规则去解释现象。
小东同学
2022/07/29
1.1K0
掌握这些CSS知识点,Coding如飞!
关于 vertical-align 你应该知道的一切
vertical-align,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,垂直对齐,主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下:
政采云前端团队
2020/03/19
3K0
关于 vertical-align 你应该知道的一切
【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 / 字体 / 粗细 / 斜体 / 颜色 / 对齐 | CSS 标签显示模式 - 块级元素 / 行内元素 / 行内块元素 ) ★
字体样式 的顺序 , 不能打乱 , 必须严格遵守 ; 字体样式 属性值 之间 , 使用空格隔开 ; font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;
韩曙亮
2024/03/12
4.7K0
104 道 CSS 面试题 - 知识点总结
对于组合声明的特殊性值计算可以参考: 《CSS 优先级计算及应用》 《CSS 优先级计算规则》 《有趣:256个class选择器可以干掉1个id选择器》
Savalone
2020/04/02
4.4K0
CSS基础(一)
CSS引入方式: 1. 行内式: <div style = "..."></div>(使用最少,因为会产生冗余,而且不符合W3C规定) 2. 内嵌式: <style> ... (写的是样式)... </style>(不会有冗余) 3. 外链式:<link href = "style.css"> (用的最多)
且陶陶
2023/04/12
9730
CSS基础(一)
相关推荐
7个Web前端程序员必须会用CSS技巧
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验