块级元素
- 块级元素可以包含块级和行内元素
- 块级元素占据一整行空间
- 块级元素可设置content的宽高(width、height）
- 块级元素可设置内外边距margin和padding。
5.margin: 0 auto;用在块级元素上 - 常见的块级元素：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
行内元素
- 行内元素只能包含文本和行内元素
- 行内元素占据自身宽度空间
- 行内元素不能设置content的宽高(width、height）
- 行内元素可设置左右内外边距margin和padding，但对上下margin和padding不生效（对背景色生效，可以撑开边框，边框是包括了content和padding，背景色同样包含了content和padding）
- text-align: center;用在行内元素的父容器上，对行内元素生效
- 常见的行内元素：em strong span a br img button iput label select textarea code script
inline-block
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
- 又呈现 block 特性 (可设置宽高，内外边距)
-
缝隙问题
屏幕快照.png
method1.png
method2.png
-
对齐问题
屏幕快照.png
上对齐.png
下对齐.png
特例
img具有块级元素的属性，可以设置宽高width和height，内外边距padding和margin。
font
- font-family查看字体的Unicode码可以通过打开控制台 escape('微软雅黑')，把 %u替换成 \实现
- line-height用百分比表示行高是父元素行高的百分比，用数字表示是指行高是自身字体高度的几倍
文本
-
height = line-height来垂直居中单行文本
line-height.png
-
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：字母间隔修改的是字符或字母之间的间隔
-
单行文本溢出加...
.card > h3{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
背景
使用背景图片时，必须把窗口撑开。
background.png
background.png
background.png
盒模型
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border
-
标准盒模型
标准盒模型.png
-
IE盒模型
IE盒模型.png
-
使用css3新样式box-sizing
box-sizing: content-box：w3c标准盒模型
box-sizing: border-box：“IE盒模型”
其他
- 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) 只是背景色透明
网友评论