css笔记

1.继承：initial:不继承
inherit：继承

颜色值：1.关键字
2.rgb（）：红色绿色蓝色三原色混合色0—255之间
3.rgba（）：a:透明度0–1之间
4.#16进制

尺寸：1.像素值px
绝对单位
2.em
相对单位1em=16px
3.百分比
相对单位
相对于父级元素
%

p
4.文本样式：color
font-size
font-weight
font-style
font-style
font-indent
font-transform
font-decoration
font-family
字体栈

hellow

>
div{
font-family:‘宋体’，“黑体”，“娃娃体”
}
网络字体：1.下载字体
2.声明字体
@font-face{font-family:‘wangym’;
src:url(XXXXXX);
}
3.使用字体
div{font-family:‘wangym’
}
字体图标库：fontawesome
css
1.引入外部样式文件：link标签
2.使用行内元素
span

iconfont
.css 1.引入css
2.使用

列表样式：
列表内list-style-type
列表外list-styke-position
list-style-

ul
li
ol:start reversed:布尔值
标题列表
word-spacing：单词之间的间距
letter-spacing：字符之间的间距
word-wrap:break-word:超出父元素宽度是否换行显示。

overflow:超出父元素部分如何设置
hidden ：隐藏
scroll：以滚动的形式展示

width
height
max-width
max-height
min-width
min-height

元素的隐藏和显示
display：none：元素的隐藏(隐藏元素所占据的空间)
block：元素的显示
visibility
hidden：元素的隐藏(不隐藏元素所占据的空间，相当于修改了元素的透明度)
visible：元素的显示
列表样式：list-style：list-style-type ；list-style-position；
list-style-image ：url（）；line-height：
表格样式：border-collapse设置表格合并
caption-side：lift/right/top/bottom/

盒子模型：标准盒模型；边框盒模型；
盒子的宽度=content+padding+border+margin
标准盒子/默认盒子/w3c盒子
box-sizzing：content-box ；

特点：
width---->元素内容

边框盒子/怪异盒子
box-sizzing：border-box

特点：width—>盒子

backgroung:-color

边框：
border:
1px solid red
border-image:
border-image-source:url()
border-image-slice;mumber(不写单位，默认单位px)；
border-image-repeat；
repeat
space:用空白链接每个菱形
round：将菱形等比例拉升

html4;
div

---

布局：
默认文档流：
从上到下从左到右的基础文档流

1.display:
inline:将块级元素装换成行内元素
block：将行内元素转换成块级元素
inline-block ：将当前元素转换为兼具行内和块级元素特性的元素

2.浮动布局：
float：left/right

浮动元素对于文字不会遮挡

块级元素设置了浮动属性之后失去了独占一行的特性

行内元素设置了浮动属性之后可以设置宽高性

浮动何时停止：1.遇到父级边框时停止浮动
            2.遇到其他浮动元素时停止浮动
    清除浮动；clear：
    left
    right 
    both
    1.在所有浮动元素之后添加一个块级元素，给块级元素清除浮动元素。
    2.给所有浮动元素的父元素添加：：after{
        content;'';
        
    }