文档章节

深入认识CSS的行内元素

博为峰教研组
 博为峰教研组
发布于 2017/03/10 18:42
字数 478
阅读 10
收藏 0

    

一直从事ios开发,前段时间接触到前端,简单的学习了一下css,下面给大家简单的说一下,我使用css来写一个页面的心得与体会。.我是在w3c那里,通过看文档对css有了初步的认识,css的知识点整体看起来并不难。都是一些属性。但是如果仅仅是这样,那你就大错特错了,其实css并没有人们想象中的那么简单。先来说一下css的行内元素

行内元素(inline): 元素在一行内水平排列,高度由元素的内容决定,height属性不起作用,行内元素也称为内联元素。如span,input等元素。

常见的行内元素有:

–  a – 锚点

–  abbr – 缩写

–  acronym – 首字

–  b – 粗体(不推荐)

–  bdo – bidi override

–  big – 大字体

–  br – 换行

–  cite – 引用

–  code – 计算机代码(在引用源码的时候需要)

–  dfn – 定义字段

–  em – 强调

–  font – 字体设定(不推荐)

–  i – 斜体

–  img – 图片

–  input – 输入框

–  kbd – 定义键盘文本

–  label – 表格标签

–  q – 短引用

–  s – 中划线(不推荐)

–  samp – 定义范例计算机代码

–  select – 项目选择

–  small – 小字体文本

–  span – 常用内联容器,定义文本内区块

–  strike – 中划线

–  strong – 粗体强调

–  sub – 下标

–  sup – 上标

–  textarea – 多行文本输入框

–  tt – 电传文本

–  u – 下划线

 

行内元素的特点:

–  1.设置宽度width 无效。

–  2.设置高度height 无效,可以通过line-height来设置。

–  3.设置margin 只有左右margin有效,上下无效。

  4.设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

5. 和其他元素在同一行

6. 行内元素只能容纳文本或者其他行内元素

 

 

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
CSS——把“可以动的盒子”更优雅地展示:① “伪元素”妙用

前言: “伪元素”在我们创建样式的时候用处很多,它可以大大简化我们的代码量,还可以做一些出乎意料的动作。 1 认识“伪元素” 1.1 伪元素 用于创建一些不在文档树中的元素,并为其添加样式...

itsOli
05/05
0
0
想要清晰的明白(二)CSS 盒模型Block box与Line box

在上一篇想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用,接下来就详细的介绍两种盒子的具体细节 Block Box (图自《css权威指南》) 水平格式...

mooonx
2017/11/29
0
0
深入理解行内元素的布局

前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和vertical-align两个属性在布局方面的使用。 原文博客地址:深入理解行内元素的布局 知乎专栏&&简...

damonare
2017/10/29
0
0
深入理解行内元素的布局

前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和vertical-align两个属性在布局方面的使用。 原文博客地址:深入理解行内元素的布局 知乎专栏&&简...

Damonare
2017/10/29
0
0
深入理解line

什么是行间距? 古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。 行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距...

刘元兴
2017/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
42分钟前
3
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
4
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
4
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部