day05-盒子模型

01-选择器

结构伪类选择器

基本使用

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

li:first-child {background-color: green;
}

:nth-child(公式)

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

伪元素选择器

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

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

注意点:

  • 必须设置 content: ””属性,用来 设置伪元素的内容,如果没有内容,则引号留空即可

  • 伪元素默认是行内显示模式

  • 权重和标签选择器相同

02-PxCook

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

  • 开发面板(自动智能识别)

  • 设计面板(手动测量尺寸和颜色)

使用方法:创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】,导入设计稿

03-盒子模型

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

盒子模型-组成

  • 内容区域 – width & height

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

  • 边框线 – border

  • 外边距 – margin(出现在盒子外面)

div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}

边框线

四个方向

属性名:border(bd)

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

div {border: 5px solid brown;width: 200px;height: 200px;background-color: pink;
}
单方向边框线

属性名: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 会撑大盒子。

  • padding 多值写法

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

尺寸计算

默认情况:盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

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

解决:

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

  • 內减模式:box-sizing: border-box

外边距

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

属性名:margin

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

版心居中

左右 margin 值 为 auto(盒子要有宽度)

div {margin: 0 auto;width: 1000px;height: 200px;background-color: pink;
}

清除默认样式

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

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

元素溢出

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

属性名:overflow

外边距问题

合并现象

场景:垂直排列的兄弟元素,上下 margin合并

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

.one {margin-bottom: 50px;
}
.two {margin-top: 20px;
}
外边距塌陷

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

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

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

解决方法:

  • 取消子级margin,父级设置padding

  • 父级设置 overflow: hidden

  • 父级设置 border-top

行内元素 – 内外边距问题

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

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

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

圆角

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

属性名: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;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

04-综合案例-产品卡片

CSS 书写顺序:

  1. 盒子模型属性

  2. 文字样式

  3. 圆角、阴影等修饰属性

HTML标签

<div class="product"><img src="./images/liveSDK.svg" alt=""><h4>抖音直播SDK</h4><p>包含抖音直播看播功能</p>
</div>

CSS样式

