css篇学习笔记（四）

十六、文档流

layout（布局）：

一、文档流（normal flow）

---网页是一个多层结构，一层摞着一层

---通过css可以为每一层设置样式

---作为用户来讲，只能看到最顶上一层

---这些层中最底下的一层称为文档流，文档流是网页的基础

我们所创建的元素默认都是在文档流中进行排列

【2】对于我们来说，元素一共有两个状态：

（1）在文档流中（2）不在文档流中（脱离文档流）

【3】元素在文档流中有什么特点

---块元素

块元素会在页面中独占一行（自上向下垂直排列）

默认宽度是父元素的全部（会把父元素撑满）

默认高度是被内容（子元素）撑开

---行内元素

行内元素不会独占页面一行，只占自身大小

行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，元素会换到第二行继续自 左向右水平排列（与书写习惯一致）

行内元素的默认宽度和高度都是被内容撑开

二、 盒模型(重点)

盒模型、盒子模型、框模型（box model）

一个盒子的可见框的大小是由内容区，内边距，边框共同决定；所以在计算盒子大小的时候，需要将这三个区域加到一起计算。

---CSS将页面中的所有元素都设计为一个矩形的盒子

---将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

---每一个盒子都由以下几个部分组成：

【1】内容区（content）元素中所有的子元素和文本内容都在内容区中排列

-内容区的大小由width和height两个属性来设置

-width设置内容区的宽度

-height设置内容区的高度

【2】内边距（padding)

内容区和边框之间的距离叫做内边距

一共有四个方向的内边距

-padding-top

-padding-right

-padding-bottom

-padding-left

padding：10px 20px 30px 40px;

(上右下左)

内边距的设置会影响盒子的大小

背景颜色会延申到内边距上

【3】边框（border）:

边框属于盒子的边缘，边框里边属于盒子的内部，出了边框都是盒子的外部（边框大小会影响到整个盒子的大小）

了解即可：

要设置边框，至少需要设置三个样式： -边框的宽度：border-width（默认值：一般都是3px）

四个值：上 右 下 左

三个值：上 左右 下

两个值：上下 左右

（除了border-width,我们还有一组border-XXX-width，XXX可以是top（上）、right（右）、bottom（下）、left（左） 用来单独指定某一个边的宽度）

边框的颜色：border-color（同上 ，也有border-XXX-color）（默认值为color的值）

四个值：上 右 下 左

三个值：上 左右 下

两个值：上下 左右

-边框的风格：border-style（实线还是虚线）（同上，也有border-XXX-style）（默认值是none（没有边框））

（solid---实线 dotted---点状虚线 dashed---线状虚线 double---双线 ）

四个值：上 右 下 左

三个值：上 左右 下

两个值：上下 左右

最常用：

border简写属性：通过该属性可以同同时设置边框所有的相关样式，并且没有顺序要求;

border:soild 10px yellow;

规定一个边：

border-top(上) ​ border-right（右） ​ border-bottom（下）

border-left（左）

例：

 border-top:10px yellow soild;
border-right:none

【4】外边距（margin）

margin会影响元素实际占用大小

---外边距不会影响盒子可见框的大小

---但是会影响盒子的位置

一共有四个方向的外边距：

margin-top（上外边距）

margin-right（右外边距）（默认效果下不会产生任何效果）

margin-bottom（下外边距）

margin-left（左外边距）

--元素在页面中，是按照自左向右的顺序排列的，所以默认情况下，如果我们设置的是左或上外边距则会移动元素自身，设置右或下外边距会移动其他元素。

三、盒子的水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

​
            margin-left:10px;
            border-left:red 2px solid;
            padding-left:10px;
            width:50px;
            padding-right:10px;
            border-right:2px red solid;
            margin-right:10px;

必须满足:

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度(相加必须等于其父元素内容区的宽度)

如果相加结果等式不成立则称为过渡约束，等式会自动调整

-----这七个之中没有auto的情况，浏览器会自动调整margin-right的值，使等式满足。

-----这七个之中有三个值可以设置成auto，width 、margin-left、margin-right

如果某个值为auto，则会调整为auto的那个值，使等式成立

width默认的值就是auto，如果不写width，就调整width

------如果将一个宽度和一个外边距设置为auto，则width会最大，另一个设置为auto的外边距会自动为0.

------将三个值都设置成auto，则width为0，外边距都为0.

----如果将两个外边距设置成auto，宽度值固定，则两个外边距一样。

经常利用这一特点使一个元素在其父元素中水平局中。

width:XXX;
margin-left:auto;
margin-right:auto;
或者
width:XXX;
margin：0 auto;

margin可以是负值

四、盒子的垂直方向布局

没有什么特殊的。

子元素是在父元素内容区排列的，如果子元素的大小超过了父元素，则会从父元素中溢出。

使用overflow属性来设置父元素如何处理溢出的子元素

可选值：

【1】visible----默认值，子元素会从父元素中溢出，在父元素外部的位置显示

overflow:visible;

