20240620盒子模型和css标签应用（入门版）

最新推荐文章于 2024-08-15 17:05:54 发布
最新推荐文章于 2024-08-15 17:05:54 发布
阅读量206 收藏
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77513090/article/details/139844924
版权

HTML所有元素的引入和基本规划:

a6f8652ff6284625b3bebee9781b8e6f.png

652a1870547e428fb507dac4720dd73e.png 浏览器初始化对网页整体规划:

47c59ece93e3456ca490205c4cc6eb90.png 整个盒子模型以及四个小盒子进行构造:

3399849b801b4bdbb84e44a44588bf20.png 2.文字分为四个盒子进行逐步规划设置:

90b9f39d4867480785ea3f3fd8f1c843.png 网页效果图:50849d9e4deb4f15b5185e18cc2ef609.png

初步分析图:

cc3528510e234e37ab944bef7a025da4.png 大盒子里面套小盒子，先分析再进行规划写程序。

（菜🐦，多！练！先尝试划分盒子！）

 

 

aaaaaaaaashuang
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5盒子模型作业,HTML5盒子模型。
weixin_34526152的博客
06-05 2006
盒子模型。盒子由 margin、border、padding、content 四部分组成。margin ：外边距border：边框padding：内边距 (内容与边框的距离)content：内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外...
【CSS】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
weixin_45895411的博客
03-18 1001
本文介绍css的基础知识，包括盒子模型、常见布局方式讲解(标准流、浮动、定位)、元素的显示与隐藏还有一些零碎知识点
css3的弹性盒子模型,css3弹性盒子模型——回顾。
weixin_32921023的博客
08-04 468
1.box-flex属性规定框的子元素是否可伸缩其尺寸。父元素必须要声明display:box;子元素才可以用box-flex。语法：box-flex:value;示例：.test_box {display: -moz-box;display: -webkit-box;display:box;width: 800px;margin: 40px auto;padding: 20px;backgrou...
【css教程】web前端入门学习 css（4）（盒子模型）
Dontla的博客
03-16 1095
文章目录盒子模型（box model）盒子模型的组成边框 border边框的简写，边框的分开写法（分别写上下左右边框）利用边框的层叠性简化书写代码给表格table和单元格td和表头th加边框 https://www.bilibili.com/video/BV1pE411q7FU?p=135&spm_id_from=pageDriver 盒子模型（box model） 盒子模型的组成 边框 border <!DOCTYPE html> <html lang="en"&g
css3盒子模型微课_CSS3弹性盒模型flexbox完整版教程
weixin_36330518的博客
01-13 172
http://caibaojian.com/flexbox-guide.html来自CSSTricks上的一个教程，原文为：A Complete Guide to Flexbox。文中详细的介绍了新版的弹性盒子的相关属性，并且给出了几个使用例子。是新手入门flexbox的一个优秀教程。当然里面的内容也大部分是根据w3c的文章来写的。里面的每个属性都给出了一张示例图，非常容易理解。本人根据其思路，...
CSS3入门与提高(二）——盒子模型
weixin_45511236的博客
07-30 283
盒子模型盒子模型（CSS重点）盒子边框（border）盒子边框写法总结表内边距（padding）外边距（margin）清除元素的默认内外边距外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并content宽度和高度CSS3盒模型盒子阴影浮动(float)布局流程一列固定宽度且居中两列左窄右宽型通栏平均分布型清除浮动clear属性用于清除浮动额外标签法（W3C)父级添加overflow属性方法使用after伪元素清除浮动使用before和after双伪元素清除浮动 盒子模型（CSS重点） 所谓盒子
css弹性盒子文本设置,CSS3 Flex 弹性盒模型与文本内容居中
weixin_31481495的博客
08-04 1363
实现文本水平和垂直居中的方法有很多，但都是通过各种技巧来实现，优劣点都会存在。CSS3 Flex 弹性盒模型在 IE11 及其他现代浏览器中已广泛支持，其丰富的功能和繁多的属性定义，使得入门起来有点抽象难懂。这里只通过示例简单介绍使用 CSS3 Flex 弹性盒布局方式，实现文本居中的方法。CSS 核心代码：display: flex;align-items: center;justify-con...
css从入门到精通
m0_60540878的博客
11-15 1836
目录 1、转义字符 2、mete标签 3、元素类型 1、块元素（block element）和行内元素（inline element） 4、css引入方式 1、链接式 2、行内样式 3、内联式 5、选择器 1、元素选择器 2、类选择器 3、ID选择器 4、属性选择器 5、通配选择器选择所有元素 6、交集选择器 7、并集选择器 8、关系选择器 9、伪类选择器 10、伪元素选择器 11、样式的继承 6、选择器权重 1、样式的冲突 2、选择器的权重 ...
CSS盒子模型
pscool的博客
03-31 484
水平方向布局 元素在其父元素中水平方向的位置由以下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中，水平布局必须要满足以下的等式 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度 以上等式必须
HTML与CSS入门经典 第8版 英文原版
08-23
- **盒子模型**: CSS中的每个元素都被视为一个矩形盒子，由内容区域、内边距（padding）、边框（border）和外边距（margin）四部分组成。 - **布局技术**: - 浮动（float）: 允许元素脱离正常文档流，向左或向右...
HTML与CSS入门经典 第八版.pdf
08-14
根据提供的文件信息，“HTML与CSS入门经典 第八版”似乎是一本专注于介绍HTML（HyperText Markup Language）与CSS（Cascading Style Sheets）基础知识的教材。以下是对该书可能涵盖的一些核心知识点进行的详细解析：...
HTML与CSS入门经典（第8版）
04-04
综上所述，《HTML与CSS入门经典（第8版）》这本书不仅涵盖了HTML和CSS的基础知识，还深入介绍了HTML5和CSS3的新特性，是一本非常适合初学者学习的教程书籍。通过本书的学习，读者不仅可以掌握基本的网页制作技能，还...
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 374
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
HTML知识点——CSS中几种常用的选择器
最新发布
qq_62859013的博客
08-15 282
CSS中的几种常用的选择器
使用HTML和cgi控制I.MX6ULL开发板上的LED
kaneki_lh的博客
08-14 239
在led.html网页中输入设备号为1，操作指令为1则可开灯，操作指令为0则关灯。
JS（三）——更改html内数据
初叙
08-15 264
JavaScript更改html内数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值