Html&Css 基础总结（基础好了才是最能打的）五-大结局

Html&Css 基础学习回顾总结

Html&Css 基础总结（基础好了才是最能打的）一
Html&Css 基础总结（基础好了才是最能打的）二
Html&Css 基础总结（基础好了才是最能打的）三
Html&Css 基础总结（基础好了才是最能打的）四

前言

这是作者的第六天的总结篇章， 之后不会再更新有关html和css的基础内容， 最近又懈怠了~
本章是个大总结篇章~

视频在这里~ @B站黑马程序员视频

书中错误在所难免，如果有小伙伴发现的话恳请斧正，在此先谢过咯~

本篇文章主要讲述标准流 & 浮动 & Flex 布局

结构伪类选择器

根据元素的 结构关系 查找元素；

例如：

li:first-child{
//这个就是表示查找第一个元素；
}
li:last-child{
//这个就是表示查找最后一个元素
}
li:nth-child{
//根据元素的结构关系查找多个元素
n 可以是2n,2n+1, 5n 等，类似于这种，但是感觉用的不多；
}

伪元素选择器

创建虚拟元素， 用来摆放装饰性的内容

E::before{
content；"before 伪元素 div p ";
}
E::after{
content:"after 伪元素 div p "；
}

注意的点是， 必须设置 content 属性， 用来设置伪元素的内容， 如果没有内容，则引号留空；
伪元素默认的是行内显示模式;
权重和标签选择器相同；

盒子模型

作用： 布局网页， 拜访盒子和内容；

盒子模型的组成部分

盒子模型的重要组成部分：

• 内容区域-设置宽高（widht & height）
• 内边距 -padding 出现在盒子和内容边缘之间；
• 外边距-margin 出现在盒子外面；
• border 边框线；

div{
margin : 50px;
border: 5px soild brown;
padding:20px;

width:200px;
height:200px;
bc（background-color）:pink;
}

盒子模型-边框线

属性名： border（bd）
属性值：边框线粗细 线条样式 颜色 （不区分顺序）
常用线条样式：
soild 实线； dashed 虚线；dotted（点线）

div{
border: 5px soild brown
width:200px;
height:200px;
bc:pingk;
}

当然也可以设置单方向边框线
属性名 border-方位名词 ,例如：

div{
border-top:2px soild red;
border-right;
border-bottom
}

盒子模型-内边距

作用：设置内容 与 盒子边缘之间的距离；
属性名称： padding/ padding-方位名词；
以 像素值；

div{
padding: 30px;
padding-top :10px;
... 不再赘述
}

当然还有一个多值的写法， 从上开始顺时针赋值， 当前方向没有数值的时候，则与对面的取值相同；

div{
padding :30px;
padding:10px 20px 30px 40px;
}

盒子模型-尺寸计算

蛋用？

盒子模型-外边距

作用：拉开两个盒子之间的距离
属性名：margin
属性值与padding 取值相同；

小技巧；如果要版心居中， 则左右的magin 值为 auto（盒子要有宽度）

盒子模型-清除默认样式

margin:0px
padding:0px;

盒子模型-元素溢出

作用：控制溢出元素的内容的显示方式
属性名：overflow；
属性值：
hidden：溢出隐藏；
scorll ：溢出滚动（无论是否溢出，都显示滚动条位置）
auto：溢出滚动（溢出才显示滚动条的位置）

外边距问题-合并现象

场景： 垂直排列的兄弟元素， 上下的margin会合并；
其实不是合并，是依照哪个大的值生效；

外边距问题-塌陷现象

场景：父子级别的标签， 子级的添加上外边距会产生塌陷问题；
现象：子级别设置margintop，那么父级别也会跟着往下走；
解决办法：
1.取消子级的margin， 父级设置padding；
2.父级设置overflow:Hidden
3.父级设置border-top；

行内元素-内外边距问题

场景：行内元素添加margin和padding， 无法改变元素的垂直位置；
解决办法： 给行内元素添加line-height 可以改变垂直位置；

span{
//margin和padding 属性无法改变垂直位置
margin：50px
padding：20px
//行高可以改变垂直位置;
line-height:100px 个人感觉用的很少，这种方式很机械，不灵活
}

盒子模型 -圆角

属性border-radius
属性值：数字px/百分比
提示：属性值就是圆角半径 ；
可以设置四个值，值得取值方式跟margin & padding一样 ；

盒子模型 -阴影

作用： 给元素设置阴影效果
属性名：box-shadow；
属性值 ；x

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则
例如： 块元素独占一行， 行内元素可以一行显示多个；

Flex

Flex布局也叫做弹性布局， 是浏览器提倡的布局模型， 非常适合结构化布局，提供了强大的空间分布和对齐能力
Flex 模型不会产生浮动布局中脱标现象， 布局网页更简单更灵活；

Flex 组成

设置方式， 给父元素设置display：flex ,子元素可以自动挤压或拉伸；
组成部分：
弹性容器；
弹性盒子；
主轴（默认在水平方向）
侧轴/交叉轴: 默认在垂直方向；

Flex 布局

创建flex 容器： display:flex
主轴对齐方式：justify-content
侧轴对齐方式：align-items；
某个弹性盒子侧轴对齐方式 align-self；
修改主轴方向：flex-direction;
弹性伸缩比： flex ；几比几
弹性盒子换行 flex-wrap;
行对齐方式： align-content；

Flex 主轴对齐方式 justify-content

属性名称： justify-content;
属性值： flex-start; 默认值， 弹性盒子从起点开始依次排列；
flex-end 弹性盒子洞终点开始依次排列；
center； 弹性盒子沿主轴居中排列；
space-between 弹性盒子沿主轴均匀排列， 空白间距均分在弹性盒子之间；
space-around 弹性盒子沿主轴均匀排列， 空白间距均分在弹性盒子之两侧；
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等；

Flex 侧轴对齐方式

属性名称： align-items
当前弹性容器内所哟路弹性盒子的侧轴对齐方式（弹性容器设置）
属性名称： align-self
单独控制某个弹性盒子的侧轴对齐方式（弹性盒子设置）

属性值：
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器内；
center 弹性盒子沿着侧轴剧中排列；
flex-start 从起点依次排列；
flex-end 从终点依次排列；

修改主轴方向

主轴方向默认在水平方向， 侧轴默认在垂直方向；
属性名： flex-direction；、
属性值：
row水平方向，从左向右，默认；
column 垂直方向，从上向下；
row-reverse 水平方向，从右向左；
column-reverse 垂直方向，从下向上；

弹性伸缩比

控制弹性盒子的主轴方向的尺寸
属性名： flex；
属性值： 整数数字， 表示占用父级剩余尺寸的份数；
等同weight；

弹性盒子换行

弹性盒子可以自动挤压或拉伸， 所有弹性盒子都在一行显示；
属性名： flex-wrap;
属性值：wrap：换行；nowarp 不换行（默认）

行对齐方式

属性名 align-content；
属性值：
flex-start; 默认值， 弹性盒子从起点开始依次排列；
flex-end 弹性盒子洞终点开始依次排列；
center； 弹性盒子沿主轴居中排列；
space-between 弹性盒子沿主轴均匀排列， 空白间距均分在弹性盒子之间；
space-around 弹性盒子沿主轴均匀排列， 空白间距均分在弹性盒子之两侧；
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等；

tips： 该属性对于单行弹性盒子模型无效；

最后

今天的学习也到此为止了，一起努力吧