css网课2(三大特性、盒子模型、浮动)

已于 2023-10-20 21:51:03 修改
阅读量89 收藏
点赞数
文章标签： css 前端
于 2023-10-07 00:06:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71819030/article/details/133611538
版权

css三大特性

层叠性

继承性

行高的继承

优先级

优先级注意的问题

css权重的叠加

 

优先级练习

css盒子模型

边框（border）

边框的复合写法

表格细线边框

边框（）影响盒子大小

内边距（padding）

内边距复合属性

内边距影响盒子大小

内边距练习（导航栏）

内边距不影响盒子大小

外边距(margin)

外边距典型应用-块级盒子水平居中

让行内元素或行内块元素水平居中

外边距合并----嵌套块元素垂直外边距的塌陷

清除内外边距

综合练习

案例2

圆角边框

盒子阴影

 

css浮动

标准流

浮动流

浮动特性

浮动特性一

浮动特性二

浮动特性三

浮动元素经常和标准流父级搭配使用

浮动布局练习

浮动布局练习1

 

浮动布局练习2

浮动布局练习3

常见网页布局

p181

浮动布局注意点

清除浮动

清除浮动方法

css属性书写顺序

页面布局整体思路

m0_71819030
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
21.2 CSS 三大特性与页面布局
08-22
本主题将深入探讨CSS的三大核心特性：选择器、盒模型和布局模式，以及它们如何影响页面布局。** ### 1. 选择器 CSS选择器是用于选取HTML或XML文档中元素的方式。它允许开发者精确地定位并应用样式。常见的选择器...
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局的基础，它定义了元素如何占据空间并与其他元素交互。这个模型将每个HTML元素视为一个矩形盒子，包含了内容区、内边距、边框和外边距四部分。 1. **内容区（Content Area）*...
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的...
CSS盒子模型是什么
09-24
属性值的简写形式是CSS中的一大便利，例如可以使用一个、两个、三个或四个值来分别指定元素的上、右、下、左四个方向的边距或内填充，这极大地简化了代码编写。 在网页布局中，理解盒子模型对于掌握CSS的定位至关...
【CSS】了解grid-auto-columns和grid-auto-rows属性
读心悦
07-07 187
和是 CSS Grid Layout（网格布局）中的两个重要属性，它们用于定义在显式网格（即那些通过或明确指定的网格区域）之外的隐式网格（即自动创建的网格线之间的空间）中的列和行的尺寸。
【CSS in Depth 2精译】2.5 无单位的数值与行高
PeacefulWinter的博客
07-07 653
本篇为《CSS in Depth》全新第二版中第2.5小节内容，主要介绍了 CSS 继承样式中一个很容易出错的知识点：继承的属性值的计算问题。通过对比带单位与不带单位的值对比设置行高来进行说明。有助于强化 CSS 基础知识点。
【CSS】缩写属性place-items
读心悦
07-07 127
是一个强大的简写属性，它允许你通过单个声明同时设置 Grid 或 Flexbox 布局中元素的对齐方式。通过合理地使用这个属性，你可以轻松地实现各种复杂的布局效果。
Sass 和 SCSS
ZTBztb123456的博客
07-07 180
Sass 和 SCSS 是 Sass (Syntactically Awesome Stylesheets) 的两种语法。它们都被用于编写更加结构化和易于维护的 CSS。
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
朝阳39的博客
07-06 779
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
Websocket通信实战项目(js)(图片互传应用)（下）客户端H5+css+js实现
共享IT之美，共创机器未来
07-04 1029
Websocket通信实战项目(js)(图片互传应用)（下）客户端H5+css+js实现
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 337
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
响应式设计的双璧：WebKit 支持 CSS Flexbox 和 Grid 布局深度解析
2401_85842555的博客
07-07 482
WebKit 对 CSS Flexbox 和 Grid 布局的支持，为开发者提供了强大的工具来构建现代和响应式的网页设计。通过本文的详细解析和代码示例，你现在应该对如何在 WebKit 驱动的浏览器中使用这些布局技术有了深入的理解。掌握 Flexbox 和 Grid 的使用，将使你在进行网页布局设计时更加得心应手。无论是设计简单的页面还是复杂的用户界面，合理利用这些 CSS 布局技术都是提高开发效率和用户体验的关键。
[Vue3 + TS + Vite] CSS穿透
qq_45831414的博客
07-03 363
Template中</div>CSS中/*上 右 下 左*//*上 右 下 左*/</style>设置elementPlus抽屉组件的header样式。
CSS对行级元素的影响
Joy_Huu的博客
07-03 289
常见的行级元素包括<span>、<a>（链接）、<em>（强调）、<strong>（加粗）、<img>（图片，但默认是行级块元素）、<del>（删除线）等。行级元素的margin（外边距）和padding（内边距）属性在垂直方向上（上下）通常无效，但在水平方向上（左右）可以生效。设置行级元素的width和height属性通常无效，除非该元素被转换为行级块元素（inline-block）或块级元素。垂直方向的margin和padding不会影响行级元素的高度，但可能会影响到元素之间的间距或元素的定位。
CSS技巧：纯CSS实现文字渐变动画效果
最新发布
uuplay0216的博客
07-07 297
文字渐变动画，可以实现的有两种：一种是一行文字整体变化颜色；另一种一行文字依次变化颜色。接下来，我就介绍一下这两种文字渐变的实现过程。
vue css 链式布局模式
qq_27806371的博客
07-04 157
vue css 链式布局模式
CSS Border(边框)
07-03 392
通过本文的介绍，相信读者已经对 CSS 边框有了更深入的了解。掌握边框属性，可以让网页设计更加丰富多彩。在实际开发中，灵活运用边框属性，可以创造出独特的视觉效果，提升用户体验。
css之transform-origin
计算机图形学
07-07 148
是 CSS 中的一个属性，它允许你改变一个元素变形的原点。默认情况下，变形的原点位于元素的中心点，即50% 50%（或 center center）。但是，通过使用属性，你可以将变形的原点移动到元素上的任何位置。
HTML5&CSS3网页制作：盒子模型概述.pptx
05-31
盒子模型概述;认识盒子模型;认识盒子模型;认识盒子模型;认识盒子模型;div标记;div标记;div标记;div标记;盒子的大小;盒子的大小;盒子的大小;总结;;THANKS

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值