CSS常见样式(一)

1、块级元素和行内元素分别有哪些?它们的特性区别有哪些?

1、块级元素(block element),占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。

常见的块级元素有:

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易,也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容(对于不支持frame的浏览器显示此区块内容)
  • noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  • ol - 排序列表
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

2、行内元素(inline element)又称内联元素,只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。

常见的行内元素有:

  • 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 - 下划线
  • var - 定义变量

块级元素与行内元素的区别:

  • 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
  • 块级元素可以设置width,height属性,块级元素即使设置了宽度,仍然是独占一行。行内元素设置width,height属性无效,它的长度高度主要根据内容决定。
  • 块级元素可以设置margin和padding属性。行内元素的margin和padding属性。水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果。
  • 块级元素对应于display: block。行内元素对应于display: inline。

补充:如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block。

2、什么是 CSS 继承? 哪些属性能继承,哪些不能?

1、css继承:设置父级元素的样式,其子级元素的样式会和父级元素一样;

2、不可继承的属性: display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。 可继承的属性:

  • 对于行内元素,可继承的属性有:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
  • 对于块状元素,可继承的属性有:text-indent和text-align。 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
  • 对于列表元素,可继承的属性有:list-style、list-style-type、list-style-position、list-style-image。
  • 对于表格元素,可继承的属性有:border-collapse。
  • 所有元素都可继承得属性有:visibility和cursor。

3、如何让块级元素水平居中?如何让行内元素水平居中?

  • 让块级元素居中设置需要margin属性: margin:0 auto;//上下margin值随意设置,左右margin值设置为auto
  • 让行内元素水平居中需要设置text-align属性,text-align属性是作用在块级元素上让里面的文本居中<div class='box'> 我要居中我要居中我要居中 </div> //若想要上面的文本居中,对应的CSS样式因如下所示编写 div{ text-align: center }

4、文本溢出解决方法。

解决文本溢出问题,我们需要设置两个属性:

  • white-space: nowrap ,强制文本在一行内显示
  • overflow: hidden ,将溢出内容改为隐藏 { white-space: nowrap; overflow: hidden; }

补充:若想将溢出内容显示为省略标记......最后我们还需要设置text-overflow属性:

  • text-overflow: ellipsis ,将文本溢出内容显示为省略标记
  • text-overflow: clip , 把文本溢出的部分裁切掉 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis或clip }

5、px em rem有什么区别?

1、px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定 义Web页面的字体。

PX特点:

  • IE无法调整那些使用px作为单位的字体大小;
  • 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  • Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

2、em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。一般都是以body的font-size为基准。在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值。 计算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值

EM特点:

  • em的值并不是固定的;
  • em会继承父级元素的字体大小

注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 所以我们在写CSS的时候,需要注意两点:

  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

3、rem是CSS3新增的一个相对单位,是指根元素(root element,html)的字体大小。这个单位与em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

为了方便计算,我们改变一下 html 的默认 font-size=10px

html{ font-size:62.5%; /* 10÷16=62.5% */ } body{ font-size:12px; font-size:1.2rem ; /* 12÷10=1.2 */ } p{ font-size:14px; font-size:1.4rem; }

需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入 了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。

补充:

px 与 rem 的选择:

  • 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

933
来自专栏抠抠空间

CSS基础

一、CSS简介 css概念     CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。     当浏览器读到一个样...

2578
来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

2649
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

912
来自专栏前端杂货铺

响应式web布局中iframe的自适应

困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

34312
来自专栏WebDeveloper

那些经常使用的 CSS3属性

562
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

541
来自专栏cnblogs

深入理解及应用Position

position俗称定位,主要取值及作用如下: static 默认值。没有定位,出现在正常文档流中 absolute 绝对定位,相...

1876
来自专栏大数据钻研

你不得不了解的HTML知识

这次要细说的只是块级元素和行内元素的内容,如有不对,请轻喷。 块级元素和行内元素 默认情况下块级元素会始终占居一行,而行内元素并不会。除了 table 元素的 ...

2656
来自专栏coding for love

CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

603

扫码关注云+社区