块级元素和行内元素分别有哪些？
块级元素：
惯例，先上MDN链接：
MDN —— Block-level-elements
HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
chrome审查元素
可以看到，h1的display为block，但是这里不知道，是当我们使用了块级元素（标签），就自动加上display：block，还是之前就已经定义好的。
- 默认情况下，块级元素会新起一行。
常见块级元素：
<address> information on author
<blockquote> long quotation
<button> push button
<caption> table caption
<dd> definition description
<del> deleted text
<div> generic language/style container
<dl> definition list
<dt> definition term
<fieldset> form control group
<form> interactive form
<h1> heading
<h2> heading
<h3> heading
<h4> heading
<h5> heading
<h6> heading
<hr> horizontal rule
<iframe> inline subwindow
<ins> inserted text
<legend> fieldset legend
<li> list item
<map> client-side image map
<noframes> alternate content container for non frame-based rendering
<noscript> alternate content container for non script-based rendering
<object> generic embedded object
<ol> ordered list
<p> paragraph
<pre> preformatted text
<table> table
<tbody> table body
<td> table data cell
<tfoot> table footer
<th> table header cell
<thead> table header
<tr> table row
<ul> unordered list
内联元素
HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。
chrome审查元素
在style下的filter中，也能看到display:inline，不过在块级元素的审查展示中，还会把一些默认的继承的的样式（font-weight,font-size,-webkit-margin......）也展示出来，原因尚未清楚。
- 一般情况下，行内元素只能包含数据和其他行内元素，而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
- 默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
常见行内元素：
<a> anchor
<abbr> abbreviated form
<acronym> acronym
<b> bold text style
<bdo> I18N BiDi over-ride
<big> large text style
<br> forced line break
<button> push button
<cite> citation
<code> computer code fragment
<del> deleted text
<dfn> instance definition
<em> emphasis
<i> italic text style
<iframe> inline subwindow
<img> Embedded image
<input> form control
<ins> inserted text
<kbd> text to be entered by the user
<label> form field label text
<map> client-side image map
<object> generic embedded object
<q> short inline quotation
<samp> sample program output, scripts, etc.
<select> option selector
<small> small text style
<span> generic language/style container
<strong> strong emphasis
<sub> subscript
<sup> superscript
<textarea> multi-line text field
<tt> teletype or monospaced text style
<var> instance of a variable or program argument
区别及其他
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
区别：
-
块级元素会独占一行，其宽度自动填满其父元素宽度。
-
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容变化而变化。
-
块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。
重点：
- 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果
如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p {
background-color: orange;
height: 50px;
width: 50%;
padding: 20px;
margin: 0px;
}
#span1 {
background-color: gray;
border: solid 4px red;
/*margin在行内元素中，只有水平方向产生效果，竖直方向无效*/
margin-left: 100px; /*产生边距，生效*/
margin-top: 100px; /*不产生边距，无效*/
margin-bottom: 100px; /*不产生边距，无效*/
}
#span2 {
border: solid 4px blue;
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
/*水平方向产生边距，竖直方向没有效果（覆盖了block元素）*/
}
</style>
</head>
<body>
<p>块级元素一</p>
<span id="span1">行内元素一</span><span id="span2">行内元素二</span>
<p>块级元素二</p>
</body>
</html>
如图
行内元素在两个块级元素之间，并且给行内元素二设置了padding
行内元素一：设置的
margin值在竖直方向上没有起作用，空隙不变。而水平方向是正常的。
行内元素二：设置的padding值在水平方向正常，竖直方向（重点！！！），好像是正常的对不对？边框的确是正常的被撑开了，说明padding-top，padding-bottom正常？
NONONO，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响，即不产生边距效果，即不影响布局。
所以，记住：
inline元素确实可以设置垂直方向的padding和margin值，但是inline元素的margin和padding的垂直方向上不产生边距效果，即不影响布局。
什么是 CSS 继承? 哪些属性能继承，哪些不能？
先上两篇文章链接：
CSS样式表继承详解（包括介绍font-size继承）
chenxj —— CSS继承深度解析
所谓css的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。
css的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代
栗子：
继承栗子
color的继承，h1继承自body
继承栗子2
font-family的继承，h1和span继承自div
来一个不继承的栗子：
border没有继承功能
哪些可以继承？
文本相关属性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
列表相关属性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
如何让块级元素水平居中？如何让行内元素水平居中?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.wrap1 {
width: 600px;
height: 150px;
border: solid 1px red;
}
.wrap2 {
width: 600px;
height: 150px;
border: solid 1px red;
}
.wrap3 {
width: 600px;
height: 150px;
border: solid 1px blue;
text-align: center; /*对于行内元素，直接在父元素上加text-align:center即可*/
}
-----------------------------------------------------------------------------------
.divText1 {
border: solid 1px green;
text-align: center;
}
.divText2 {
border: solid 1px green;
width: 300px;
text-align: center;
}
.divText3 {
border: solid 1px green;
width: 200px;
margin: 0 auto;
}
.divText4 {
border: solid 1px green;
width: 200px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="divText1">块级元素1</div>
<div class="divText2">块级元素1-2</div>
</div>
<br />
<div class="wrap2">
<div class="divText3">块级元素2</div>
<div class="divText4">块级元素2-2</div>
</div>
<br />
<div class="wrap3">
<span class="span">行内元素span</span>
</div>
</body>
</html>
代码如图
text-align，属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
注意是元素中的，即text-align一般针对文本的父元素来设置，如图中的块级元素1、1-2、2-2，行内元素span。
margin: 0 auto，实际上是
margin-left:auto,margin-right:Lauto，使得容器居中其父容器，但只能对块级元素生效。
CSS设置行内元素和块级元素的水平居中、垂直居中
用 CSS 实现一个三角形
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#sanjiao {
width: 0px;
height: 0px;
border-top: solid 50px red;
border-right: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 50px transparent;
}
</style>
</head>
<body>
<div id="sanjiao"></div>
</body>
</html>
单行文本溢出加 ...如何实现?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.character {
border: solid 1px red;
width: 100px;
height: 20px;
overflow: hidden; /*文字溢出部分隐藏*/
white-space: nowrap; /*禁止文字自动换行*/
text-overflow: ellipsis; /*使用省略号代表文字超出包含部分*/
}
</style>
</head>
<body>
<div class="character">
2017年10月8日 05:12:01
</div>
</body>
</html>
px, em, rem 有什么区别？
great! good question!
CSS中常用的字体单位：px、em、rem和%的区别 - Jesse131
ss中的px、em、rem 详解
W3C —— CSS单位
px：这个很熟悉了，像素嘛，也是你的displayer上的最小单位，显示图形的最小单位。
em：相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。这句话有点绕，不过试试就知道了。
rem：针对em因父元素字体改变而改变的特性新加入的单位，只想对于根目录（HTML）元素，所以只要在HTML标签上设置字体大小标准，文档中的字体都会以此为参照。
test
em
如图，既然em是针对父元素而设定的，那我们就重点关注每个关注元素的父元素就好了。
.wrap-span-p .wrap-span-span .i都在.wrap-span中，为.wrap-span设置了字体大小为32px（浏览器默认是16px），那么，它的直接子元素p和span中的字体为0.5em（32*0.5=16px），也就是16px，而i元素文字大小为0.5em，是父元素.wrap-span-span的0.5倍（16*0.5=8px），所以i元素中的文字大小为8px。
一般浏览器的默认字体大小都为16px，当然也有是14px的。
这里就有一个难题，假设我们只要改变.wrap-span-span的字体大小，但是em是根据父元素而变化，i元素也会改变，有什么办法使得i的相对参考值是固定的呢？这里引出我们的rem
rem
rem，是只根据根元素（即HTML根节点）来改变字体大小，根元素变则变，所以我们要给HTML设置一个font-size基础属性.......可以看到，i元素中的文字大小和父元素中的文字大小是一致的，都是16px。
这里稍微提一下，因为关于字体大小还有%、vw、vh......
张鑫旭 —— 视区相关单位vw, vh..简介以及可实际应用场景
解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
font属可继承属性，可提前在body中设置全局的字体大小，样式等属性值。
代码依次是字体大小，行间距，字体样式及字体样式备选。
加引号作为标识符，在CSS里，标识符只能包含字符[a-zA-Z0-9]，ISO 10646里比U+00A0大的字符，还有连字符（-）和下划线（_），但是标识符不能以数字，两个下划线或者一个下划线后面跟一个数字开头。所以，如果font-family中加上了引号，它就是一个字符串，如果不加引号，它就是一个或者多个标识符。
他们实现的效果是等价的，比如 font-family: 'Comic Sans MS' 和 font-family: Comic Sans MS的写法都是正确的，后者包含三个空格分隔的标识符；但是 font-family: "Goudy Bookletter 1911" 就不能把引号去掉，因为 1911 不是合法的标识符。如果你想用非法的css标识符作为font-family的名字或者其中的一部分，那么你需要用字符串的形式代替，或者转义剩下的没有引号的标识符。
\5b8b\4f53：代表是"微软雅黑"的Unicode码，这样就可以在所有的计算机上识别该编码。
网友评论