【2】hidden---隐藏，溢出的内容将会被剪裁不会显示（一剪没）

【3】scroll---滚，生成两个滚动条，通过滚动条查看完整的内容

【4】auto---根据需要生成滚动条

overflow-x----单独处理水平方向的

overflow-y----单独处理垂直方向的

五、盒子模型-外边距的折叠

垂直外边距的折叠 （重叠）

---相邻的垂直方向外边距会发生重叠现象（相邻、垂直）

【1】兄弟元素

---兄弟元素间的相邻垂直外边距会取两者之间的较大值

两者都是正值----------谁大听谁的

特殊情况：

如果相邻的外边距一正一负--------取和

两个都是负值----------取绝对值较大的

兄弟元素外边距的重叠，对于开发是有利的，所以我们不需要进行处理

【2】父子元素

---父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

---父子外边距的折叠会影响到页面的布局，必须要进行处理：

1、不用外边距 ，用padding 2、不让垂直，加一个border-top

六、行内元素的盒模型

---行内元素不支持设置宽度和高度，是被内容撑开的

---行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

---行内元素可以设置border，但是垂直方向border不会影响页面的布局

---行内元素可以设置margin，但是垂直方向margin不会影响页面的布局

【1】display属性-----显示，用来设置元素显示的类型

可选值:

1、inline----将元素设置为行内元素

2、block----将元素设置成块元素

3、inline-block----行内块元素，即可与设置宽度和高度，又不会独占一行

table-----将元素设置成一个表格

none----元素不在页面中显示，隐藏

【2】visibility属性----用来设置元素的显示状态（默认值 visible）

可选值：

visible ----默认值，元素在页面中正常显示

hidden ---元素在页面中隐藏，不显示，但是依然占据页面位置

十七、浏览器的默认样式

默认样式

---通常情况下，浏览器都会为元素设置一些默认样式

---默认样式的存在会影响到页面的布局，通常情况下在编写网页时必须要去除掉浏览的默认样式（PC端的网页）

去掉默认样式：

方法一：

    body{
        margin:0;
    }
    p{
        margin:0;
    }
    ul{
        margin:0;
        padding:0;
    }

列表风格：list-style：none；---去除项目符号（< ul>前面的）

方法二：

*{
​
margin：0；
​
padding：0；
​
}
ul{
list-style:none;
}
​

方法三：引入一个重置样式的css文件。

<link rel="stylesheet" href="./css/reset.css">

重置样式表

reset.css----直接去除浏览器的样式进行重置

normalize.css----对默认样式进行统一

十八、盒子的大小

盒子可见框的大小是由内容区、内边距、边框共同决定

box-sizing：content-box；

用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：

content-box----默认值（宽度和高度用来设置内容区的大小）

border-box----宽度和高度用来设置整个盒子可见框的大小（width和height指的是内容区和内边距和边框的总大小）

十九、轮廓阴影和圆角

显示效果，都不会影响页面的布局

轮廓：

outline-----------用来设置元素的轮廓线，用法和border一摸一样

和border的区别---就是轮廓不会影响到页面的布局

阴影：

box-shadow：用来设置元素的阴影效果，阴影不会影响页面的布局

默认情况下阴影在元素的正下方

box-shadow：10px 10px 10px rgba（0，0，0，.3）;

第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动

第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动

第三个值：阴影的模糊半径，值越大，越模糊

第四个值：设置阴影的颜色，一般会用透明效果rgba（0，0，0，.3）

圆角：

一般盒子模型的角都是直角，用border-radius设置圆角

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

border-top-left-radius:50px 100px;(椭圆)

x方向半径为50px; y方向半径为100px;

圆角设置的是圆的半径大小

border-radius：

【1】border-radius:10px 20px 30px 40px;

四个值：左上 右上 右下 左下

【2】border-radius:10px 20px 30px;

三个值：左上 右上/左下 右下

【3】border-radius:10px 20px;

两个值：左上/右下 右上/左下

【4】border-radius：10px;

一个值：四个方向都为10px;

border-radius：20px / 40px;

横向20px 纵向40px

要设置成圆形：border-radius：50%；

二十、浮动（float）

通过浮动可以使一个元素向其父元素的左侧或右侧移动

控制元素在父元素中向左向右浮动

使用float属性来设置元素的浮动

float的可选值：

默认值：float:none; 元素不浮动

left---------元素向左浮动

right----------元素向右浮动

注意：

【1】元素设置浮动以后（只要float的值不是none，就叫设置浮动），水平布局的等式便不需要强制成立了

【2】元素设置浮动以后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

二十一、浮动的特点

特点一：浮动元素不会盖文字

浮动元素不会盖住文字，文字会自动环绕在浮动元素周围

所以我们可以利用浮动来设置文字环绕图片效果

特点二：

元素设置浮动以后就会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

脱离文档流的特点：

块元素（div）：

1、块元素不在独占页面一行

2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素（span):

行内元素脱离文档流后会变成块元素，特点和块元素一样，脱离文档流以后，不需要再区分块和行内了。