CSS（兼容IE8的）基础笔记
CSS（兼容IE8的）基础笔记
复习
学习的标签都有什么？
H 1-6 (标题)、Table（表格） 、tr （表格 ⾏）、th（表格 头）、caption（表格 标题）、thead （ 表格头部）、tbody（表格 主
体）、tfoot （表格 底部）、a（链接）、img（图⽚）、 input（表单项）、form（表单）、hr、br、div、span、strong、b、i、em、s、del、fieldset、legend、ul、ol、ol、dl、dt、dd、p、 button、select、option、textarea、u、sub、sup、
转义字符  (空格) >(右尖括号) <（左尖括号）;
样式表有三种
内部（在 head 中的style 标签中）
外部样式表（使⽤Link 连接css ⽂件路径
<link rel="stylesheet" type="text/css" href="路径">
内联样式表
css⽂件也可以外链加载
语法： @import url();
css 选择器： 类型( 标签),id（#）,class（.），包含（选择器 选择器），⼦选择器（选择器> 选择器），伪类型(选择器：hover)，组(选择器，选择器)，通配符(*)
实践总结
1 div 默认没有样式
2 css 选择器
3 table 合并⾏和列 ，⼀⾏⾏进⾏，不要⼤体把握，表格多时容易乱。
4 多问
5 img 设置 {display:bolck} 去除图⽚之间的默认间距
6 在浮动布局中要同时浮动是才可以实现同⾏的浮动css设置文字垂直居中
7 在多个元素需要相同的样式，在优化css时可以⽤组选择器进⾏结合，加载⼀次优化样式的渲染。
8 photoShop切图，标尺进⾏尺⼨规划，注意 margin 和 padding 的计算，不在width 中。
单位
px: 逻辑像素；
em: 倍数（离⾃⼰最近⽗元素font-size 的倍数）；根元素默认的1em 是16px; ;
rem : 倍数 （!IE8 根元素 font-size 的倍数 ）;
pt：很少⽤；
css ⽂字相关样式
⽂本颜⾊
color：值
ps: 进制
2进制 0-1
10进制：0-9
16 进制:0-9 a-f
值：
1. #ff0000[16进制 红(2) 绿(2) 蓝(2) 在三组数字两位相同 可以省略成⼀位 ]
2. rgba (255，255,255,0.2) [ !IE8 红（0-255），黄（0-255），蓝（0-255） ，透明度（0-1） ]
3. rgb (255，255,255) [ 红（0-255），黄（0-255），蓝（0-255）]
⽂字字体
font-family：值
值：
1. 多个单词或汉字 要加“ ” 。
ex : “ 微软雅⿊”
2. 多个字体使⽤ ‘,’ 隔开 ，按照顺序加载 字体，有则加载，⽆则下项。
ex: Times,“宋体”;
3.
px：
chrome : 默认微软雅⿊;
IE ：默认宋体;
// 如果不加⾼度，默认⽂字撑开的⾼度
// 如果不加宽度，默认⽗容器的宽度
/
/
<p >
实例⽂字
</p>
⽂字加粗
font-weight：值(100-900|bold| lighter|bolder|normal)
⽂字倾斜
font-style:oblique(⽂字强制倾斜 不管有没有这个字体),italic（⽂字库中的斜体）;
⾸⾏缩进
text-indent：正值|负值；
⾏⾼
line-height:
ps：可以利⽤⾏⾼进⾏⽂字的垂直居中
⾏⾼默认1em
对齐⽅式
⽔平对齐: 写在容器内
text-align: center（居中）|justify(两端对齐，会强制⽂字的间距)|;
垂直对齐
vertical-align: middle|baseline|top|bottom
基线对齐 baseline 是 英⽂格⼦中的第三线
—————————— topline 顶线
__________ middleline中线
—————————— baseline 基线
__________ bottom 底线
###⽂字修饰
线
text-decoration:overline(上划线)|underline(下划线)|line-through（删除线）|blink(!只有⽕狐某个版本⽀持)|none;
⼤⼩写
text-transform:none⽆转换|uppercase全都⼤写|lowercaselowercase全都⼩写|capitalize(⾸字母⼤写)
字间距
letter-spacing:value;
⽂本流
lay-flow:horizontal|vertical-ideographic(只IE8以前有⽤)
font的综合属性
font: bold italic ⾏⾼/字号（必有） 字体（必有）
列表的样式
前提: 不需要 small point
li{
list-style:none;
}
列表项图标
列表项图标的样式
list-style-type :circle
列表项图标在li 的位置
list-style-position:inside 内|outside 外|;
设置列表图标
list-style-image:url();
ps : 位置⽆法控制，⼀般不使⽤；
列表样式的全设置
list-style:type position;
颜⾊和背景
背景颜⾊
background-color:red;
背景图
background-image:url();
背景是否重复
background-image:repeat-x|repeat-y |no-repeat;
图⽚背景的位置
background-position: right bottom;
可以是 百分⽐ px left right top center bottom;
只有⼀个值的时候 ，⾃动添加默认值（center bottom）。
当背景图⼤于盒⼦的时候，背景图是显⽰不完的。
当背景no-repeat不设置不重复是，图⽚会⾃动重复填充背景。当位置向下向右时会出现⾃动填充图⽚的右边部分。 （在图⽚合并时使⽤到）
当使⽤backgroud时 可能会因为选择符的优先级覆盖background-image
background-position
图⽚位置就不会改变。
background: color url norepeat 0 0;
background 中的属性只有⽔平和垂直的顺序不能改，其他都可改。
background-attachment:fixed(固定背景窗⼝上，跟容器内的位置⽆关，固定可视窗⼝位置)|scroll;
body 到底多⼤？
body 是内容撑开的，是不固定的。
容器居中
margin:0 auto ;//
边框
border: width style color；
border-width: 上右下左|上 左右 下| 上下 左右；
border-style：上右下左|上 左右 下| 上下 左右；
border-color：上右下左|上 左右 下| 上下 左右；
border-top：
border-top-width:
border-top-style:
border-top-color:
边框要算在盒⼦的宽⾼上
圆⾓边框
border-radius:
左上⾓ 右上⾓ 右下⾓ 左下⾓
8-10px
50px/20px (⽔平⽅向/垂直⽅向)
% (根据元素⼤⼩)
##浮动 float
浮动可以使独占⼀⾏的元素可以同⾏。
浮动后元素本⾝不占位置了，脱离⽂档流了。
但是盒⼦中的内容不跟随容器浮动（半脱离⽂档流）
clear:
清楚前⾯的浮动，后⾯的元素就正常了，独占⼀⾏。否则后⾯的⽂档流就不正常了。
浮动的元素不会浮动之前的元素。
auto和 100% 不⼀样。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。