块级元素行内元素
块级(block-level); 行内(内联、inline-level)
块级可以包含块级和行内，行内只能包含文本和行内
块级占据一整行空间，行内占据自身宽度空间，在同一行里可以放很多
宽高设置、内外边距的差异
块级元素(block-level)
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
div,标题，表单，段落，列表，表格
块级元素是占据一整行的空间的
行类元素（inline-level）
em strong span a br img
button input label select textarea
code script
块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素和文本
宽高
只对块级元素设置生效,对行内元素设置无效
<style>
.box {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<div class="box"></div>
边框
border-width, border-color, border-style
.box {
border-width: 1px;粗细
border-color: red;颜色
border-style: solid;类型 /* dotted dash*/
}
/* 简写 */
.box2 {
border: 1px dotted #ccc;
}
border-bottom:none;指不要下边框
border-bottom:1px red solid;指只设置下表框
.ss{
height:20px;
width:20px;
border-top:solid 20px red ;
border-left:solid 20px green;
border-right:solid 20px orange;
border-bottom:solid 20px blue;
}
.ss{
height:0px;
width:0px;
border-top:solid 20px red ;
border-left:solid 20px transparent;透明
border-right:solid 20px transparent;
border-bottom:solid 20px blue;
}
.circle{
width:100px;
height:100px;
border:1px solid black;
border-radius:50px;radius 对应的是四个角，
/*border-radius:50px 25px 10px 5px;*/四个角可以分别设置
}
边距
盒模型
padding
padding代表内边距，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）
padding-top
padding-right
padding-bottom
padding-left
padding: 20px; /* padding: 20px 20px 20px 20px; */
padding: 10px 20px; /* padding: 10px 20px 10px 20px; */
padding: 10px 20px 30px; /* padding: 10px 20px 30px 20px; */
.box{
border:1px solid black;
width:200px;
padding:10px 20px 10px 20px;顺序是指上，右，下，左
padding：10px 20px
}
margin
margin 代表外边距，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）。还可以是负值
外边距合并问题
margin-top
margin-right
margin-bottom
margin-left
margin: 20px; /* margin: 20px 20px 20px 20px; */
margin: 10px 20px; /* margin: 10px 20px 10px 20px; */
margin: 10px 20px 30px; /* margin: 10px 20px 30px 20px; */
margin: 0 auto
对于块级元素 设置 margin: 0 auto 可达到居中目的
.box {
/* margin: 0 auto; 实际上是下面两个起作用 */
margin-left: auto;
margin-right: auto;
}
margin: 0 auto是让块级元素居中
*
去除元素默认 margin padding
*{
margin:0;
padding:0;
}
把页面上的所有元素的margin和padding都设为0，
http://js.jirengu.com/noxohopayo/1/edit?html,css,output
块级元素和行内元素区别区别：
1，块级元素，占据的空间一整行，可以直接设置宽度和高度。,
2，行内元素，占据的空间是他自身。多个行内元素可以并排排列，而且行内元素只能放置行内元素和一些文本，
而且行内元素，没法设置宽高，就算设置了，也没有用。
3，对于块级元素来说，我们可以设置margin和padding，而对于行内元素来说设置上下margin和padding是不
生效的，只设置左右margin和padding才生效
display
块级：block, list-item, table
行内: inline, inline-table, inline-block
display'
Value: inline | block | list-item | inline-block | table |
|inline-table | table-row | table-cell | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
很多样式的属性是继承的，
很多是不继承的，border，margin，padding
font，文本，字体
font-size：字体大小
font-family：字体，宋体、微软雅黑、Arial等
font-weight：文字粗度，常用的就是默认值regular和粗体bold
line-height：行高，可以用百分比、倍数或者固定尺寸
以上属性都可继承给子元素
用法
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}加引号的是确定是一个字符，因为中间有空格，不然就当成两个字符了
p {
line-height: 1.5;
font-size: 14px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;字体优先级顺序
font-weight: bold;
}
font-family
使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码
（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family
（如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）
对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上
英文由26个字母组成，可以有很多的漂亮的字体
一般中文的字体库很少，中文的单词很多，不太容易做很多类型的字体，
font-family的写法
在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码
（GB2312、UTF-8 等）不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示
宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53 微软雅黑 | Microsoft YaHei |
| \5FAE\8F6F\96C5\9ED1
打开控制台console输入： escape('微软雅黑')，得到"%u9ED1%u4F53"，把 %u替换成 \
Chrome最小字体
chrome 默认字体大小16px, 最小字体 12px 解决方案
文本
text-align：文本对其方式 left、center、right、justify（左右对其）
text-indent：文案第一行缩进距离
text-decoration：（文本装饰） none、underline、line-through（删除线）、overline
color：文字颜色
text-transform：改变文字大小写none、uppercase（大改小）、lowercase（小改大）、
capitalize（首字母大写）
word-spacing：可以改变字（单词）之间的标准间隔
letter-spacing：字母间隔修改的是字符或字母之间的间隔
http://js.jirengu.com/vatumomata/1/edit
http://book.jirengu.com/jrg-team/frontend-knowledge-ppt/code/CSS/demo2.html
范例：http://js.jirengu.com/riyu/1/edit?html,css,output
行内元素居中
<style>
.box{
text-align: center;
}
</style>
<div class="box">
</div>
单行文本溢出加...
.card > h3{
white-space: nowrap;不换行，不折行
overflow: hidden;溢出后隐藏
text-overflow: ellipsis;文本溢出加‘...’
}
http://js.jirengu.com/dode/1/edit?html,output
颜色
单词: red, blue, pink, yellow, white, black
十六进制: #000000（黑色）, #fff（白色）, #eee, #ccc, #666, #333, #f00, #0f0, #00f
rgb: rgb(255, 255, 255), rgb(0, 255, 0)
rgba: rgba(0,0,0,0.5)
单位
px： 固定单位
百分比(宽高？文字大小？line-height? position?)
em: 相对单位，相对于父元素字体大小
rem: 相对单位，相对于根元素(html)字体大小
vw vh: 相对单位，1vw 为屏幕宽度的1% 兼容性
a 链接设置颜色
a 有默认颜色和样式，会覆盖继承的样式
a {
color: red;
text-decoration: none;
}
列表去掉点
ul{
list-style: none;
}
/*也可这样*/
li{
list-style: none;
}
隐藏or透明
opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明
inline-block
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题
line-height
line-height: 2
line-height: 100%
height = line-heihgt 来垂直居中单行文本
向 div 元素添加阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
网友评论