008 CSS盒子模型

文章目录

  • 盒子模型
    • 内容-宽度和高度
    • 内边距-padding
    • 边框-border
      • 圆角-border-radius
    • 外边距-margin
      • 上下margin的传递
      • 上下margin的折叠
      • 块级元素的水平居中
      • 行内级元素(包括inline-block元素)的水平居中
    • 外轮廓-outline
    • 盒子阴影-box-shadow
    • 文字阴影-text-shadow
    • 行内非替换元素的特殊性
    • CSS属性-box-sizing

盒子模型

盒子模型
因为盒子有四边，所以margin/padding/border都包括top/right/bottom/left四个边

内容-宽度和高度

设置内容是通过宽度和高度设置的:
宽度设置:width
高度设置:height
注意:对于行内级非替换元素来说，设置宽高是无效的

另外还可以设置如下属性:
min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时，可以设置最大宽度和最小宽度
不常用的两个属性:
min-height:最小高度，无论内容多少，高度都大于或等于min-height
max-height:最大高度，无论内容多少，高度都小于或等于max-height

width不设置时默认为auto，交给浏览器来决定，块级元素独占父元素的一行，行内级元素包裹内容

内边距-padding

padding属性用于设置盒子的内边距，通常用于设置边框和内容之间的间距
padding有四个方向:padding-top、padding-right、padding-bottom、padding-left

padding缩写是上右下左

padding并非必须是四个值
padding其他值

边框-border

border用于设置盒子的边框
边框具备宽度width、样式style、颜色color
边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是简写属性
边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是简写属性
边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是简写属性
边框的样式

圆角-border-radius

border-radius用于设置盒子的圆角
常见的值
数值:通常用来设置小的圆角
百分比:通常用来设置一定的弧度或圆形

如果一个元素是正方形，设置border-radius大于或等于50%时，就变成一个圆

.box{
	width: 100px;
	height: 100px;
	border: 5px solid #0f0;
	border-radius:50%
}

border-radius事实上是一个缩写属性
将border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius简写为一个属性

外边距-margin

margin属性用于设置盒子的外边距，通常用于元素和元素之间的间距
margin包括四个方向:margin-top、margin-right、margin-bottom、margin-left

<html>
	<head>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background-color: #f00;

				padding-left: 30px;
				box-sizing: border-box;
			}
			
			.container {
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
		</style>
	</head>

	<body>

		<div class="box">
			<div class="container"></div>
		</div>
	</body>

</html>




<html>
	<head>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background-color: #f00;
				
				overflow: auto;
			}
			
			.container {
				width: 100px;
				height: 100px;
				background-color: #0f0;

				margin-left: 30px;
				margin-top: 30px;
			}
		</style>
	</head>

	<body>

		<div class="box">
			<div class="container"></div>
		</div>
	</body>

</html>

上下margin的传递

margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC:设置overflow为auto

建议
margin一般用来设置兄弟元素之间的间距
padding一般用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠)
水平方向上的margin(margin-left、margin-right)永远不会collapse
折叠后最终值的计算规则
两个值进行比较，取较大的值
如何防止:只设置其中一个元素的margin

两个兄弟块级元素之间上下margin的折叠
父子块级元素之间margin的折叠

块级元素的水平居中

block box width = width + padding + border + margin

margin: 0 auto;

行内级元素(包括inline-block元素)的水平居中

在父元素中设置text-align:center

外轮廓-outline

a {
	outline: none;
}
/*
a:focus {
	outline: none;
}
*/

outline表示元素的外轮廓
不占用空间
默认显示在border的外面
outline相关属性
outline-width:外轮廓的宽度
outline-style:取值跟border的样式一样，比如solid、dotted等
outline-color:外轮廓的颜色
outline:outline-width、outline-style、outline-color的简写属性

应用:
去除a元素、input元素的focus轮廓效果

盒子阴影-box-shadow

box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加

<shadow>的格式
none .|. <shadow># <shadow> = inset? && <length>{2,4}. && <color>?

第1个<length>:offset-x，水平方向的偏移，正数往右偏移
第2个<length>:offset-y，垂直方向的偏移，正数往下偏移
第3个<length>:blur-radius，模糊半径
第4个<length>:spread-radius，延伸半径
<color>:阴影的颜色，如果没有设置，就跟随color属性的颜色
inset:外框阴影变成内框阴影
测试网站:
https://html-css-js.com/css/generator/box-shadow

文字阴影-text-shadow

text-shadow: 5px 5px 5px orange,10px 10px 5px blue,15px 15px 5px green;

<shadow>的常见格式
none .|. <shadow-t># <shadow-t> = [ <length>{2,3} && <color>? ]
相当于box-shadow，它没有spread-radius的值
测试网站:
https://html-css-js.com/css/generator/text-shadow

行内非替换元素的特殊性

