我的前端学习3

CSS文档流：

--每个网页都可以看成很多很多层的一个自上向下排列

--作为用户来说我们能够看得到的是最顶层的

--我们可以通过css来进行层级的切换

--在网页的最底层，我们就称之为文档流

--所有的元素初始状态就是呈现在文档流之中

 

在文档流之中，元素的特点

块级元素

--在文档流中独占一行，垂直方向自上向下排列

--在文档流之中的宽度默认情况下跟父元素的宽度保持一致

--在文档流之中的高度默认情况下被子元素撑开

行内元素

--在文档流之中不独占一行

--在一行中自左向右进行排列，如果一行排列不完全，然后换行继续自左向右进行排列

--默认宽，高都是被子元素所撑开

 

CSS盒子模型：

--组成部分：内容区（content）

内容区（content）

内边距（padding）

外边距(margin)

边框(border)

--内容区主要由宽度和高度决定，元素中的子元素或文本内容都必须包含在内容区之中

width--决定了内容区的宽度

height--决定了内容区的高度

 

CSS盒子模型内边距：

内边距：边框与内容区的间隔距离

取值

padding-top 上

padding-right 右

padding-bottom 下

padding-left 左

 

 

CSS盒子模型外边距：

外边距：margin

-外边距同样同分4个方向的外边距

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

 

margin-top:上外边距,如果上外边距是正值，那么元素向下移动

margin-right:右外边距,默认情况下设置有外边距没有效果

margin-bottom:下外边距,如果下边距是正值，那么下面的元素会向下移动

margin-left:左外边距，如果设置为正值，元素会向右移动

 

 

CSS盒子模型边框：

边框-边框里面属于盒子的内部；边框的外面属性盒子的外部

设置边框至少需要3个属性：

border-width:设置边框的宽度

border-color:设置边框的颜色

border-style:设置边框显示的样式

取值：

solid---实线

dashed---虚线

double---双线

dotted---点状虚线

 

边框的简写方式：border

 

 

CSS盒子模型水平布局：

盒子的水平布局由以下几个属性共同决定

margin-left/right

border-left/right

padding-left/right

width

 

必须满足这个等式

margin-left/right+border-left/right+padding-left/right+width=父元素内容区的宽度

如果我们只设置了宽度，并没有设置其他属性，那么浏览器自动调整margin-right来使等式成立

 

 

 

 

CSS盒子模型垂直布局：

垂直布局

默认情况下，跟子元素的高度一致（由子元素撑开父元素的高度）

使用overflow属性

--visible，默认值，超出父元素的内容显示在父元素之外

--hidden,剪切掉超出父元素范围的内容

--scroll,自动生成垂直和水平方向滚动条

--auto,自适应生成滚动条

overflow: hidden;

/* 这种方式隐藏元素只是肉眼看不见而已，但是却存在于网页中，会影响网页的布局 */

 

visibility: hidden;

/* 这种隐藏方式是真的在网页中删除掉了这个元素，不会影响网页的布局 */

 

 

CSS行内元素盒子模型：

行内元素的盒子模型

--行内元素不支持设置宽跟高，只能由子元素或者文本所撑开

--行内元素不支持垂直方向上的内边距,只是我们能够看到下内边距的效果而已

--行内元素不支持垂直方向上的边框,只是我们能够看到下边框的效果而已

--行内元素不支持垂直方向上的外边距

需求：我们非要给行内元素设置宽高？？

这个时候就需要display这个属性进行元素类型的切换

display的取值

--block,块元素

--in-line,行内元素

--inline-block,行内块元素--可以设置宽高，而且在一行进行排列

--table,表格

--none,隐藏元素，从网页中移除掉了

 

 

CSS浏览器默认样式：

/* 专门用来去除列表前面的标记 */

list-style: none;

/* 专门用来去除超链接的下划线 */

text-decoration: none;

 

 

CSS盒子尺寸：

盒子的可见框大小由边框，内边框，内容区组成

box-sizing的属性：用来设置width和height

content-box：默认值

border-box：当我们给盒子设置border-box的时候，width和height就是设置可见框的大小

 

 

 

 

CSS盒子轮廓和阴影：

盒子的轮廓：outline，只是给元素可见区域外层添加样式，不会影响页面布局。

语法:

outline:10px solid red;

 

盒子的阴影：box-shadow

第一个属性值:水平偏移，如果为正，向右偏移，如果为负，则向左偏移。（px为单位）

第二个属性值：竖直偏移，如果为正，向下，负，向上（px为单位）

第三个属性值：模糊半径（px为单位）值越大，模糊效果越强

第四值属性值：颜色

 

 

 

CSS圆角设置：border-radius：50%//也是圆角简写方式

圆角的分类：

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

 

 

CSS浮动：float

通过使用浮动我们可以使元素在父元素上左右移动

float属性值：

--left：元素向左移动

--none：默认值，元素没有浮动

--right：元素向右移动

 

浮动特点：

1.当我们给元素设置了浮动之后，元素就会脱离文档流，然后后面文档中的元素就会自动补位。

2.当元素浮动之后，默认情况还是在父元素之中。

3.给元素设置浮动之后，会自动在父元素从左往右排列

4.如果浮动元素有文档流之中的元素，不会超过文档流元素的位置

5.如果浮动元素还有浮动元素，最多跟上一个元素同行，不会超过上一个浮动元素位置

6.浮动元素不会盖住文字，可以用来做文字的环绕效果

7.当元素浮动之后，脱离了文档流，元素就不需要满足水平布局的等式，而是会有一些其他的特点

块级元素：

-就不需要满足水平布局的等式

-默认宽高被内容撑开

-就不需要独占一行行内元素

-支持设置宽高

总结：不管是块级元素还是行内元素，脱离文档流之后，都类型行内块元素

 

 

CSS高度塌陷：

当父元素开启浮动后，子元素脱离文档流，父元素的高度不能被子元素称开

 

BFC（block formatting context）：块级歌手化环境

1.设置元素的浮动（不推荐）

2.设置元素的display为inline-block（不推荐）

3.设置元素的overflow为hidden（推荐）

 

开启BFC

1.设置高度塌陷的问题

2.解决父子元素之间的垂直外边距的重叠现象

3.开启BFC的元素可以包含浮动的元素