1. block-level & inline-level
- block-level 可以包含块级和行内，inline-level 只能包含文本和行内
- 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
inline-level:
em、strong、span、a、br、img、button、input、label、select、textarea、code、script
2. width height
只对块级元素设置生效，对行内元素设置无效
<style>
.box{
width: 200px;
height: 100px;
background-color: red;
}
</style>
<div class="box"></div>
3. border
border-width、border-color、border-style、border-radius 设置圆角
.box{
border-width: 1px;
border-color: red;
border-style: solid; /* solid实线、dotted虚线、dash粗虚线 */
}
/* 简写 */
.box2{
border: 1px dotted #ccc;
}
使用border做三角形:
.box{
width: 0px;
height: 0px;
border-top: 50px red solid;
border-right: 50px red tansparent;
border-bottom: 50px red transparent;
border-left: 50px blue solid;
}
4. padding & margin
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 */
margin
- margin 代表外边距，有四个方向的值，可以合写，值可以是数值也可以是百分比(相对于父容器、不是自身)。还可以是负值
- 外边距合并问题
margin-top、margin-right、margin-bottom、margin-left
margin: 20px; /* padding: 20px 20px 20px 20px */
margin: 10px 20px; /* padding: 10px 20px 10px 20px */
margin: 10px 20px 30px; /*padding: 10px 20px 30px 20px */
margin: 0 auto; 的使用
- 对于块级元素设置
margin: 0 auto;可达到居中目的
.box{
/* margin: 0 auto; 实际上是下面两个起作用 */
margin-left: auto;
margin-right: auto;
}
*去除元素默认 margin、padding
*{
margin: 0px;
padding: 0px;
}
- 注意：对于行内元素来说，上下的 margin 和 padding 是不生效的
5. display
- 块级：block，list-item，table
- 行内：inline，inlne-table，inline-block
value: inline | block | list-item | inline-block | table | inlne-table | table-row | table-cell | none | inherit
Initial to: inline 最初的默认的为inline
Applies to: all elements 应用在所有的元素上
Inherited: no 不继承的
body{color:red;}为继承
边框 margin padding 不继承
6. 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;
}
7. font-family
- 使用浏览器打开页面时，浏览器会读取HTML文件进行解析渲染。
- 当读到文字使会转换成对应的Unicode码 (可以认为是世界上任意一种文字的特定编号)。
- 再根据HTML礼设置的font-family (如果没设置则会使用浏览器默认设置)
去查找电脑里 (如果有定义自己@font-face，则加载对应字体文件)对应的字体文件。 - 找到文件后根据Unicode码去查找绘制外形，找到后会知道页面上
写法:
- 在css中设置字体是，直接对字体中文或英文名称浏览器都能识别，直接写中文的情况下编码 (GB2312、UTF-8) 不匹配时会乱码。
- 保险的方式是将字体名称用Unicode来表示
宋体 | SimSun | \5B8B\4F53
黑体 | SimHei | \9ED1\4F53
微软黑体 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
打开控制台 escape('微软雅黑')，把 %u 替换成 \
8. Chrome最小字体限制
- chrome默认字体大小为16px，最小字体为12px
9. text
- 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: 字母间隔修改的是字符或字母之间的间隔
10. 行内元素居中
<style>
.box{
text-align: center;
}
</style>
<div class="box">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
</div>
11. 单行文本溢出加...
.card>h3{
white-space: nowrap; //不换行
overflow: hidden; //超出隐藏
text-overflow: ellipsis; //省略
}
12. 颜色
单词：red blue pink yellow white black
十六进制：#000000 #fff #eee #ccc #666 #333 #f00 #0f0
rgb: rgb(255,255,255) rgb(0,255,0)
rgba: rgba(0,0,0,0.5) a透明度
13. a链接设置颜色
a有默认颜色和样式，会覆盖继承的样式
a{
color: red;
text-decoration: none;
}
14. 列表去掉点
ul{ list-style: none; }
li{ list-style: none; }
15. 隐藏or透明
opacity: 0; 透明度为0，整体
visibility: hidden; 和opacity: 0; 类似
display: none; 消失，不占用位置
backkground-color: rgba(0,0,0,0.2) 只是背景色透明
16. 固定单位
- 百分比（宽高 文字大小 line-height position
- em 相对单位，对于父元素字体大小
- rem 相对单位，对于根元素（html）字体大小
- vw vh 相对单位，1vw为屏幕宽度的1% 兼容性低（查兼容性 caniuse.com）
17. a链接设置颜色
a有默认颜色和样式，会覆盖继承的样式
a{
color: red;
text-decoration: none;
}
18. 列表去掉点
ul{ list-style: none; }
li{ list-style: none; }
19. 隐藏or透明
opacity: 0; 透明度为0，整体
visibility: hidden; 和opacity: 0; 类似
display: none; 消失，不占用位置
backkground-color: rgba(0,0,0,0.2) 只是背景色透明
20. line-height
line-height: 2 ; /*本身文字高度的两倍*/
line-height: 200% ; /*为父元素高度的两倍*/
height= 50px; /*height=line-height可以垂直居中单行文本*/
line-height= 50px ;
