HTML+CSS 核心笔记 （四）

选择器

结构伪类选择器

作用：根据元素的 结构关系 查找元素

:nth-child(公式)

 作用：根据元素的结构关系查找多个元素

提示：公式中的n取值从 0 开始

伪元素选择器

作用：创建 虚拟 元素（伪元素），用来摆放 装饰性 的内容

• 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
•  伪元素默认是行内显示模式 （可以通过display改变其显示模式）
•  权重和标签选择器相同

<style>
    div::before {
    /*必须设置 content 属性*/
        content:"老鼠";
}
      
    div::after{
        content:"大米";
}  
</style>

<div>爱</div>
<!--最后div里面的内容为 老鼠爱大米-->

盒子模型

盒子模型重要组成部分：

div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;

}

• 内容区域 – width & height

• 内边距 – padding （出现在内容与盒子边缘之间）

• 边框线 – border

• 外边距 – margin （出现在盒子外面）

盒子模型 – 边框线

属性名： border （bd）

属性值：边框线粗细 线条样式 颜色（ 不 区分顺序）

常用线条样式

 

 

 

 

设置单方向边框线

属性名： border-方位名词 （bd+方位名词首字母，例如，bdl）

属性值：边框线粗细 线条样式 颜色（ 不 区分顺序）

div {
/*分别给盒子的上下左右都设置了不同的边框线*/
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}

盒子模型 – 内边距

作用：设置 内容 与 盒子边缘 之间的距离

属性名： padding / padding-方位名词

div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}

padding 多值写法

 技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同

盒子模型 – 尺寸计算

默认情况

盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会 撑大 盒子 

解决

手动做减法 ，减掉 border / padding 的尺寸

內减模式： box-sizing: border-box（经常用）

盒子模型 – 外边距

作用：拉开两个盒子之间的距离

属性名： margin

提示：与 padding 属性值写法、含义相同

技巧： 版心居中 – 上下为0  左右 margin 值 为 auto（盒子要有宽度）

div {
margin: 0 auto;
/*盒子要有宽度*/
width: 1000px;
height: 200px;
}

清除默认样式

比如：默认的内外边距

/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
list-style: none;
}

盒子模型 – 元素溢出

作用：控制 溢出 元素的 内容 的 显示方式 。

属性名：overflow

属性值

 

 

 

外边距问题 – 合并现象

场景： 垂直 排列的 兄弟 元素， 上下 margin 会合并

现象：取两个 margin 中的 较大值 生效

.one {
/*此时它的值生效*/
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}

外边距问题 – 塌陷问题

场景： 父子级 的标签， 子级 的添加 上外边距 会产生 塌陷 问题

现象：导致父级一起向下移动

<style>
.father {
width:300px;
height:300px;
background-color:pink;
}
.son {
margin-top: 50px;

width: 100px;
height: 100px;
background-color: orange;
}
</style>

<div class="father">
    <div class="son">子级div</div>
</div>

解决方法：

• 取消子级margin，父 级设置 padding （但还要设置 box-sizing:border-box;防止撑大盒子）

• 父 级设置 overflow: hidden（内容溢出隐藏）

• 父 级设置 border-top （让内容盒子找到正确的内容边缘）

行内元素 – 内外边距问题

场景： 行内 元素添加 margin 和 padding ，无法改变元素 垂直 位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

盒子模型 – 圆角

作用：设置元素的外边框为圆角

属性名： border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

 

 

 

 

 

 技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同

盒子模型 – 圆角

目标：正圆形状

给 正方形 盒子设置圆角属性值为 宽高的一半 / 50%

img {
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%;
}

目标：胶囊形状

给 长方形 盒子设置圆角属性值为 盒子高度的一半

div {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}

盒子模型 – 阴影（拓展）

作用：给元素设置 阴影 效果

属性名： box-shadow

属性值： X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X 轴偏移量 和 Y 轴偏移量 必须 书写

• 默认是外阴影 ，内阴影需要添加 inset

div {
width: 200px;
height: 80px;
background-color: orange;
/*属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影*/
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}