【前端】网页开发精讲与实战 CSS Day 3

Write In Front
个人主页：令夏二十三
欢迎各位→点赞 + 收藏⭐️ + 留言
系列专栏：前端
总结：希望你看完之后，能对你有所帮助，不足请指正！共同学习交流

文章目录

目录

文章目录

前言

一、选择器

1. 结构伪类选择器

 :nth-child（公式）

2. 伪元素选择器

 二、PxCook 像素大厨

三、盒子模型

1. 组成

2. 边框线

3. 内边距

4. 外边距

5. 元素溢出

6. 外边距问题 - 合并现象

7. 外边距问题 - 塌陷问题

8. 行内元素 - 内外边距问题

9. 盒子模型 - 圆角

10. 盒子阴影

---

前言

        今天是学习网页开发的第三天，将要学习的内容是选择器、PxCook软件和盒子模型。学会了它们，可以做出更上得了台面的网页模块效果。

一、选择器

1. 结构伪类选择器

作用：根据元素的结构关系（位置）查找元素

选择器	说明
E:first-child	查找第一个E标签
E:last-child	查找最后一个E标签
E:nth-child(N)	查找第N个E标签

    
    
    
    
    


    

        
li 1
        
li 2
        
li 3
        
li 4
        
li 5
    

 :nth-child（公式）

作用：根据标签的顺序查找多个标签。

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

2. 伪元素选择器

作用：创建虚拟标签，用来摆放装饰性的内容。

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

注意点：

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

    
    
    
    
    


    
爱

 二、PxCook 像素大厨

PxCook是一款切图设计软件。支持PSD文件的文字、颜色、距离自动智能识别。

• 开发模式（自动智能识别）
• 设计模式（手动测量尺寸和颜色）

原则是，能用开发模式就用开发模式。

三、盒子模型

1. 组成

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

模型的重要组成部分：

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

2. 边框线

属性名：border（bd）

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

常用线条样式：

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

    
    
    
    
    


    
div 标签1
    
div 标签2
    
div 标签3

设置单方向边框线

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

属性值：和普通边框线一样

3. 内边距

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

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

padding多值写法：

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

4. 外边距

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

属性名：margin

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

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

要清除默认样式，就将属性值设置为0。

5. 元素溢出

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

属性名：overflow

属性值：

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

6. 外边距问题 - 合并现象

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

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

7. 外边距问题 - 塌陷问题

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

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

解决方法：

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

8. 行内元素 - 内外边距问题

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

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

9. 盒子模型 - 圆角

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

属性名：border-radius

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

提示：属性值是圆角半径

多值写法：

取值个数	示例	含义
一个值	border-radius: 10px;	四个角均为10px
四个值	border-radius: 10px 20px 40px 80px	左上 右上 右下 左下
三个值	border-radius: 10px 40px 80px	左上 右上+左下 右下
两个值	border-radius: 10px 80px	左上+右上  右下+左下

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

10. 盒子阴影

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

属性名：box-shadow

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

注意：

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