以下属性对行内级非替换元素不起作用
width、height、margin-top、margin-botton

以下属性对行内级非替换元素的效果比较特殊
padding-top、padding-bottom、上下方向的border

<html>
	<head>
		<style>
			.content {
				background-color: #f00;
				color: white;
			/*内容: width/height压根不生效*/
			width: 300px;
			height: 300px;
			
			/*内边距: padding*/
			/*特殊: 上下会被撑起来，但是不占据空间*/
			padding: 50px;


			/*边框: border*/
			/*特殊: 上下会被撑起来，但是不占据空间*/
			border: 50px solid orange;
			
			/*外边距:margin*/
			/*特殊: 上下的margin是不生效的*/
			margin: 50px;

			}
		</style>
	</head>

	<body>
		<span class="content">
			span元素
		</span>
		aaa
		<div>bbb</div>
	</body>


</html>

背景色有设置到border下面，前景色会在border没有设置颜色的情况下，显示出color颜色

CSS属性-box-sizing

box-sizing用来设置盒子模型中的宽高的行为
content-box
padding、border都布置在width、height外边
content-box

border-box
padding、border都布置在width、height里边
border-box

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

代码随想录算法训练营第三十二天| LeetCode 122.买卖股票的最佳时机II、55. 跳跃游戏、45.跳跃游戏II

代码随想录算法训练营第三十二天| LeetCode 122.买卖股票的最佳时机II、55. 跳跃游戏、45.跳跃游戏II

一、LeetCode 122.买卖股票的最佳时机II 题目链接/文章讲解/视频讲解&#xff1a;https://programmercarl.com/0122.%E4%B9%B0%E5%8D%96%E8%82%A1%E7%A5%A8%E7%9A%84%E6%9C%80%E4%BD%B3%E6%97%B6%E6%9C%BAII.html 状态&#xff1a;已解决 1.思路 这题的核心思路是&#xff1a;…
阅读更多...
Python爬虫-爬取药膳食谱数据

Python爬虫-爬取药膳食谱数据

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…
阅读更多...
第二十五周代码（蓝桥杯查缺补漏）

第二十五周代码（蓝桥杯查缺补漏）

2024/03/31 周日 填充 题目链接 【参考代码】 想用暴力&#xff0c;没过 //枚举&#xff0c;未出结果QAQ #include <bits/stdc.h> using namespace std; string s00 "00"; string s11 "11"; int ans 0; //m个问号&#xff0c;子串有2^m…
阅读更多...
C#探索之路基础夯实篇(4)：UML类图中的六种关系详细说明

C#探索之路基础夯实篇(4)：UML类图中的六种关系详细说明

文章目录 UML类图中的关系前景1、关联关系&#xff08;Association&#xff09;&#xff1a;2、聚合关系&#xff08;Aggregation&#xff09;&#xff1a;3、组合关系&#xff08;Composition&#xff09;&#xff1a;4、泛化关系&#xff08;Generalization&#xff09;&…
阅读更多...
计算机网络——37认证

计算机网络——37认证

认证 目标&#xff1a;Bob需要Alice证明他的身份 Protocol ap1.0&#xff1a;Alice说"A am Alice" 可能出现的问题&#xff1a; 在网络上Bob看不到Alice&#xff0c;因此Trudy可以简单的声称他是Alice 认证&#xff1a;重新尝试 Protocol ap2.0&#xff1a;Alice…
阅读更多...
12.自定义的多帧缓存架构

12.自定义的多帧缓存架构

1.简介 在数字图像处理中&#xff0c;经常需要用到的一个架构就是多帧缓存。视频流中需要用到多帧缓存来防止帧撕裂现象&#xff0c;图像处理中也需要帧差法来做移动目标检测。因此一个多帧缓存架构在图像系统的设计中是十分重要的。 2.多帧缓存 在视频流中&#xff0c;通常不…
阅读更多...
数据库 06-03 时间戳

数据库 06-03 时间戳

01.什么是时间戳 “时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。通俗的讲, 时间戳是一份能够表示一份数据在一个特定时间点已经存在的完整的可验证的数据。 02.用时间戳实现调度 定义 数据库给予一个事务一个时…
阅读更多...
用友U9 存在PatchFile.asmx接口任意文件上传漏洞

用友U9 存在PatchFile.asmx接口任意文件上传漏洞

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 用友U9是由中国用友软件股份有限公司开发的一款企业…
阅读更多...
前端学习笔记：display（未完成）

前端学习笔记：display（未完成）

这是本人学习的总结&#xff0c;主要学习资料如下 目录 1、一般属性2、flex系列2.1、flex容器的维度2.2、flex其他的关联属性 – 1、一般属性 display是css中的一个重要属性&#xff0c;它的值基本决定了元素的布局。这里就对它的值如何影响元素布局做一个总结。 display:bl…
阅读更多...
STM32学习和实践笔记（4）: 分析和理解GPIO_InitTypeDef GPIO_InitStructure (e)

