行内元素、块级元素及行内块元素的区别
行内元素：（a span等）
- 默认宽度是它本身内容的宽度
- 设置高、宽无效，但水平方向的padding和margin可以设置，垂直方向无效
- 和相邻行内元素在一行上 块级元素:（div p h1 ul li等）
- 宽度默认是容器的100%
- 高度、行高、外边距以及内边距都可以设置
- 总是从新行开始 行内块元素：（img input td等）
- 和相邻行内块元素在一行上，但之间会有空白间隙
- 默认宽度是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以设置
水平居中
行内元素: text-align: center;
块级元素（确定宽度）：
- width和margin实现：margin: 0 auto;
- 绝对定位和margin-left: -width/2, 前提是父元素position: relative
块级元素（宽度未知）：
- inline-block实现：display：inline-block和text-align:center；
- 绝对定位+transform，translateX可以移动本身元素的50%
- flex布局父元素设置 justify-content: center
- grid布局父元素设置display: grid; place-content: center;
垂直居中
- line-height实现居中，这种方法适合纯文字类
- flex布局父元素设置align-items：center
- 绝对定位+transform，translateY可以移动本身元素的50%
- grid布局父元素设置display: grid; place-content: center;
css中有哪些继承的属性？
1.字体系列属性：font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：设置字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
font-stretch：对当前的font-family进行伸缩变形，所有主流浏览器都不支持
font-size-adjust：为某个元素规定一个aspect值，这样就可以保持首选字体的x-height
2.文本系列属性：text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少文单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3.元素可见性：visibility
4.表格布局属性：caption-side，border-collapse，border-spacing，empty-cells，table-layout
5.列表布局属性：list-style，list-style-image，list-style-type，list-style-position
6.生产内容属性：quotes
7.光标属性：cursor
8.页面样式属性：page，page-break-inside，Windows，orphans
9.声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
css有哪些不继承的属性？
1.display：规定元素应该生成的框的类型
2.文本属性：vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3.盒子模型的属性：width，height，margin，margin-top，margin-right，margin-bottom，margin-left，border，border-style，border-top（right，bottom，left）-style
border-top（right，bottom，left）-width，border-top（right，bottom，left）-color，border-top，border-right，border-bottom，border-left，
padding，padding-top，padding-right，padding-bottom，padding-left
4.背景属性：background，background-color，background-image，background-repeat，background-position，background-attachment
5.定位属性：float，clear，position，top，right，bottom，left，min-width，min-height，max-width，max-height，overflow，clip，z-index
6.生成内容属性：content，content-seset，content-increment
7.轮廓样式属性：outline，outline-style，outline-width，outline-color
8.页面样式属性：size，page-break-before，page-break-after
9.声音样式属性：pause，pause-before，pause-after，cue，cue-before，cue-after，play-during
圣杯布局（flex布局、定位、浮动实现）
/* 浮动实现 */
<div class="main">
<div class="left"></div>
<div class="right"></div>
/* 注意middle盒子在最下面，若放在中间，right浮动盒子会被挤下去 */
<div class="middle"></div>
</div>
<style>
.main {
overflow: hidden;
}
.left {
float: left;
background: red;
width: 200px;
height: 200px;
}
.right {
float: right;
background: blue;
width: 200px;
height: 200px;
}
.middle {
height: 200px;
background: green;
margin-left: 200px;
margin-right: 200px;
}
</style>
/* 定位实现 */
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<style type="text/css">
.main {
position: relative;
}
.left {
background: red;
height: 300px;
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.middle {
background: green;
height: 300px;
margin-left: 200px;
margin-right: 200px;
}
.right {
background: blue;
height: 300px;
width: 200px;
position: absolute;
right: 0;
top: 0;
}
</style>
/* flex布局实现 */
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<style>
.main {
display: flex;
}
.left {
background-color: red;
width: 200px;
height: 220px;
}
.middle {
/* flex: 1; 此时与width：100%同效果 */
width: 100%;
background-color: green;
height: 220px;
}
.right {
background-color: blue;
width: 200px;
height: 220px;
}
</style>
Grid布局应用
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
<style>
.header {
grid-area: header;
background-color: rgba(255, 255, 0, 0.897);
}
.left {
grid-area: navigation;
background-color: rgba(238, 238, 238, 0.658);
}
.main {
grid-area: main;
background-color: #fff;
}
.right {
grid-area: ads;
background-color: rgba(238, 238, 238, 0.712);
}
.footer {
grid-area: footer;
background-color: pink;
}
.container {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px 1fr 30px;
min-height: 100vh;
}
@media screen and (max-width:600px) {
.container {
grid-template-areas: "header" "navigation" "main" "ads" "footer";
grid-template-columns: 100%;
grid-template-rows: 100px 50px 1fr 50px 30px;
}
}
</style>
<div class="container">
<header class="header">Title</header>
<aside class="left">Menu</aside>
<main class="main">Content</main>
<aside class="right">Ads</aside>
<footer class="footer">Footer</footer>
</div>
