CSS深入理解

网页布局过程：

准备相关的网页元素，本质上准备盒子box
利用CSS设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

网页布局的核心本质：利用CSS摆放盒子
垂直的块级盒子用标准流布局.
多个块级盒子水平显示用浮动布局.
元素在某个盒子内自由移动用定位布局.

CSS盒子模型

作用：网页中的每一个标签，都看成是一个矩形盒子，存放内容的容器。
内容：每个盒子包括内容区域（content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)。

边框线 == 纸箱子 。
内边距 == 填充泡沫（出现在盒子的内容和盒子边缘之间）。
外边距 == 出现在俩个盒子之间，也就是盒子的外面。

border

属性构成:边框宽度 边框样式 边框颜色

border-style属性值:

solid	实线
dashed	虚线
dotted	点线

border-方位名词:设置单个方向的边框
border-collapse:collapse(表示相邻边框合并在一起)

CSS盒子模型的计算
测量盒子大小的时候不量边框.如果测量的时候包含了边框,则需要width/height减去边框宽度.

padding

padding属性可以当作复合属性使用，表示单独给某个方向的页边距。并且padding最多要取四个值。
四值：上 右 左 下
三值：上 右左 下
俩值：上下 左右

效果:设置padding之后,内容和边框都有了距离,添加了内边距.padding影响了盒子的实际大小.
**解决方案:**如果让盒子与原来一致,只需要width/height减去多出来的页边距大小
好处:padding内边距可以撑开盒子,也会使得宽度被修改.如果盒子本身没有height/weight,则此时padding不会撑开盒子大小.
内减模式
给盒子设置属性box-sizing:border-box.

div {
  width:100px;
  height:100px;
  background-color:pink;
  border:10px solid black;
  padding:20px;
  box-sizing:border-box;
  }

Margin

(1)块级盒子水平居中满足条件:盒子指定宽度+盒子的左右外边框均设置为auto

.header {
   margin:0 auto;
   }

(2)行内元素(行内块元素)水平居中:给父元素添加text-align:center

(3)清除默认的内外边距：浏览器会给页面设置默认的内外边距，就是margin和padding，但一般需要先清除之后再后续去设置。

* {
 margin: 0;
 padding: 0;
 }

(4)外边距的折叠现象：

合并问题：
场景：垂直布局的块级元素上下的margin会合并。
结果：最后俩者的距离是margin的最大值。
解决：只给其中一个盒子设置margin就好。

嵌套问题：
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上。最后导致父元素一起向下移动。（坑爹）
解决：
(1)给父元素设置overflow:hidden;
(2)为父元素定义上边框
(3)为父元素定义上内边框

(5)行内元素的内外标签问题：如果想通过margin和padding改变行内标签的垂直位置，无法生效。（margin-top和bottom以及padding—top和bottom都不生效）。

标准流

文档流/普通流:标签按照规定好的默认方式排列.
(1)块级元素会独占一行,从上到下顺序排列

常用元素:div hr p h1-h6 ul ol dl form table

(2)行内元素会按照顺序,从左到右排列,碰到父元素边缘自动换行

span a i em

CSS浮动

结构伪类选择器

作用：根据元素在html中的结构关系查找元素。
优势：减少对于html类的依赖，有利于维持代码的整洁。
场景：常用于查找某父级选择器的子元素。

E：first—child{}	匹配父元素中的第一个子元素，并且是E元素
E：last—child{}	匹配父元素中的最后一个子元素
E：nth-child(n){}	匹配父元素中的第n个元素
E：nth-last-child(n){}	匹配父元素的倒数第n个元素

结构伪类公式

上面伪类选择器的（）可以填公式，n从0开始

功能	公式
偶数	2n even
奇数	2n+1 2n-1 odd
找到第五个往后	n+5
找到前五个	-n+5

伪元素

在网页中非主体内容使用伪元素。
区别：元素（HTML设置的标签）+伪元素（由CSS模拟出来的标签效果）
种类：

