HTML,CSS基础总结

1.CSS可以提高代码的复用性，将内容和表现分离。

2.使用CSS的三种方式：行内式，内联式，外联式。

*检查：F12-->网络 刷新页面时加载两个文件：html,css。如果有一个文件没有加载则表示加载时有问题。

3.CSS常用选择器

*元素选择器 元素名{ }

*类选择器 .类名{ }

*id选择器 #id名{ }

*并集选择器 选择器1 选择器2 { }

*儿子选择器 选择器1>选择器 { }（下一级所有）

*伪类选择器 link(默认状态) hover(鼠标悬停) active(鼠标按下) visited(访问之后)

4.CSS特性

*继承性（如颜色，字体）

*层叠性

同一个元素如果存在多个选择器对其进行了css设置,对于不冲突的样式可以叠加，冲突的样式进行层叠覆盖，覆盖时参考下一特性。

*优先级 行内>内部>外部 同一级，看权重。id>class>标记 继承过来的权重为0

5.CSS声明

*边框 border 三要素四方向

border-style:  border-width:  border-color:  top  right  bottom  left

合并写法：border: 1px solid red;(三要素)

6.盒子模型 四大元素：宽，内边距（padding），外边距(margin)，边框 四大方向：上左下右

*背景 background

background-color
background-img
background-repeat
background-attachment
background-position
合并写法：
background:色 图 铺 定 位/大小
ps：颜色 rgba
 ***快速开发指南：
1.新建页面之后，编写外部样式表文件，引入到html页面
2.浏览器打开页面->f12->sources->打开css文件右边编写样式,左边查看效果

3.样式编写完成将样式文件整体复制到自己项目的css文件中保存

1.居中问题（水平）
    1）文字居中
    text-align:center
    2)表格整体居中
    align:center
    3)已知宽度的盒子居中
    margin:0 auto;

    *里面盒子的margin-left:(外width-内width)/2

2.margin-外边距（top,right,bottom,left）
    合并写法：中间用空格
    上 左右 下（三个值）
    上下 左右（两个值）
    上下左右（四个值）
    padding-内边距（同margin）

    不同：会撑开盒子宽高

3.元素的分区
    块级（div h1）
    独占一行，可以设置宽高 从上往下
    行内（span label）
    可以跟其它元素共享一行，不可以设置宽高 从左往右
    行内块 可以设置宽高，并且可以跟其它元素共享一行 从左往右
    可以通过display属性修改元素分区形式（显示方式）
    display
    block:块级元素
    inline:行内元素
    inline-block行内块
    none:隐藏（释放空间）

    opacity:0;（不释放空间）

4.定位
    流布局（默认的）
    定位：指定元素相对于正常位置应该出现的位置
    position
    relative->相对定位->不脱标 不会让出原来的位置
        相对于原本应该出现的位置移动
    absolute->绝对定位->脱标 让出原先的位置
        相对于定位了的祖先节点移动
    fixed固定定位 脱标
        通常固定定位结合bottom一起使用
    z-index堆叠 10数值变大 距离用户越近
        浮动定位->脱标
    float:left float:right
        可以用浮动将li显示在同一行，结合list-style:none
        浮动的元素无法撑开父盒子的高度
        此时需要清除浮动带来的影响
            清除的方式3种：
            1)给父盒子添加overflow:hidden
            2)给父盒子添加固定高度
            3)给父元素添加用来清除浮动的节点，只是该节点添加clear：both属性
            4)伪元素法：div:after