STM32学习和实践笔记（4）: 分析和理解GPIO_InitTypeDef GPIO_InitStructure (e)

接上文&#xff0c;继续来看这个函数&#xff1a; /*** brief Initializes the GPIOx peripheral according to the specified* parameters in the GPIO_InitStruct.* param GPIOx: where x can be (A..G) to select the GPIO peripheral.* param GPIO_InitStruct:…
阅读更多...
【环境变量】常见的环境变量 | 相关指令 | 环境变量系统程序的结合理解

【环境变量】常见的环境变量 | 相关指令 | 环境变量系统程序的结合理解

目录 常见的环境变量 HOME PWD SHELL HISTSIZE 环境变量相关的指令 echo&env export unset 本地变量 环境变量整体理解 程序现象_代码查看环境变量 整体理解 环境变量表 环境变量表的传递 环境变量表的查看 测试验证 少说废话&#x1f197; 每个用户…
阅读更多...
JavaScript 设计模式之代理模式

JavaScript 设计模式之代理模式

代理模式&#xff0c;代理&#xff08;proxy&#xff09;是一个对象&#xff0c;它可以用来控制对另一个对象的访问。 现在页面上有一个香港回归最想听的金典曲目列表&#xff1a; <ul id"container"><li>我的中国心</li><li>东方之珠<…
阅读更多...
C# 使用共享文件生成项目

C# 使用共享文件生成项目

项目文件中添加共享文件 <ItemGroup><Compile Include"..\Shared\Interfaces\Services\ITextService.cs" Link"Interfaces\Services\ITextService.cs" /><Compile Include"..\Shared\Services\TextService.cs" Link"Service…
阅读更多...
C++高频面试知识总结 part2

C++高频面试知识总结 part2

C高频面试 1.sizeof是什么&#xff1f;sizeof一个class大小怎么确定&#xff1f;是在编译期还是在运行期确定?2.函数重载的机制&#xff0c;重载是在编译期还是在运行期确定&#xff0c;重载有额外开销吗3.函数重写在编译还是运行时确定&#xff1f;4.如何找到虚函数表&#x…
阅读更多...
【数据结构与算法】力扣 24. 两两交换链表中的节点

【数据结构与算法】力扣 24. 两两交换链表中的节点

题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a; head [1,2,3,4] 输出&#…
阅读更多...
go | gin 重定向路由重定向

go | gin 重定向路由重定向

web 重定向 重定向有一点要注意&#xff0c;重定向是在客户端那边执行的&#xff0c;一次服务器只能响应一次请求。但是要注意路由重定向 路由重定向是在服务器内部完成重定向资源请求 package mainimport ("github.com/gin-gonic/gin""fmt" )/* func main…
阅读更多...
C语言自定义类型变量——枚举（enum）

C语言自定义类型变量——枚举（enum）

一.枚举的定义和声明 字面意思&#xff0c;枚举就是一一列举&#xff0c;把可能的取值一一列举&#xff0c;在我们现实生活中有许多可以列举的事物&#xff0c;例如&#xff1a;一周七天&#xff0c;一年四季&#xff0c;性别&#xff0c;月份&#xff0c;三原色等等。当我们需…
阅读更多...
【SpringCloud】Nacos 注册中心

【SpringCloud】Nacos 注册中心

目 录 一.认识和安装 Nacos1.Windows安装1. 下载安装包2. 解压3. 端口配置4. 启动5. 访问 2.Linux安装1. 安装JDK2. 上传安装包3. 解压4. 端口配置5. 启动 二.服务注册到 nacos1. 引入依赖2. 配置 nacos 地址3. 重启 三.服务分级存储模型1. 给 user-service 配置集群2. 同集群优…
阅读更多...
Spring Boot-01-通过一个项目快速入门

Spring Boot-01-通过一个项目快速入门

官方参考文档&#xff1a;Spring Boot Reference Documentation 0. 概述 Spring的缺点&#xff1a; 1. 配置繁琐&#xff1a;虽然Spring的组件代码是轻量级&#xff0c;但它的配置却是重量级的。 2. 依赖繁琐&#xff1a;项目的依赖管理也是一件耗时耗力的事情。分析要导入哪…
阅读更多...
在单交换机局域网中，不同网段的主机通信探秘

在单交换机局域网中，不同网段的主机通信探秘

在理解局域网中不同网段主机之间的通信之前&#xff0c;我们首先要明白网络的基本组成和工作原理。局域网&#xff08;LAN&#xff09;是一个封闭的网络环境&#xff0c;通常由交换机&#xff08;Switch&#xff09;作为核心设备连接网络中的各个主机。当我们谈论不同网段的主机…
阅读更多...
最新文章

Copyright @ 2022~2023