css（二）

最新推荐文章于 2021-08-25 00:17:28 发布
最新推荐文章于 2021-08-25 00:17:28 发布
阅读量183 收藏
点赞数
分类专栏： 那些年，错过的基础篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44162474/article/details/106607245
版权
本文详细介绍了CSS中的盒子模型，包括盒子的组成、大小计算，以及标准盒模型与IE盒模型的区别。此外，还探讨了margin合并、浮动流、定位流的相关概念，如相邻块元素和嵌套块元素的外边距合并、浮动元素的影响以及如何清除浮动。同时，文章讲解了相对定位、绝对定位和固定定位的特性，以及z-index在层叠顺序中的作用。
摘要由CSDN通过智能技术生成

盒子模型

盒子的组成

一个盒子四个部分构成：margin（外边距）、border（边框）、padding（内边距）、content（内容）
另外 margin、border、padding 是 CSS 属性，即可以通过这三个属性控制盒子的大小

content 则是 HTML 元素的内容
在这里插入图片描述

盒子的大小

标准盒模型的大小（box-sizing：content-box）

在这里插入图片描述

width指content部分的宽度

IE盒模型（box-sizing: border-box）

在这里插入图片描述

width表示content+padding+border

<
最低0.47元/天 解锁文章
亦是木子也是雨
关注
专栏目录
纯CSS二级导航菜单
11-20
"纯CSS二级导航菜单"是一个完全依赖CSS（层叠样式表）来实现的交互式菜单，不涉及JavaScript或其他编程语言。这种菜单设计适用于那些希望简化代码、提高网页加载速度以及优化移动设备用户体验的开发者。 首先，我们...
css基础常见问题
y1668239128的博客
12-09 605
1、行内元素，行内块元素，块元素，都有什么，例子，特点 块元素:一行只能放一个块级元素，可以设置宽度高度，默认宽度是容器的100%， 常见的块元素 address – 地址、blockquote – 块引用、center – 举中对齐块、dir – 目录列表、div – 常用块级容易，也是CSS layout的主要标签 dl – 定义列表、fieldset – form控制组、form – 交互表单 h1 – 大标题、h2 – 副标题、h3 – 3级标题、h4 – 4级标题、h5 – 5级标题、h6 – 6
盒子模型 学习理解
独滕的博客
09-13 473
盒子模型 1页面布局的本质 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素比如文字图片等等，放入盒子里面。 以上两步 就是网页布局的本质 2.盒子模型 概念：就是html页面中的布局元素看做是一个矩形盒子，一个成容器的容器 盒子模型有元素的内容、边框、内边距、和外边距组成 盒子里面的文字和图片等元素的内容区域 盒子的厚度是 盒子的边框 盒子的内容与边框的距离是内边距(类似单元格的cellpadding) 盒子与盒子之间的距离是外边距(类似单元格的cellspacing) 3.盒子边
盒子模型
weixin_45725142的博客
09-11 918
盒子模型 1、盒子模型的相关属性 （1）边框属性：边框样式属性、边框宽度属性、边框颜色属性、单侧边框属性、边框的综合属性 边框样式：none：没有边框。 solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 边框的默认元素为元素本身的文本颜色，对于没有文本的元素，例如只包含图象的表格，其默认颜色为父元素的文本颜色。 注意：①设置边框颜色时 ...
CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
dianchougao5936的博客
05-01 344
本文内容： 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期：2018-05-01 表格边框合并： 发生情况： 当设置了cellpadding="0" cellspacing="0"后，表格的相邻边框会合并，使得边框变粗了。 <!DOCTYPE html> <html> <head&g...
css 外边距常见问题解决
qq_40301211的博客
03-16 1736
1.外边距塌陷 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom， 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 解决方案：避免就好 2.嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元...
漂亮的CSS二级竖向导航菜单
06-06
本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...
CSS3二级下拉动画滑动菜单特效代码
03-20
"CSS3二级下拉动画滑动菜单特效代码"就是利用CSS3特性实现的一种交互式菜单设计，它使得网页的导航结构更加生动有趣。此特效主要包含以下几个关键知识点： 1. **CSS3选择器**：为了精确地控制每个菜单项的样式，CSS...
前端小练习，css二级菜单制作
最新发布
10-20
css二级菜单，实现tab切换效果
CSS二级菜单
12-19
CSS二级菜单是网站导航系统中的常见设计，它允许用户通过悬停鼠标来展开下一级的链接选项，提供更直观的用户体验。在纯CSS操作下，我们可以实现无需JavaScript的交互效果，使得菜单响应迅速且易于维护。接下来，我们...
CSS基础（一）
随心所欲的便笺
01-27 473
CSS简介以及基本语法 CSS引入方式： 1. 内嵌样式： <div style = "..."></div>（使用最少，因为会产生冗余，而且不符合W3C规定） 2. 内部样式表： <style> ... （写的是样式）... </style>（不会有冗余） 3. 链接外部样式表：<link href = "style.css"> （用的最多） 基本语法： 选择器{ 属性：属性值； 属性：属性值；
Web前端之CSS基础总结(2)
Huangxianlong的博客
08-25 674
Web前端之CSS基础总结(2) 六、CSS三大特性 1. CSS 层叠性 -概念： 所谓层叠性是指多种CSS样式的叠加 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 -原则： 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠。 2. CSS 继承性 -概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想..
CSS（二）
不说话的娃娃鱼
09-24 108
字体样式 <style> /* font-family: 字体 font-size: 字体大小 font-weight: 字体粗细 color: 字体颜色 */ body{ font-family: "Arial Black",楷体; color: #65a4ff; } h1{
（二）CSS
qq_40126611的博客
12-23 191
css 的声明 <html> <head> <meta charset="UTF-8"> <title>css的声明学习</title> <!-- CSS声明学习: 1、在head标签中使用style标签声明： 作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式 2、在标签上使用style属性进行声明： 作用：此声明会将css样式直接作用于当前标签。 3
前端之CSS（二）
weixin_30896763的博客
07-03 77
一、盒子模型 说到盒子模型，我们不得不提一下，W3C标准和IE浏览器是有区别的，我昨天就在写抽屉作业的时候踩过坑，建议用谷歌浏览器，并推荐一篇博文：http://www.osmn00.com/translation/213.html 在W3C盒模型中，一个块级元素的总宽度(总高度同理)按照如下的方程式计算： 总宽度 = margin_left + border_left + paddi...
css(二）
rrfighting的博客
08-11 124
CSS属性书写顺序 布局定位属性：display、position、float、clear、visibility、overflow 自身属性：width、height、margin、padding、border、background 文本属性：color、font、text-decoration、text-align、vertical-align、white-apace、break-word 其他属性：content、cursor、border-radius、box-shadow、 布局流程 先确定版
CSS（二）：复合选择器、元素模式与背景属性
qq_31465789的博客
06-18 757
Emmet语法
html + css二级菜单
05-17
以下是一个简单的 HTML + CSS 二级菜单的示例代码： HTML: ```html <li><a href="#">菜单1</a></li> 菜单2 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值