web前端总复习（六）：CSS盒子模型

最新推荐文章于 2024-09-24 15:55:35 发布
最新推荐文章于 2024-09-24 15:55:35 发布
阅读量107 收藏
点赞数
分类专栏： web前端总复习 文章标签： css css3 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40549954/article/details/109150435
版权

  1. 概述：用来装页面上的元素的矩形区域。

  2. 分类：

  • W3C盒子模型
    ① 内容区宽高：设置的width、height
    ② 盒子宽高：内容区宽高+padding区宽高+border区宽高
    ③ 所占屏幕的宽高：内容区宽高+padding区宽高+border区宽高+margin区宽高

  • IE盒子模型
    ① 内容区宽高：设置的宽高-padding区宽高-border区宽高
    ② 盒子宽高：设置的width、height
    ③ 所占屏幕的宽高：设置的宽高+margin区的宽高

  1. 两种盒子模型的转换：

    ① 将IE盒子转成W3C盒子：box-sizing:content-box
    ② 将W3C盒子转成IE盒子：box-sizing:border-box

做一个暴躁的开发
关注
专栏目录
WEB前端元素和盒子模型（学习笔记）
weixin_43915011的博客
07-26 292
元素的种类： 1.区块元素： （1）每个元素独占一行 （2）支持所有的样式 （3）不设置宽度时宽度等于父元素宽，不设置高度时高度为0，有内容时高度由内容撑开 （4）不会解析换行符 （5）常见的区块元素：div ul ol li p h1~h6 dl table form pre hr 2.内联元素 （1）在一行有空间时，可以和非区块元素同行显示 （2）不支持宽高样式，使用部分样式（上下margin...
Web学习笔记（四）：盒子模型
想教猫咪学Java
07-24 518
CSS盒子模型 一、什么是盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围
前端系统复习之CSS盒模型
李天下
06-16 796
一、题目：谈一谈你对CSS盒模型的认识 专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面： （1）基本概念：content、padding、margin。 （2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。 （3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续...
CSS复习之CSS盒模型
Java学习之乐的博客
05-12 232
今日目录        1、盒模型基本概念        2、边框        3、内边距        4、外边距        5、网页布局与盒模型一、盒模型基本概念盒模型：    相框边框 - > border    画和相框边框的距离 -> padding    相框之间的距离 -> margin二、边框border-width 边框宽度(粗细)border-color...
Web前端知识点复习总结
qq_50843126的博客
08-05 1848
Web前端知识点复习总结
Web前端期末复习【超实用】
热门推荐
鸽子的博客
02-11 1万+
教材:《Web前端开发技术——HTML、CSS、JavaScript(第2版)》 聂常红 主编 王刚 潘正军 唐远强 副主编 这本书讲得较浅，自学的话不推荐购买！对你有帮助的话记得点赞、关注哦！ 我们是手机端考试。教这门课的老师很漂亮也很尽职，每节课我们都要用手机签到、做课堂习题(巩固刚讲的内容)，课后还布置适量作业，这些都计入平时成绩。老师的PPT相比其他老师的更容易理解(可能是前端本身的...
Web前端知识复习
happy0224的博客
02-25 753
Web前端知识 一、HTML HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。 HTML是一种描述性标记语言，用来描述页面内容的显示方式 HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。 HTML文档结构是由、和三大元素组成。 HTML文档的元素包含很多标签，用于向浏览器提供整个页面的基本信息。 标签的组成：标签名、属性（名值对）、内容 –属...
前端复习5：HTML5+CSS3
weixin_42476709的博客
03-14 455
前端复习5：HTML5+CSS31、HTML51.1 HTML5 新增标签2、CSS32.1 新增的属性、结构伪类和伪元素选择器2.2 `2D` 转换2.3 过渡(transition)2.4 动画(animation)2.5 3D 转换 1、HTML5 （1）定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 是一个新版本的 HTML 语言，定义了新的标签、特性和属性，用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。 拥有一个
web前端基础复习_day05_CSS
weixin_42931689的博客
02-27 207
一. 盒子模型 1. 概述 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 2. 组成部分 ① Margin(外边距) - 清除边框外的区域，外边距是透明的。 常用属性 margin-left: 左外边距 margin-right: 右外边距 margin-top: 上外边距 margin-bottom: 下外边距 简写属性; marg...
WEB前端开发课程计划
09-15
- **CSS盒子模型**：深入理解盒子模型，包括边距、边框等。 - **元素定位**：掌握相对定位、绝对定位、固定定位等。 - **元素浮动**：学习浮动及其在网页布局中的应用。 - **CSS高级特性**：探索更高级的CSS特性，如...
Web前端复习总结
cChai_alei的博客
02-25 169
HTML 什么是HTML？ 本质是超文本标记语言，表现如文字、视频、音频程序等。 什么是标签？ 标签的组成：标签名、属性名（名称值对的形式）、内容。 如： <a href="https://www.baidu.com">百度</a> 重要标签说明： 表格标签 table thead tr th tbody tr th 如： <table> ...
【Web前端】HTMLCSS一文详解
m0_67391518的博客
07-31 690
小橙子前端教程标题段落
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3597
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
css边框修饰
weixin_74261199的博客
09-18 781
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
CSS05-复合选择器
最新发布
qq_31532983的博客
09-24 238
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
uniapp沉浸式导航栏+自定义导航栏组件
chu396815830的博客
09-19 1132
uniApp 中实现沉浸式导航栏和自定义导航栏组件。
CSS04-Chrome调试工具
qq_31532983的博客
09-24 276
Chrome调试工具
面经 | css
YuuuPeeiiiii的博客
09-24 754
flex:1是felx:1 1 0的简写，是flex-grow:1;flex-basis:0的简写；掌握熟悉上面的一两种写下就行了。父元素是非static元素。
前端开发：CSS盒子模型与排版详解
本文将深入探讨前端开发技术中的CSS盒子模型以及相关的排版方法。CSS盒子模型是理解网页布局的基础，它将页面上的每个元素视为一个包含内容、边框、内边距和外边距的盒子。通过调整这些组件的样式，我们可以实现复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值