选择器

结构伪类选择器

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

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第 N 个E元素(第一个元素 N 值为1)

/* 第一个 */
/* 1i:first-child{
	background-color: green;
} */

/* 最后一个 */
/*li:last-child{
	background-color:green;
} */

/*第3个标签 */
li:nth-child(3){
    background-color:green;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

:nth-child(公式)

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

功能	公式
偶数标签	2n
奇数标签	2n+1;2n-1
找到5的倍数的标签	5n
找到第5个以后的标签	n+5
找到第5个以前的标签	-n+5

/* 偶数 */
/* 1i:nth-child(2n){
	background-color: green;
} */

/* 奇数 */
/*li:nth-child(2n+1){
	background-color:green;
} */

/* 倍数 */
/*1i:nth-child(5n){
	background-color:green;
} */

/* n从0开始 */
/* 第5个以后的标签 */
/* li:nth-child(n+5){
	background-color:green;
}
/*第5个以前的标签 */
li:nth-child(-n+5){
    background-color:green;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

伪元素选择器

作用:创建虚拟元素(伪元素)，用来摆放装饰性的内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

注意点:

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

div {
    width: 200px;
    height: 200px;
    background-color: #00ffee;
}

div::before {
    content: "老鼠";
}

div::after {
    content: "大米";

    width: 20px;
    height: 20px;
    background-color: #f06b1f;

	/*  默认行内显示模式*/
     /*display: inline-block;*/
}

<div>爱</div>

PxCook

PxCook(像素大厨)是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板(自动智能识别)
设计面板(手动测量尺寸和颜色)

盒子模型-组成

作用:布局网页，摆放盒子和内容。

盒子模型重要组成部分:

内容区域-width & height
内边距-padding(出现在内容与盒子边缘之间)
边框线-border
外边距-margin(出现在盒子外面)

.box {
    width: 200px;
    height: 200px;

    background-color: #f06b1f;

    /* 内容与盒子边缘之间 */
    padding: 20px;

    border: 1px solid #000;

    /* 歘现在盒子外面、拉开两个盒子之间的距离 */
    margin: 50px;
}

盒子模型

边框线

属性名:border(bd)

属性值:边框线粗细线条样式颜色(不区分顺序)

常用线条样式

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

.box {
    width: 200px;
    height: 200px;
    
    /* 实线 */
    /*border: 1px solid #000;*/

	/* 虚线 */
    /*border: 2px dashed red;*/

	/* 点线 */
    border: 3px dotted green;
}

<div class="box">盒子</div>

盒子模型-边框线

设置单方向边框线

属性名: border-方位名词 (bd+方位名词首字母，例如，bdl)
属性值: 边框线粗细线条样式颜色(不区分顺序)

.box1 {
    width: 200px;
    height: 200px;

    background-color: pink;

    border-top: 1px solid #000;
    border-right: 1px dotted #555555;
    border-left: 3px dashed #00ffee;
    border-bottom: 1px solid #eeeeee;
}

<div class="box1">盒子</div>

盒子模型-内边距

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

属性名: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 多值写法

取值个数	示例	含义
一个值	padding: 10px;	四个方向内边距均为10px
四个值	padding: 10px 20px 40px 80px;	上:10px;右:20px;下:40px;左:80px
三个值	padding:10px 40px 80x;	上:10px;左右:40px;下:80px
两个值	padding:10px 80px;	上下:10px;左右:80px

.box2 {
    width: 200px;
    height: 200px;

    background-color: pink;

    /* 四个值： 上 右 下 左*/
    /*padding: 10px 20px 30px 80px;*/

    /* 三个值： 上 左右 下 */
    /*padding: 60px 40px 20px;*/

    /* 两个值： 上下 左右 */
    padding: 40px 80px;

    /* 记忆方法:从上开始顺时针转一圈，如果当前没有数值，取值跟对面一样  */
}

<div class="box2">盒子</div>

盒子模型-尺寸计算

默认情况

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

结论:给盒子加 border/padding 会撑大盒子
解决
- 手动做减法，减掉 border/padding 的尺寸
- 内减模式:box-sizing: border-box

.box3 {

    width: 200px;
    height: 200px;

    /*width: 160px;*/
    /*height: 160px;*/

    background-color: pink;

    padding: 20px;

    /* 内减模式：不需要手动减法，加padding和border不会撑大盒子 */
    box-sizing: border-box;
}

<div class="box3">盒子大小不变</div>

盒子模型-外边距

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

属性名: margin

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

这里参考padding就可以了

版心居中

.box4 {

	/* 版心居中要求： 盒子要有宽度 */
    width: 200px;
    height: 200px;

    background-color: pink;

    margin: 0 auto;
}

<div class="box4">盒子大小不变</div>

清除默认样式

清除标签默认的样式，比如:默认的内外边距。

/*京东的方式*/
* {
	margin: 0;
	padding: 0;
}

/*淘宝的方式*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre, td,textarea,th,ul {
	margin: 0;
	padding: 0;
}

* {
    margin: 0;
    padding: 0;
    /* 设置默认是内减模式 */
    box-sizing: border-box;
}

/*去掉列表的项目符号*/
li {
    list-style: none;
}

盒子模型-元素溢出

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

属性名:overflow

属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动(无论是否溢出，都显示滚动条位置)
auto	溢出滚动(溢出才显示滚动条位置)

.box5 {
    width: 200px;
    height: 200px;

    /*overflow: hidden;*/
    /*overflow: scroll;*/
    overflow: auto;
}

<div class="box5"> 滚动条测试</div>

外边距问题

外边距问题-合并现象

场景: 垂直排列的兄弟元素，上下 margin 会合并
现象: 取两个 margin 中的较大值生效

.box1 {
    width: 200px;
    height: 200px;

    /* 相比下面  这个间距比较大  这个生效 */
    margin-bottom: 80px;
    background-color: #f06b1f;
}

.box2 {
    width: 200px;
    height: 200px;

    margin-top: 20px;

    background-color: #0069c2;
}

<div class="box1">box1</div>
<div class="box2">box2</div>

外边距问题-塌陷问题

场景:父子级的标签，子级的添加上外边距会产生塌陷问题
现象:导致父级一起向下移动

.son {
	margin-top:50px;
	width:100px;
	height:100px;
	
	background-color: orange;
}

解决方法:

取消子级margin，父级设置padding
父级设置 overflow: hidden
父级设置 border-top

.box3 {
    width: 200px;
    height: 200px;

    background-color: red;

    /*第一种方法*/
    /*padding: 50px;*/
    /*box-sizing: border-box;*/

    /*第二种方法*/
    /*隐藏溢出的区域*/
    /*overflow: hidden;*/

    /*让浏览器找到正确的边缘*/
    border-top: 1px solid #000;
}

.box4 {
    width: 50px;
    height: 50px;

    background-color: green;

    /*会导致父级模块的塌陷问题*/
    margin: 50px;
}

<div class="box3">
    <div class="box4">box4</div>
</div>

行内元素-内外边距问题

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

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

span {
	/*margin 和 padding 属性，无法改变垂直位置*/
	margin:50px;
	padding:20px;
	/*行高可以改变垂直位置 */
	line-height:100px;
}

<span>第一个span</span>
<span>第二个span</span>

盒子模型-圆角

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

属性名:border-radius

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

.box5 {
    width: 200px;
    height: 200px;

    /*记忆:从左上角顺时针赋值，没有取值的角与对角取值相同  和padding类似*/

    /* 四个值：左上 右上 右下 左下*/
    /*border-radius: 10px 20px 40px 80px;*/

    /* 三个值：左上 右上+左下 右下*/
    /*border-radius: 10px 40px 80px;*/

    /* 两个值：左上+右下 右上+左下 */
    /*border-radius: 10px 80px;*/

    border-radius: 80px;

    background-color: #f06b1f;
}

<div class="box5">div5</div>

常见应用-正圆形状

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

img {
	width:200px;
	height:200px;
	border-radius: 100px;
    /* 最大值是50%,超过50%没有效果 */
	border-radius: 50%;
}

常见应用-胶囊形状（按钮）
- 给长方形盒子设置圆角属性值为盒子高度的一半
```
div {
    width: 200px;
    height: 80px;
    background-color: orange;
    border-radius:40px;
}
```

盒子模型-阴影(拓展)

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

属性名:box-shadow

属性值:x轴偏移量 γ轴偏移量模糊半径扩散半径颜色内外阴影

注意:

X轴偏移量和Y轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

.box5 {
    width: 200px;
    height: 200px;
    
    background-color: #f06b1f;

    box-shadow: 10px 20px 20px 20px rgba(0,0,0,0.5) inset;
}

CSS 书写顺序:

盒子模型属性
文字样式
圆角、阴影等修饰属性

posted @ 2025-05-05 12:35 snail灬阅读(17) 评论(0) 收藏举报

刷新页面返回顶部

snail

选择器