css学习小结

css的三大特性

层叠性

就近原则，前面的被后面的覆盖

继承性

1. 对文本，字体的属性一般可以继承
   如：行间距

    <style>
        body {
            font: 12px/1.5 "Microsoft yahei";
        }
    </style>

2. 父子盒子的宽高可以继承

优先级

1. 选择器同，层叠性
2. 选择器不同，按优先级
   
3. 复合选择器会有权重叠加，但永远不进位
4. 继承的权重为0
5. ** 写完整的复合选择器，保证权重叠加，不会因为权重过低导致样式丢失**

盒子模型（广义）

网页布局过程

准备好局部容器，装饰好容器，放好位置，再装内容

border 加在既有大小外面(变小)

解决方法：测量盒子大小的时候，不量边框

table

单元格，表头，表格有单独的边框

border-collapse：collapse(1+1=1)

border-radius:npx

原理：拿一个半径为npx的⚪在四个角切割

** 常用的**

1. 圆形：正方形的盒子，该属性值为50%
2. 圆角矩形设置为高度一半

padding（变大）

解决方法：让width/height减去多出来的内边框大小

特殊情况:盒子本身没有指定w/h，此时padding不会撑开盒子

在块元素里放块元素时，只需she

padding+行高做出来的导航栏

padding属性值的写法

顺时针

运用：字数不同的导航栏

margin

水平居中

1. 块元素：指定高度后，用margin
2. 行内，行内块：父元素设置text-align：center
   ** 把行内，行内块元素当作纯文本来理解，也是极好的**

父子关系的块元素，父元素有上外边距，子元素也有，（或者只有子元素有上外边距），父元素会跟着子元素塌陷（浮动的子元素不会产生上述问题）

清除内外边距

        *{
            margin: 0;
            padding: 0;
        }

** 行内元素尽量只设置左右的内外边距**

案例(产品模块)

info-详情

百分比的大小是相对于父元素

h标签可以索引，产品名用h比较好

产品描述用p标签

必不可少的css样式积累

        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }

案例（侧栏）

pink p164 详细讲解了

box-shadow

不占位置

            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);

布局

标准流

浮动

浮动用在：多个块级元素横向排列

效果:浮动元素具有行内块元素特点（但是紧挨着的）

如果行内元素有了浮动，则不需要转换就可以直接给高度，宽度

** 和浏览器一样宽的盒子不需要给宽度**

注意点

1. 浮动与标准流的父盒子搭配
2. 一浮全浮
3. 浮动的盒子只影响后面的标准流，不影响前面。
   例：三个盒子，第二个盒子浮动，只会导致第三个盒子上移、被覆盖，无法影响到第一个盒子。

不给高度，想让内容撑起高度(清除浮动)

** 结构很重要，最好不要加没有内容的盒子**

1. 法一，插入的必须是块级元素

.box{
            clear: both;
        }
            <div class="clear"></div>

2. 法3（法1的升级版）
   
3. 法4（小米官方商城所用）
   

ps

ctrl + R 调出标尺

按住空格键，可拖动ps视图

矩形选框工具用来测量大小

常见图片格式

psd不能直接放在页面中

ps切图

图层切图

1. 单个图层：右击图层>快速导出为png
2. 多个：多选>合成>

切片工具切图

裁剪>切片(选框)>文件>导出>存储为web所用格式>JPEG>存储>切片：选中的切片
** 图层处的背景去掉，即变成背景透明 且导出格式用png-24**

cutterman工具切图

css属性书写顺序

导航栏制作

定位

用在：盒子在盒子内移动，或者固定在屏幕的某个位置

relative

相对其原来位置移动（自恋型），原来位置依旧保留，不脱标

absolute

相对于祖先元素来说的，找最近的有相对定位的上一级，都没有即以浏览器定位，脱标

fixed

以可视窗口为参照定位，脱标

固定在版心右侧的侧栏

.fixed{
    position: fixed;
    top:400px;
    left: 50%;
    /* 版心宽度的一半 */
    margin-left: 550px;
    width: 40px;
    /* height: 100px; */
    background-color: #add5a2;
}

sticky（因ie不兼容，不便使用）

绝对、相对的盒子会压在粘性定位的盒子上？出bug一样？

定位的叠放顺序 z-index

1. 值可为正，负整数，0，默认为auto，数值越大，盒子越上
2. 值同，则书写顺序，后来居上
3. 不加单位
4. 只有定位的盒子有此属性

绝对定位(ab)盒子水平居中

margin失效了
left:50%;
margin-left:-宽度的一半；

定位的特殊属性同浮动

1. 定位的盒子比别人高一级，展现在上面

浮动的元素不会压住标准流的文字，定位会

原因：float最初目的就是做文字环绕效果的

元素的显示和隐藏

display（用的多，结合js）

visibility

overflow：auto超出有滚动条，不超没有

案例：鼠标经过显示遮罩（ab+display）

1. 继承宽高，可以写成100%
   ** 隐藏了无法hover**

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4) url(../img/播放.png) no-repeat center;
}
.pic:hover .mask{
    display: block;
}

精灵图

来源：减轻服务器压力

字体图标iconfont

1. 轻量级
2. 灵活性：可以随意更改样式
   ** 资料来源网络，侵权必删**

网站推荐

1. icomoon
2. 阿里iconfont字库

三角形

.box {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #add5a2;
}

优化用户界面样式

鼠标样式

表单轮廓outline:none

防止拖拽文本域 resize:none

文本域双标签写一行，以免光标到边框出现距离

vertical-align:middle(设在图片）

用于：图片，表单(行内块)，文字的垂直对齐

图片底侧空白缝隙

1. 改变基线位置
2. display:block;

单行文字溢出，省略号显示

多行

由于兼容性问题，移动端用的多

** 后端做起来简单**

常见布局技巧

盒子的细线边框(margin负值)

margin-left:-1px;

:hover

ul li:hover {
    z-index: 0;
    border: 1px solid orange;
}

左边图片，右边视频介绍(float)

img用盒子包着好

行内块

横向菜单

** php分页技术**

三角强化(直角)

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

** 浮动是并排好方法**

p272 案例，巧妙

黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩

快捷键积累

shift+alt+鼠标 光标占位变长

ctrl+G vscode调出查找任意一行工具