::before	在父元素内容的最前面添加一个伪元素
::after	在父元素的最后面添加一个伪元素
注意点：必须设置content属性才能生效+伪元素默认是行内元素,宽和高不生效必须display一下。

.father::before{
  content:"tt";
  }

浮动

定义:浮动可以改变元素标签默认的排列方式.创建浮动框,直到左边缘或者右边缘碰触到包含块或者另外一个浮动框的边缘.

作用：让块级标签完美的在一行排列
浏览器解析行内块或者行内标签的时候，如果标签换行书写，会产生一个空格的距离。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
网页布局第二准侧.先设置盒子的大小, 之后设置盒子的位置.
特点：
(1)浮动元素会脱离标准流，在标准流不占位置。相当于从地面到空中。
(2)浮动的盒子不再保留原来的位置.

(3)如果多个盒子设置了浮动，它们会按照属性值一行内显示并且顶端对齐排列.
(4)浮动的元素相互靠在一起,不会有缝隙,如果父级宽度装不下这些浮动的盒子,多出来的盒子会另起一行对齐.
(5)浮动元素具有行内块元素特性,浮动一行可以显示多个，并且可以设置宽和高，浮动后的标签具有行内块特点。
(6)如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定.浮动的盒子中间是没有缝隙的，是紧挨着一起的.
css书写顺序：浮动display——>放盒子相关属性margin border padding 宽度高度——>文本格式。
(7)一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

清除浮动

含义：清除浮动带来的影响。
情况：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
方法：(自动检测儿子高度)

（1）直接设置父元素的高度。
（2）额外标签法：
给父元素内容的最后添加一个空的块级元素

<div style="clear.both"></div>

通俗易懂但是却增加没意义的标签,结构化较差.

（3）单伪元素清除法
给父元素添加伪元素

.clearfix:after
{
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix
{
*zoom: 1;
}

(4)双伪元素清除法

//解决外边距塌陷的现象
.clearfix::before,
.clearfix::after {
  contexnt:'';
  display:table;
  }
  //真正清除浮动的标签
.clearfix::after{
  clear:both;
  }

（5）给父元素设置overflow:hidden.

网页布局

CSS定位

应用情景:
(1)某个元素可以自由在另一个盒子上移动位置,并且压住其他的盒子
(2)滚动页面的时候,有些部分固定在平面中某个位置

基本概念

作用：将盒子固定到某一个位置,实现块的层叠。
组成:定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定该元素的最终位置.
使用：
（1）设置定位模式

属性名：position
常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

（2）设置偏移值
边偏移有top,bottom,left,right四个属性.表示距离这个位置有多少距离.

边偏移属性	示例	描述
top	top:80px	定位元素相对于父元素上边线的距离
bottom
left
right

偏移值设置俩个方向，水平和垂直各选一个。选取的原则就是就近原则

静态定位static

元素默认定位方式,无定位,它是按照标准流特性摆放位置,没有边偏移.
我们认为它是标准流

相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动。
代码：position:relative
特点：
(1)它是相对于自己原来的位置进行移动.参照点是自己原来的位置.
(2)相对定位之前的位置继续占有,后面的盒子依然以标准流的方式对待.
(3)如果left和right都有，以left为准，同样以top为准。
(4)真的相对定位是给绝对定位当爹的

绝对定位

介绍：拼爹型.相对于非静态定位的父元素进行定位。
代码：position:absolute;
特点：
(1)需要配合方位属性实现移动,默认相对于浏览器的可视区域进行移动
(2)先去找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位.
(3)有父级，但父级没有定位，以浏览器窗口为参照进行定位.
(4)如果祖先元素有定位,就以最近一级的有定位的祖先元素为参考点移动位置.
(5)绝对定位在页面中一定不占位(脱标).

子绝父相

子级适用绝对定位,父级使用相对定位.
(1)子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响到其他兄弟盒子.
(2)父盒子需要加相对定位限制子盒子在父盒子内部显示.

<head>
<style>
 .father {
     positive:absolute;
     right:100px;
     }
 .son {
    positive:position;
     right:100px;     
    }
    </style>
</head>

<body>
<div class="father">
   <div class="son">son
      <div class="sun"></div>
      </div> 
      </div>
 </body>
   

固定定位

介绍：死心眼类型的定位.可以固定到浏览器可视区的位置,适用于浏览器页面滚动的时候位置不会滚动.
代码：position：fixed;
特点：
（1）需要配合方位属性实现移动
（2）相对于浏览器的可视区域移动,跟父元素无关
（3）在页面中不占位置,也是脱标的
(4) 不随浏览器的滚动而滚动
技巧:
固定在版心右侧的位置
(1)让固定盒子left:50%,走到浏览器可视区的一半.
(2)让固定定位的盒子margin-left:版心宽度一半的位置.

绝对定位的盒子居中
加了绝对定位的盒子不能用margin:0 auto定位
水平居中:
(1)left走50%,父容器宽度的一半
(2)margin负值往左边走自己盒子宽度的一半
竖直居中:
(1)top走50%
(2)margin负值往上走自己盒子的一半

粘性定位sticky

相对定位和固定定位的混合
特点:
(1)以浏览器的可视窗口为参照点进行移动元素(固定)
(2)粘性定位占有原先位置(相对)
(3)必须添加top bottom left right才有效

定位总结:

(1)行内元素添加绝对或者固定定位,可以直接设置宽度和高度.
(2)块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小.
(3)脱标的盒子不会出发外边距塌陷(浮动元素和绝对定位都不会触发外边距的合并)
(4)绝对定位(固定定位)会完全压住盒子.
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)

