2024.4.2-day07-CSS 盒子模型(显示模式、盒子模型)


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

    • 作业
  • 2024.4.2 学习笔记
    • CSS标签元素显示模式
      • 1 块元素
      • 2 行内元素
      • 3 行内块元素
      • 4 行内模式
      • 5 标签元素的显示与隐藏
      • 6 置换元素
    • css盒子模型
      • 1 盒子模式组成
      • 2 怪异盒子模型

作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="首页" content="首页"><meta description="首页" content="首页"><title>手机列表</title><style>* {margin: 0;padding: 0;}ul, ol {list-style: none;}.mobile-list {width: 1030px;margin: 50px auto 0;text-align: center;}.mobile-list>li {box-sizing: border-box;width: 250px;display: inline-block;border: 1px solid;}.mobile-list .title{font-size: 14px;font-weight: 400;line-height: 42px;}.mobile-list .desc {font-size: 12px;color: #B0B2B9;}.mobile-list .price {font-size: 12px;color: #444;line-height: 28px;}.mobile-list .num {color: red;}</style></head><body><ul class="mobile-list"><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li></ul></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta chaset="UTF-8"><meta name="测试1" content="测试1"><meta desciption="测试1" content="测试1"><title>测试1</title><style>div {text-align:center;font-size:50px;}.none {display:none;}.hidden {visibility:hidden;}</style></head><body><div><p><span>姓名</span><span class="none">学号</span><span>班级</span><span class="hidden">性别</span><span>入学年份</span></p></div></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="测试2" content="测试2"><meta description="测试2" content="测试2"><title>测试2</title><style>* {padding:0;margin:0;}h1 {margin-bottom:80px;}div {padding-top:50px;}</style></head><body><h1>我是一个标题</h1><div>我是一个div</div></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="测试3" content="测试3"><meta description="测试3" content="测试3"><title>测试2</title><style>* {margin: 0;padding: 0;}.father {width: 200px;height:200px;background-color: blue;/* border-top: 1px solid; *//* padding-top: 1px; */overflow: hidden;}.son {margin-top: 20px;width: 100px;height: 100px;background-color: green;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>
  1. 显示模式有哪几种?它们有什么区别?

    答:

    1.块元素:横跨一行,可设置宽高度,里面各种显示模式的元素都可以装。

    2.行内元素:一行可容纳多个行内元素,宽高度不可以设置,默认是本身内容的宽高度,里面只能装文本或其他行内元素。

    3.行内块元素:一行可容纳多个(行内元素性特点),可设置宽高度(块元素特点),里面各种显示模式的元素都可以装。

  2. 怪异盒子模型和标准盒子模型有什么区别?

    答:

    怪异盒子模型(box-sizing: border-box),也叫做内减盒模型,或者IE 盒子模型

    内减盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同。

    怪异盒子模型的 content 内容宽度会把 padding 和 border 算入其中,是由外而内的计算宽度。

    怪异盒子模型当内减到负数的时候,那么表现形式和标准盒子模型差不多。

  3. 用代码实践下,重现兄弟标签元素垂直外边距合并问题和父子标签元素穿透合并的问题,并实践中解决它们?

    答:重现兄弟标签元素垂直外边距合并问题是上元素的margin-bomtoon和下元素的margin-top产生了重叠部分
    在这里插入图片描述

    解决方法:分别设置margin和padding,就可以避免重叠

    在这里插入图片描述

    对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

    在这里插入图片描述

    1.可以为父元素定义上边框。

    在这里插入图片描述

    2.可以为父元素定义上内边距。

    在这里插入图片描述

    3.可以为父元素添加 overflow:hidden。

    在这里插入图片描述

  4. 块级元素怎么居中?和text-align居中有什么区别?

    答:块级元素可以用:marigin-right: auto;margin-left: auto;进行居中。

    区别:

    1、margin: 0 auto只针对块级居中,对行内标签元素和行内块标签元素(含有inline)的无效。

    2、父级加text-align: center ,对子级的文本或者行内标签元素和行内块标签元素(含有inline)进行居中,

    对子级块级无效,由于继承性,子级块级如果没有重置text-align,子级块级孙子含有inline是有效的。

  5. display:none和visibility:hidden有什么区别?用代码实践下。

    答:disply:none是相当于元素直接删除,不仅不显示,原来的位置也没了;

    visibility:hidden是不显示元素,是原来的位置还在,只是不显示内容了。

在这里插入图片描述

在这里插入图片描述

2024.4.2 学习笔记

CSS标签元素显示模式

查询chrome的computed的display

1 块元素

display:block | list-item | table类;

宽度为容器父级的百分之百,横跨一行,高度是自动的

里面什么都能装,特例:p标签里面不能放语义上块级元素,它只能存放段落,p>div不能失效,p标签可以包含行内元素

在这里插入图片描述
在这里插入图片描述

2 行内元素

display: inline;

一行可以显示多个行内元素,内容太长会自动折行,垂直方向宽高设置是无效的 。默认的宽高度就是内容本身的宽高度。

行内元素只能包含文本和行内元素。

特例:a标签里不能包含a标签,会解析错误

在这里插入图片描述

在这里插入图片描述

行内元素转换块级元素

在这里插入图片描述

在这里插入图片描述

行内元素之间无论打多少个空格都只能解析出一个

3 行内块元素

disply:inline-block;

和块级元素相比,它不会独占一行

和行内块元素相比,它可以设置宽高度

4 行内模式

5 标签元素的显示与隐藏

display的隐藏不会占原来的位置,visibility的隐藏会占原来的位置。

行内元素就是靠内容进行撑开的

img图片只要设置一个宽或者高度,就会自动按比例

6 置换元素

img

如果可以给inline行内元素通过样式设置宽高的一般都是置换元素。

大多数行内元素不能直接设置宽高度,只有少数的置换元素可以

css盒子模型

1 盒子模式组成

margin:外边距

border:边框 border: 1px solid red;

padding:内边距

css的宽高是内容的宽高,不包括上面那三个

宽度=width +padding(左右)+border(左右)

高度=height +padding(上下)+border(上下)

设置padding:

一个值:上下左右

两个值:上下,左右

三个值:上,左右,下

四个值:上,右,下,左

在这里插入图片描述

居中:

只能对块级元素有效:margin-right:auto;margin-left:auto;

inline行内元素要用text-align=center进行居中;block元素也可以用text-align居中

在这里插入图片描述

inline-block没设置宽高度,宽高度就和内容一致。

行内元素只能在水平方向上设置margin,padding样式;

块级元素上下左右都可以设置样式

block设置了 width 后,右侧会用margin-right自动铺满,所以 block 设置width 还是独占一行

清除内外边距:

  • {
    padding:0; /* 清除内边距 /
    margin:0; /
    清除外边距 */
    }

上下盒子的margin-bottom和margin-top可以合并

如何避免?padding和margin分别设置,避免冲突。

background-color:设置背景颜色

嵌套块元素垂直外边距的塌陷:overflow:hidden;

让文字的行高等于盒子的高度,可以让文字在当前盒子内垂直居中;

2 怪异盒子模型

box-sizing: border-box

padding增大会内减

怪异盒子模型当内减到负数的时候,那么表现形式和标准盒子模型差不多。

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

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

相关文章

怎么用二维码来分享视频?视频二维码制作的简单方法

怎么用二维码来分享视频呢&#xff1f;为了能够更快速的将视频传递给其他人&#xff0c;所以现在很多人都使用生成二维码的方式&#xff0c;让其他人通过扫码来查看视频内容&#xff0c;从而实现多人同时扫码看视频的效果。这种方式也不会占用用户的内存和流量&#xff0c;通过…

“AI复活”背后的数字永生:被期待成为下一个电商,培育市场认知和用户心智还需时间

“AI复活”背后的数字永生&#xff1a;被期待成为下一个电商&#xff0c;培育市场认知和用户心智还需时间© 由 九派新闻 提供 数字永生&#xff0c;还是电子宠物&#xff1f;过去一个月&#xff0c;因包小柏用AI技术让爱女在数字世界“复活”一事&#xff0c;《流浪地球2…

什么样的数据库才是开发者需要的

什么样的数据库才是开发者需要的 什么是Serverless数据库Serverless数据库应该关注哪些技术要点DBA的工作会被AI取代吗什么样的数据库是你目前最需要的 其实关于数据库的话题&#xff0c;能聊的很多&#xff0c;作为开发者来说&#xff0c;单说自己接触过的或者曾经用过的数据库…

一套C#自主版权+应用案例的手麻系统源码

手术麻醉信息管理系统源码&#xff0c;自主版权应用案例的手麻系统源码 手术麻醉信息管理系统包含了患者从预约申请手术到术前、术中、术后的流程控制。手术麻醉信息管理系统主要是由监护设备数据采集子系统和麻醉临床系统两个子部分组成。包括从手术申请到手术分配&#xff0c…

FJSP:蜣螂优化算法( Dung beetle optimizer, DBO)求解柔性作业车间调度问题(FJSP),提供MATLAB代码

一、柔性作业车间调度问题 柔性作业车间调度问题&#xff08;Flexible Job Shop Scheduling Problem&#xff0c;FJSP&#xff09;&#xff0c;是一种经典的组合优化问题。在FJSP问题中&#xff0c;有多个作业需要在多个机器上进行加工&#xff0c;每个作业由一系列工序组成&a…

实时计算平台设计方案:913-基于100G光口的DSP+FPGA实时计算平台

基于100G光口的DSPFPGA实时计算平台 一、产品概述 基于以太网接口的实时数据智能计算一直应用于互联网、网络安全、大数据交换的场景。以DSPFPGA的方案&#xff0c;体现了基于硬件计算的独特性能&#xff0c;区别于X86GPU的计算方案&#xff0c;保留了高带宽特性&…

学习鸿蒙基础(12)

目录 一、网络json-server配置 &#xff08;1&#xff09;然后输入&#xff1a; &#xff08;2&#xff09;显示下载成功。但是输入json-server -v的时候。报错。 &#xff08;3&#xff09;此时卸载默认的json-server &#xff08;4&#xff09;安装和nodejs匹配版本的js…

JS-25-浏览器和浏览器对象

一、浏览器 由于JavaScript的出现就是为了能在浏览器中运行&#xff0c;所以&#xff0c;浏览器自然是JavaScript开发者必须要关注的。 目前主流的浏览器分这么几种&#xff1a; IE 6~11&#xff1a;国内用得最多的IE浏览器&#xff0c;历来对W3C标准支持差。从IE10开始支持E…

idea常用配置

IDEA设置全局配置 参考&#xff1a;IDEA设置全局配置_idea如何打开一个项目,全局设置-CSDN博客 idea提交代码到git或svn上时&#xff0c;怎么忽略.class、.iml文件和文件夹等不必要的文件 参考&#xff1a;idea提交代码到git或svn上时&#xff0c;怎么忽略.class、.iml文件和文…

TPM如何培养员工成为设备的主人?

近年来&#xff0c;如何确保这些设备的高效、稳定运行&#xff0c;成为了企业持续发展的关键。全面生产维护&#xff08;Total Productive Maintenance&#xff0c;简称TPM&#xff09;作为一种先进的管理理念&#xff0c;强调全员参与设备维护和管理&#xff0c;将员工培养成为…

java集成阿里云短信服务模版并发送短信

配置 全部配置成功后可以获取到对应的模版code pom.xml <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.1.1</version></dependency><dependency><groupId>…

C++从入门到精通——类的作用域及类的实例化

类的作用域及类的实例化 前言一、类的作用域二、类的实例化引例类是对对象进行描述的示例 一个类可以实例化出多个对象示例 示例 前言 类的作用域是指类中定义的变量和方法的可见性和可访问性范围。在类的内部&#xff0c;所有成员&#xff08;包括属性和方法&#xff09;都具…