<style>* {margin: 0;padding: 0;box-sizing: border-box;}
​body {background-color: #f1f1f1;}
​.product {margin: 50px auto;padding-top: 40px;
​width: 270px;height: 253px;background-color: #fff;text-align: center;
​border-radius: 10px;}
​.product h4 {margin-top: 20px;margin-bottom: 12px;font-size: 18px;color: #333;font-weight: 400;}
​.product p {font-size: 12px;color: #555;}
</style>

05-综合案例二 – 新闻列表

整体布局

<style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
​
li {list-style: none;
}
​
a {text-decoration: none;
}
​
.news {margin: 100px auto;width: 360px;height: 200px;/* background-color: pink; */
}
</style>
​
<div class="news"></div>

标题区域

<style>
.news .hd {height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: 0;
}
​
.news .hd a {/* -1 盒子向上移动 */margin-top: -1px;display: block;border-top: 3px solid #ff8400;border-right: 1px solid #dbdee1;width: 48px;height: 34px;background-color: #fff;
​text-align: center;line-height: 32px;font-size: 14px;color: #333;
}
</style>
​
<div class="hd"><a href="#">新闻</a></div>

内容区域

<style>
.news .bd {padding: 5px;
}
​
.news .bd li {padding-left: 15px;background-image: url(./images/square.png);background-repeat: no-repeat;background-position: 0 center;
}
​
.news .bd li a {padding-left: 20px;background: url(./images/img.gif) no-repeat 0 center;
​font-size: 12px;color: #666;line-height: 24px;
}
​
.news .bd li a:hover {color: #ff8400;
}
</style>
​
<div class="bd"><ul><li><a href="#">点赞“新农人” 温暖的伸手</a></li><li><a href="#">在希望的田野上...</a></li><li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li><li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li><li><a href="#">G9“带货”背后:亏损面持续扩大,竞争环境激烈</a></li><li><a href="#">多地力推二手房“带押过户”,有什么好处?</a></li></ul>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于单片机的感应自动门控制器的设计

摘要 现如今自动化、信息化程度越来越高&#xff0c; 单片机的应用领域也越来越广&#xff0c; 成为人们生活不可或缺的一部分。随省社会的发展、科技的进步以及人们生活水平的逐步提高&#xff0c;各种方便千生活的自动控制系统开始进入了人们的生活&#xff0c;以单片机为核…

vue项目中如何使用SVG图标

IconFont使用的不足&#xff1a;图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。 在项目不断更新和迭代的过程中&#xff0c;图标的增减变化还没有稳定的情况下&#xff0c;开发人员的工作效率会明显下降。 那么有没有一个图标应用方式…

【C++】list讲解及模拟

目录 list的基本介绍 list模拟实现 一.创建节点 二.迭代器 1.模版参数 2.迭代器的实现&#xff1a; a. ! b. c. -- d. *指针 e.&引用 整体iterator (与const复用)&#xff1a; 三.功能实现 1.模版参数 2.具体功能实现&#xff1a; 2.1 构造函数 2.2 begi…

【操作系统】实验九 写一个设备驱动程序

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

QT基础篇(17)QML编程基础

1.QML概述 QML&#xff08;Qt Meta-Object Language&#xff09;是一种声明性语言&#xff0c;它被用于描述Qt框架中用户界面的结构和行为。QML提供了一种简洁、灵活的方式来创建动态和交互式的界面。 QML基于JavaScript语法&#xff0c;通过使用QML类型和属性来定义界面的元…

6.【SpringBoot3】登录优化-redis

1. SpringBoot 集成 redis 示例 在之前实现的登录接口中&#xff0c;用户登录成功后会生成一个令牌响应给浏览器&#xff0c;之后浏览器访问其他接口时&#xff0c;都要携带该令牌&#xff0c;接受拦截器的检验&#xff0c;如果令牌有效就放行&#xff0c;允许访问后续接口&am…

短视频矩阵怎么玩?小魔推助力实体店做高效矩阵

在如今的互联网时代&#xff0c;每个行业的老板都在考虑转型发展的方向&#xff0c;特别是抖音短视频作为近年来日活用户量最高的平台&#xff0c;吸引了众多企业与实体店纷纷入局&#xff0c;想要通过短视频吸引更多的客户&#xff0c;带来更多的成交&#xff0c;但是短视频推…

uml时序图刻画多个线程的活动

使用box关键字圈入不同线程内的组件 使用loop关键字客刻画线程的定时活动 示例

SpringMVC-RESTFul

文章目录 RESTFul一、基础概念二、增删改查1.查询全部用户信息 &#xff08;GET&#xff09;2.根据id查询用户信息3.添加用户&#xff08;POST&#xff09;4.修改用户 &#xff08;PUT&#xff09;5.删除用户 &#xff08;DELETE&#xff09; RESTFul 一、基础概念 二、增删改…

GitHub 上传文件夹到远程仓库、再次上传修改文件、如何使用lfs上传大文件、github报错一些问题

按照大家的做法&#xff0c;把自己遇到的问题及解决方案写出来&#xff08;注意&#xff1a;Error里面有些方法有时候我用可以成功&#xff0c;有时候我用也不能成功&#xff0c;写出来仅供参考&#xff0c;实在不行重头再clone&#xff0c;add&#xff0c;commit&#xff0c;p…

Qt程序设计-修改系统时间(Windows和Linux)

本文讲解Qt程序设计-修改系统时间(windows) 1、实例 创建项目,添加DateEdit和TimeEdit控件和按钮 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>namespace Ui { class MainWindow; }class MainWindow : public QMainWindow {Q_OBJECTpubl…

C#,生成图片的指定尺寸缩略图的源代码

编程的时候经常用到图像的缩略图。 本文发布一个用于生成指定尺寸的缩略图的简单方法。 1 文本格式 private void button1_Click(object sender, EventArgs e) { CreateThumbnail("demo.jpg", "demo_thumb.jpg", 128, 128); } private void CreateTh…

社交媒体与新闻:Facebook在信息传播中的角色

社交媒体的崛起不仅改变了人们的日常交流方式&#xff0c;也对新闻传播产生了深远的影响。在众多社交媒体平台中&#xff0c;Facebook以其庞大的用户基础和强大的社交网络机制&#xff0c;成为信息传播的中流砥柱。本文将深入探讨Facebook在社交媒体与新闻传播的交汇点上扮演的…

xshell无法连接linux,查询本机ip时出现<NO-CARRIER,BROADCAST,MULTICAST,UP>

在用xshell连接虚拟机VMware中的linux时&#xff0c;发现昨天还能连通的&#xff0c;今天连接不了了 我寻思应该是网卡配置出问题了&#xff0c;就去终端ip addr试了一下&#xff0c;果然发现问题&#xff0c;ip 查看网卡ens33就发现出现ens33:<NO-CARRIER,BROADCAST,MULTI…

Git学习笔记:版本回滚

文章目录 回到过去&#xff1a;开启新时间线&#xff0c;时间分叉路口1. 回溯开发2. 临时恢复特性3. 实验性开发4. 分支维护和发布5. 调试历史问题类比推理&#xff1a; 方法&#xff1a;1. 临时查看旧版本2. 永久回滚到旧版本3. 创建新的分支指向旧版本 回到过去&#xff1a;开…

git安装步骤

安装环境&#xff1a;Windows10 64bit 下载 Git网址 &#xff1a;Git - Downloading Package 版本&#xff1a;Git-2.21.0-64-bit 第一步&#xff1a;双击下载后的Git-2.21.0-64-bit.exe&#xff0c;开始安装 安装开始 第二步&#xff1a;选择安装路径&#xff0c;点击[next]…

以史为鉴:1997 年香港股市保卫战对当前 A 股投资的启示与思考

文章目录 惊心动魄:1997 年香港股市保卫战,港府与索罗斯的巅峰对决!以史为鉴:1997 年香港股市保卫战对当前 A 股投资的启示与思考!为什么是8月28日决战?为什么是7829点获胜?香港股市保卫战对判断 A 股底部的启示市场情绪反转指标期货指数先行性其他惊心动魄:1997 年香港…

35.搜索插入位置(力扣LeetCode)

文章目录 搜索插入位置题目描述二分查找暴力 搜索插入位置 题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法…

Linux基础指令大汇总

Linux的指令比较多&#xff0c;在学习的过程中要学会总结和归纳&#xff0c;同时结合实践多多使用&#xff0c;就像学数学一样&#xff0c;不是背过公式就等于掌握的&#xff0c;而是要知道在什么时候用&#xff0c;怎么用才是关键。 这篇文章会列举一系列常用的指令&#xff0…

基于Grafana+Prometheus搭建可视化监控系统实践

基本介绍 Grafana&#xff1a;一个监控仪表系统&#xff0c;可以根据提供的监控数据&#xff0c;生产可视化仪表盘&#xff0c;同时也具有告警通知功能。这里的监控数据来源&#xff0c;目前主要以Prometheus为主&#xff08;也支持其它数据源&#xff09;&#xff0c;每次展现…