定位的层级顺序

定位的时候可能会出现盒子重叠的情况,可以用z-index来控制盒子的前后次序.(z轴)
(1)数值可以是正整数,负整数或者0,默认是auto.数值越大,盒子越靠上.
(2)如果属性值相同,则按照书写顺序,后来居上.
(3)数字后面不能加单位,只有定位的盒子才有z-index属性

元素的层级关系

不同布局方式元素的层级关系：标准流<浮动<定位
相对，绝对，固定默认层级相同。HTML中写在下面的元素层级更高，会覆盖上面的元素。

CSS装饰

垂直对齐方式

基线：浏览器文字类型元素排版中存在用于对齐的基线。浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐的。

属性名：vertical-aline
属性值：

baseline	默认基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

光标类型

设置鼠标光标在元素上显示的样式
属性名：cursor
属性值：

default	默认值，通常是箭头
pointer	小手效果，提示用户可以单击
text	工字形，提醒用户可以选择文字
move	十字光标，提示用户可以移动

边框圆角

让盒子的角落变得圆润
属性名：border-radius
常见取值：数字+px,百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
(1)正方形设置成圆:数值设置为一半的宽度或高度
(2)按照顺时针方向赋值

元素本身隐藏

类似于网站广告,当我们点击关闭的时候就不见了,但是当重新刷新页面的时候会重新出现.
**本质:**让某个元素本身在屏幕中不可见。
方法：
(1)visibillity:用于指定一个元素是可见还是隐藏

visibility:hidden;
//隐藏之后但是位置继续保留
visibility:visible;
//元素可视

(2)
display属性用于设置一个元素如何显示.

display:none	隐藏对象,不再占有原来的位置
display:block	除了转换为块级元素之外,还有显示元素的意思

(3)overflow显示

overflow溢出部分显示效果

作用:控制内容溢出部分的显示效果
属性名：overflow
属性值：

visible	默认值，溢出的部分可见
hidden	溢出的部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或者隐藏滚动条

(1)一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局.
(2)但是如果是有定位的盒子,慎用overflow:hidden,因此它会影响多余的部分

盒子阴影

box-shadow

文字阴影

text-shadow:h-shadow v-shadow blur color