Web8.CSS常见样式
https://necolas.github.io/normalize.css/
https://meyerweb.com/eric/tools/css/reset/
width: 100%是什么意思
设置当前元素的content的宽度等于父容器content的宽度，对块级元素不要随便加width:100%
块级元素
block-level
块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内元素
块级元素占据一整行空间，行内元素占据自身宽度空间
(宽高设置、内外边距的差异)
宽高只对块级元素设置生效，对行内元素设置无效
块级元素可以正常设置margin padding
行内元素 上下margin padding 是不生效的
只有左右margin padding生效
常见元素
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
行内元素(内联)
inline-level
常见元素
em strong span a br img
button input label select textarea
code script
宽高
只对块级元素设置生效，对行内元素设置无效
边框
三个属性: border-width, border-color, border-style
.box{
border-width: 1px;
border-color: red;
border-style: solid; /* dotted dash*/
// border-bottom: 1px black dotted;
// border-bottom: none;
}
.box1{
border: 1px solid #ccc;
}
<div class="t0"></div>
.t0{
height: 20px;
width: 20px;
border-top: solid 20px red;
border-left: solid 20px green;
border-right: solid 20px orange;
border-bottom: solid 20px blue;
}
t1{
height: 20px;
width: 20px;
border-top: solid 20px red;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-bottom: solid 20px blue;
border-radius: 6px;
border-radius: 10px 8px 6px 2px //上 右 下 左
border-radius: 10px;
border-radius: 50%;
}
边框
margin border padding content
padding代表内边距，有四个方向的值，可以合写，
值可以是数值也可以是百分比（相对于父容器、不是自身）
padding-top
padding-right
padding-bottom
padding-left
padding: 20px // 20px 20px 20px 20px
padding: 10px 20px 10px 20px //上右下左
padding: 10px 20px //上下10 左右20 简写
padding: 10px 20px 30px //pading: 10px 20px 30px 20px
margin
margin代表外边距，有四个方向的值，可以合写，
值可以是数值也可以是百分比（相对于父容器、不是自身）
还可以是负值
外边距合并问题
margin-top
margin-right
margin-bottom
margin-left
margin: 0 auto
对于块级元素 设置margin: 0 auto 可达到居中目的
.box{
/* margin: 0 auto; 实际上是下面两个起作用*/
margin-left: auto;
margin-right: auto;
}
*{
margin: 0;
padding: 0;
}
display
块级：block list-item table
行内：inline inline-table inline-block
font
font-size: 字体大小
font-family: 字体
font-weight：字体粗度 常用的是regular 和 bold
line-height：行高，可以用百分比、倍数或者固定尺寸
以上属性都可以继承给子元素
Chrome默认字体大小16px,最小字体12px
文本
text-align: 文本对齐方式 left、center、right、justify
text-indent: 文本第一行缩进距离
text-decoration: none、underline、line-through、over-line
color: 文字颜色
text-transform: 改变文字大小写none、uppercase、lowercase、capitalize
word-spacing: 可以改变字(单词)之间的标准间隔
letter-spacing: 字母间隔修改的是字符或字母之间的间隔
//text-align: 用在块级元素上，对里面的行内元素生效
浏览器默认样式
Normalize.css //https://necolas.github.io/normalize.css/
CSS Reset //https://meyerweb.com/eric/tools/css/reset/
简单去除
*{
margin: 0;
padding: 0;
}
display用于设置元素渲染框的类型
display 用于设置元素渲染框的类型
none 不显示元素。
block 显示为块状元素。
inline 显示为行内元素。
inline-block 显示为行内块，创建一个 BFC。
table-cell 显示行为与 <td> 一样。
flex flex 布局
grid grid 布局
问题 block，inline，inline-block 元素的区别是什么？
block 元素独占一行，宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inline 元素。
inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。
//行内元素居中
<style>
.box{
text-align: center;
}
</style>
<div class="box">
</div>
//单行文本溢出...
.card > h3{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="card">
<h3><a href="#">这是标题这是标题这是标题这是标题</a></h3>
<p>这是介绍这是介绍这是介绍这是介绍</p>
</div>
.card{
width: 200px;
border: 1px solid #ccc;
font-size: 12px;
margin: 0 auto;
}
.card>img{
width: 200px;
}
.card>h3{
padding: 0 10px;
white-space: nowrap; //不折行
overflow: hidden; //溢出之后隐藏
text-overflow: ellipsis;
}
.card>h3>a{
text-decoration: none;
color: #f333
}
.card>p{
padding: 0 10px;
color: #666;
}
```
##1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
##2.什么是 CSS 继承? 哪些属性能继承，哪些不能？
##3.如何让块级元素水平居中？如何让行内元素水平居中?
##4.用 CSS 实现一个三角形
##5.单行文本溢出加 ...如何实现?
##6.px, em, rem 有什么区别
##7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?1
