HtmlCss 基础总结（基础好了才是最能打的）五

Html&Css 基础学习回顾总结

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

---

---

前言

这是作者的第五天总结篇章， 有需要的小伙伴可以 在这里 找到上一篇文章
视频在这里~ @B站黑马程序员视频

视频共15天，作者会以天为粒度，来分散到不同文章中，有兴趣的小伙伴可以关注一下，谢谢你
书中错误在所难免，如果有小伙伴发现的话恳请斧正，在此先谢过咯~

---

本篇文章主要讲述结构伪类选择器和盒子模型

结构伪类选择器

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

例如：

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轴偏移量 y轴…
知道有这么个东西，用到的时候在查询一样的；

---

最后

今天的学习也到此为止了，希望大家都有所收获，再见