自己学习CSS的总结
块级元素与行内元素
- 块级(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
对于行内元素尽量不要设置margin-top、margin-bottom；padding-top、padding-bottom值；
宽高
width:100px;
height:100px;
- 块级元素可以设置宽高
- 行内元素设置宽高无效
边框
border:1px red solid;
border-width:1px;
border-color:red;
border-style:solid;
设置宽高为0，左右上边框设置为透明色transparent，可以得到一个向上的三角形，同理向左向右向下，两个链接的边框设置为相同颜色，可以得到一个直角三角形。
边距
padding
内边距 内容到边框的距离 有四个方向的值 上 右 下 左 值可以是数值，也可以是百分比(相对于父容器)
padding: 10px;
padding: 10px 20px 10px 20px;
padding: 10px 20px;
padding: 10px 20px 5px;
padding-top: 10px;
margin
外边距边框外的距离 有四个方向的值 上 右 下 左 值可以是数值，也可以是百分比(相对于父容器) 可以是负值
margin: 10px;
margin: 10px 20px 10px 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin-top: 10px;
块级元素 margin:0 auto; 可以水平居中
display
CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表.
除了多种不同的生成的元素的盒类型，值 none 可以关闭一个元素的显示；当你使用 none 所有的后代元素他们的显示也会被关闭。文档渲染的过程中就好像在文档树中这个元素不存在一样。
更多值 参考display
inline-block
- 既呈现inline特性(不占据一整行，宽度由内容决定)
- 又呈现block特性(可设置宽高，内外边距)
缝隙问题
inline带来的 换行被浏览器识别为空格，是一个字符 可以紧贴着元素写消除空格;父元素设置font-size:0;自己在设置字体大小.
多个inline-block元素如果垂直不对齐 用vertical-align
vertical-align
字体
font-size 字体大小
font-family 字体
font-weight 字体粗度
line-height 行高 可以用百分比 固定倍数 固定尺寸
固定倍数line-height:2这个无单位数字乘以该元素的字体大小
百分比line-height:10%给定的百分比值乘以元素计算出的字体大小
以上元素可以继承
font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
font-size: 12px;
line-height: 1.5;
font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
//\5b8b\4f53 是字体名称的Unicodc码
//中文版的chrome默认字体大小16px 最小字体12px
文本
text-align:文本对齐方式left,right,center,right,justify 针对块级元素的行内元素生效
text-indent: 文本第一行缩进距离
text-decoration:文字加一条线 none,underline,line-through,overline,
color:文字颜色
text-transform:改变文字大小写none,uppercase,lowercase,capitalize
word-spacing:改变字或单词之间的标准间隔
letter-spacing:字母间隔修改的是字符或字母之间的间隔
颜色
单词:red，green等
十六进制：#000000，#fff,#f00,#0f0等
rgb:rgb(255,255,255)等
rgba:rgba(255,255,255,.5);
单位
px: 固定单位
百分比: 相对单位 (宽高相对于父元素的宽高 父辈需要设置高度 文字大小相对父辈元素的字体大小 line-height 给定的百分比值乘以元素计算出的字体大小 padding margin 相对于父元素的宽度,top,bottom,right,left相对于父元素高度)
em 相对单位 相对于父元素字体的大小
rem 相对单位，相对于根元素(html)字体大小
vw,vh 相对单位，1vw为屏幕的1%(兼容性不好 兼容性查询Can I Use)
背景
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否重复
background-size 设置背景图像的大小
CSS Sprite
雪碧图 不同的图片或图标合并在一张图上 减少网络请求，提高网页加载性能. 通过position-size来控制显示哪个图片
制作网站 CSS雪碧图
隐藏or透明
- opacity: 0;透明度为0，整体
- visibility:hidden;和opacity: 0;类似，占据原来的位置
- display:none;消失 不占位置
- background-color: rgba(0,0,0,.2)只是背景色透明
盒模型
标准盒模型
IE盒模型
区别 W3C标准中padding,border所占的空间不在width,height范围内，大家俗称的IE盒模型的width包括content+padding+border
box-sizing:border-box;IE盒模型 box-sizing:content-box;标准盒模型
