CSS基本样式

CSS基本样式：

display : 显示框类型
    block inline inline-block none

浮动 ：让块做左右布局的。

    float : left / right  ( 会脱离文档流 , 会沿着父容器靠左排列或靠右排列 )

    问题：浮动的元素会影响到后面元素的布局。如果不希望浮动的影响，利用clear属性。

        clear : left / right / both  ( 只对块起作用 )

        特殊的嵌套解决方案：.clearfix:after{ content:""; clear:both; display: block;}

overflow : 溢出隐藏

    hidden / scroll / auto

opacity / rgba : 透明度

cursor : 手势

定位：做复杂布局用到的，适合做叠加的布局。

    position : 
        相对定位：  relative
            特性1：只加相对定位，对当前元素没有任何影响。
            特性2：相对于当前元素自身进行位置偏移，0 0点在当前元素的左上角。
            特性3：不会影响到其他元素。
            特性4：元素还在文档流中。
        绝对定位：  absolute
            特性1：元素脱离文档流。
            特性2：相对于整个页面进行位置偏移。由定位的方向决定偏移的位置。
                假如祖先容器有定位模式的情况下，偏移情况会已按照有定位模式的祖先容器进行偏移。
        固定定位：fixed
            特性1：元素脱离文档流。
            特性2：相对于整个可视区进行位置偏移。
        粘性定位：sticky

    定位的方向：
        left right top bottom

HTML的默认样式：

body -> margin : 8px

h1 ->  margin上下 文字大小 文字加粗

p -> margin上下

u -> margin上下  padding左  默认的小圆点

*{ margin:0; padding:0;}
h1,h2,h3{ font-size:16px; font-weight:normal; }
ul{ list-style:none; }
img{ display: block;}
a{ color:xxx; text-decoration:none;}

标签规范：

组合标签
    ul li
    table tr th/td
    select option    
    
块标签（特殊的P标签）

    div ul li p h1 ... 包含：块和内联

    <div>
        <ul></ul>
        <span></span>
    </div>

   p标签不能包含块，只是包含内联


内联（特殊的a标签）

    内联标签是不能包含块标签

    <span>
        <div></div>
    </span>

a标签可以包含块标签：( a不能嵌套a  )

    <a>
        <div></div>
    </a>
    <a>
        <img>
    </a>

CSS优先级：

单一样式（style、id、class、tag、*、继承）、important、群组、层次。
          1000  100   10    1   

特性1：当选择器相同的情况下，后写的样式，优先级高。
特性2: （style > id > class > tag > * > 继承）
特性3: !important可以让优先级提升到最高，但是尽量少用。
特性4: 群组不存在优先级问题，只是对选择器的优化写法。
特性5: 层次 -> 1. 权重比较法  2. 约分比较法


添加样式的方式：
    1. 外部样式 : xxx.css -> link
    2. 内部样式 : xxx.html-> <style></style>
    3. 行间样式 : <tag> -> style属性 

PhotoShop切图：

组成：菜单栏、工具栏、辅助面板。

图片：JPG、PNG、GIF、PSD。

    JPG : 做色彩丰富的图片，一般照片的格式。

    PNG : 可以做透明图。

    GIF : 动图。

    PSD : 是PS工具的图片源文件。（ 对图片进行了分层 ）

    设计师做好了图片 , PSD格式的 ->  前端开发工程师 -> HTML CSS JS 

工具栏：
    移动
    矩形选框
    吸管
    小手  :  空格 + 左键
    放大镜 :  alt + 滚轮

菜单栏:
    标尺 : ctrl + r
    辅助线 : 从标尺上可以拖拽出来

辅助面板:
    图层
    历史记录  
    信息

如何切图：（重点）

    PSD切图方式：
        1. 做一些配置操作
            编辑 -> 首选项 -> 增效工具 -> 启动生成器
            文件 -> 生成 -> 图像资源 -> 自动生成一个assets文件夹
        2. 选中图层，重命名 + 图片格式

    PNG等切图方式：
        1. 利用矩形选框工具，选中要切的图片。
        2. ctrl + c
        3. ctrl + n
        4. ctrl + v
        5. 保存图片
        
    整页截图软件：fscapture