前端与CSS(中)|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第三天

一.盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。

在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

边框(border)：

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式(solid实线边框 dashed虚线边框 dotted点线边框)
border-color	边框的颜色

border：1px solid red;没有顺序

边框分开写法： border-top border-bottom

border-collapse:collapse 表示相邻的边框合并在一起

注意:边框会影响盒子的实际大小

内边距(padding)：

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-top	上内边距

值的个数	表达意思
padding:5px	1个值，代表上下左右5像素内边距
padding:5px 10px	2个值，代表上下内边距10像素
padding:5px 10px 20px	3个值，代表上内边距5像素，左右边距10像素，下边距20像素
padding:5px 10px 20px 30px	4个值，代表上右下左

外边距(margin)：

margin属性用于设置外边距,及控制盒子之间的距离

margin简写和padding简写是一样的

外边距典型应用：外边距可以让块级盒子水平居中，但必须满足两个条件：（1）盒子必须指定宽度（2）盒子左右的外边距都设置为auto(居中)

列：
        .header{ width:960px; margin:0 auto;}
        常见的写法，以下三种：
        margin-left:auto;margin-right:auto;
        margin:auto;
        margin:0 auto;

注意：以上方法让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:ceter即可。

嵌套块元素垂直外边距的塌陷：

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素回塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

清除内外边距：


        *{
            padding:0;//清除内边距
            margin:0;//清除外边距
        }

BFC（块级格式上下文）

BFC的概念：

BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则：

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC？

根元素，即HTML元素
float的值不为none
position为absolute或fixed
display的值为inline-block、table-cell、table-caption
overflow的值不为visible

BFC的使用场景：

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

二.圆角边框(重点)

border-radius属性用于设置元素的外边框圆角

border-radius:length
radius半径（园的半径）原理：（椭）圆与边框的交集形成原圆角的效果
 参数值可以为数值或者百分比的形式

如果是正方形，想要设置一个园，把数值修改为高度或者宽度的一半即可，或者直接写成50%

如果是个矩形，设置为高度的一般就可以了

            简写属性四个值： border-top-left-radius
                            border-top-rigth-radius
                            border-bottom-left-radius
                            border-bottom-rigth-radius

盒子阴影

使用box-shadow属性为盒子添加阴影

   box-shaodw:h-shadow b-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
b-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色，请参阅CSS颜色值
inset	可选，将外部阴影(outset)改为内部阴影

注意：默认是外部阴影(outset),但是不可以写这个单词，否则导致阴影无效盒子阴影不会占空间，不影响其他盒子排列

文字阴影（语法意思同上） text-shadow

 语法：
text-shaodw:h-shadow b-shadow blur  color

三.CSS浮动

传统网页布局的三种方式

普通流
浮动
定位

标准流(普通流/文档流):

所谓的标准流：就是标签按照规定好默认方式排列(块级元素、行内元素、行内块元素)

浮动(float):

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框得边缘

    float:属性
    属性值      描述
    none       元素不浮动（默认值）
    left          元素向左浮动
    right       元素向右浮动

浮动特性(重难点):

设置浮动(float)得元素重要特征：

脱离标准普通流得控制移动到之指定位置（俗称脱标）
浮动的盒子不再保留原先的位置

清除浮动:

清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

 语法：
        clear：属性值
        
        属性值      描述
        left        不允许左侧有浮动元素(清除左侧浮动的影响)
        right       不允许右侧有浮动元素(清除右侧浮动的影响)
        both        同时清除左右两侧浮动的影响

        清除浮动的策略是：闭合浮动

清除浮动的方法:

    1.额外标签法也称隔墙法，是W3C推荐的做法
        额外标签会在浮动元素末尾添加一个空的标签
        <div style="clear:both"></div>
    2.父级添加overflow属性
        可以给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll
            缺点：无法显示溢出的部分
    3.父级添加after伪元素
        .clearfix:after{
            content:"";
            dispaly:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .clearfix{
            *zoom:1;
        }
    4.父级添加双伪元素
        .clearfix:before,clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            *zoom:1; //照顾低版本浏览器
        }

四.PS

jpg：产品类的图片经常使用
gif：实际经常用于小动画
png：如果想要切成背景透明的图片
psd：可以直接复制上面文字，获得图片，还可以测量大小和距离

五.定位

定位组成：

定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子
定位 = 定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

边偏移：

边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right

    边偏移属性       示列         描述
    top             top:08px    顶端偏移量，定义元素相对于其父元素上边线的距离
    bottom
    left
    right

静态定位static(了解)：

静态定位是元素的默认定位方式，无定位的意义

        语法：
        选择器{position:static;}

静态定位按照标准流特性摆放位置，它没有边偏移（静态定位在布局时很少用到）

相对定位relative(重要)：

相对定位时元素在移动的时候，是相对它原来的位置来说

 语法：
        选择器{position:relative;}

相对定位的特点：

1.他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来咋标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位absolute(重要)：

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的

   语法：
            position:absolute

绝对定位的特点：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近的一级有定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置(脱标)

子绝父相的由来（子级时绝对定位的话，父级要用相对定位）

1.子绝绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的盒子兄弟
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此父亲只能时相对定位

总结：因为父级需要占有位置，因此时相对定位，子盒子不需要占有位置，则是绝对定位

固定定位fixed（重要）：

固定定位是元素固定于浏览器可视的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

语法：
        position:fixed

固定定位的特点：

以浏览器的可视窗口为参照移动元素

跟父元素没有任何关系
不随滚动条滚动

固定定位不在占有原先的位置

固定定位时脱标的，其实固定定位也可以看作是一种特殊的绝定定位

 固定定位小技巧：固定在版心右侧位置
 算法：、
     1.让固定定位的盒子left:50%，走到浏览器可视区（也可以看作版心）的一半位置
     2.让固定定位的盒子margin-left：版心官渡的一半距离，多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了

粘性定位sticky（了解）：

语法：  
        position:sticky;
        top:10px;

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位）
2.粘性定位占有原先的位置（相对定位的特点）
3.必须添加top\left\right\bottom其中一个才有效跟页面滚动搭配使用，兼容性较差，IE不支持

定位叠放次序z-index：

     语法：
        z-index:1;

1.数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上
2.如果属性值相同，按照书写顺序，后来居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性

定位的拓展：

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto实现水平居中，但可以通过以下算法实现水平和垂直居中

1.left:50%;让盒子的左侧移动到父级元素的水平中心位置
2.margin-left：-100px;让盒子向做移动自身宽度的一半

定位的特殊性（绝对定位和固定定位也和浮动类似）：

1.行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
2.块级元素添加绝对定位或固定定位，如果不给宽度或者高度，默认大小是内容的大小

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所有的内容
浮动之所以不会压住文字，因为浮动最初是为了文字环绕浮动元素