当前位置: 首页 > news >正文

javaEE 初阶 — CSS 元素的显示模式与盒模型

文章目录

  • 1. 元素的显示模式
    • 1.1 块级元素
    • 1.2 行内元素
    • 1.3 行内元素和块级元素的区别
    • 1.4 改变显示模式
  • 2. 盒模型
    • 2.1 边框
      • 2.1.1 边框的粗细
      • 2.1.2 边框的颜色
      • 2.1.3 边框的风格
    • 2.2 内边距
    • 2.3 外边距
      • 2.3.1 margin 的特殊情况

1. 元素的显示模式

1.1 块级元素


常见的元素:

h1 - h6pdivulolli

特点:

  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制
  • 宽度默认是父级元素宽度的 100%(和父元素一样宽)
  • 是一个容器(盒子), 里面可以放行内和块级元素

1.2 行内元素


常见元素:

a、strong、b、em、i、del、s、ins、u、span

特点:

  • 不独占一行,一行可以显示多个
  • 设置高度,宽度,行高无效
  • 左右外边距有效(上下无效),内边距有效
  • 默认宽度就是本身的内容
  • 行内元素只能容纳文本和其他行内元素,不能放块级元素

1.3 行内元素和块级元素的区别

  • 块级元素独占一行,行内元素不独占一行
  • 块级元素可以设置宽高,行内元素不能设置宽高
  • 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置

1.4 改变显示模式


使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

2. 盒模型


任何一个 html 元素都是一个矩形的盒子,而盒子里可以放内容(内容可以是文本或者其他元素)



content 指的是内容,padding 指的是内边距,border 指的是边框,margin 指的是外边距。

2.1 边框


通过 border 来设置边框的属性,直接使用 border 属性则是直接设置四个方向。

使用 border-left、border-right、border-top、border-bottom 来设置左边、右边、顶部、底部

设置边框要设置三个方面:边框的粗细、颜色、风格。


先来设计一个简单的黑色边框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我最帅</title><style>div {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px black solid; }</style></head>
<body><div>这是一个div</div>
</body>
</html>


border: 50px black solid 这是一个宽度为 5像素,颜色为黑色,风格为实线(solid)的边框。



将开发者工具打开,可以发现此时的尺寸是有一些问题的。



可以看到此时的尺寸并不是 200 * 100,而是 209.6 * 109.6 了。

此时多出来的尺寸就是边框的尺寸,这说明边框默认情况下会撑大盒子的,
换句话也就是 widthheight 表示的是内容部分的尺寸。


但是我们更多的时候是不希望盒子被撑大的,因为会影响该元素的其他元素的相对位置。
此时就可以设置一个专门的属性来防止盒子被撑大。

 box-sizing: border-box;


设置好上述的属性之后,盒子就不会被撑大了。

2.1.1 边框的粗细


可以改变像素大小来改变边框的粗细。

border: 10px black solid; 




以上是 10 像素的边框。

 border: 20px black solid; 




以上就是 20 像素的边框。

2.1.2 边框的颜色


这里的更改颜色可以使用,英文单词、rgb、十六进制 的方式来更改颜色。

 border: 5px green solid; 




上面就是一个英文单词更改的绿色边框。

   border: 5px #00ff00 solid; 




以上就是一个十六进制更改的绿色边框。

  border: 5px rgb(0, 255, 0) solid; 




以上就是一个rgb更改的绿色边框。

2.1.3 边框的风格


上面演示的 solid 是一个 实线 的风格,下面演示其他的风格。

dashed 表示的是一个为虚线的风格。



dotted 的风格是一个由点组成的虚线。



具体有哪些风格可以打开 mdn 文档,查看 border



这里面就有一些可以参考的风格。

2.2 内边距


先来使用 padding给左边设置一个内边距,padding 设置的是 内容 和 边框 之间的距离。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我最帅</title><style>div {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;padding-left: 10px;}</style></head>
<body><div>这是一个div</div>
</body>
</html>






根据开发者工具观察盒子模型,可以很清楚的看到左边多了一条框框,并且是位于边框和内容之间的。


我们也可以不指定方向,此时就是四个方向(top、right、bottom、left)都会去添加一条内边距。

padding: 10px;




可以看到上述图片的内边距已经是 4 个方向都有了。


添加页边距的时候还有一些其他的写法:

padding: 10px 20px; 表示的是上下边距是 10,左右边距是 20。
padding: 10px 20px 30px 40px; 表示的分别是四个方向边距,顺序是 上右下左


如果要使用 padding: 10px 20px; 的方式,设置一个上下边距是 10 ,左右边距是 20 。





可以看到左右边距比上下边距宽一些。


也可以使用 padding: 10px 20px 30px 40px; 的方式,分别给四个方向设置边距。





可以看到,按照从上右下左的顺序,边距逐渐增大。

2.3 外边距


先来观察没有设置外边距的情况。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我最帅</title><style>.two {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;padding: 10px 20px 30px 40px;}  .one {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px;border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;}</style></head>
<body><div class="one">这是一个div</div><div class="two">这是另一个div</div>
</body>
</html>




当此处并没有设置外边距的时候,两个 div 是连接到一起的。


下面设置底部为 10 像素的外边距。

margin-bottom: 10px;




设置成功后,两个 div 就分开了。


margin 的写法和 padding 差不多,也是可以分四个方向来设置。

margin: 10px; 表示四个方向都是 10像素。
margin: 10px 20px; 表示上下边距为 10 像素,左右边距为 20 像素。
margin: 10px 20px 30px 40px; 表示按照 上右下左 的顺序分别设置为 10像素、20像素、30像素、40像素。

2.3.1 margin 的特殊情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我最帅</title><style>.two {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;}  .one {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px;border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;margin-bottom: 10px;}.three {width: 50px;height: 50px;background-color: red;}</style></head>
<body><div class="one"><div class="three"></div></div><div class="two">这是另一个div</div>
</body>
</html>


根据上面的代码会得到下面的情况。



可以看到左上角有一个红色的矩形。


现在将 margin-leftmargin-right 属性设置成 auto 就会形成一个水平居中的效果。

 .three {width: 50px;height: 50px;background-color: red;margin-left: auto;margin-right: auto;}




但是如果把 margin-topmargin-bottom 设置成 auto 是不可以形成垂直居中的。


相关文章:

javaEE 初阶 — CSS 元素的显示模式与盒模型

文章目录1. 元素的显示模式1.1 块级元素1.2 行内元素1.3 行内元素和块级元素的区别1.4 改变显示模式2. 盒模型2.1 边框2.1.1 边框的粗细2.1.2 边框的颜色2.1.3 边框的风格2.2 内边距2.3 外边距2.3.1 margin 的特殊情况1. 元素的显示模式 1.1 块级元素 常见的元素: h1 - h6 、…...

新星计划-我为什么要写博客?写博客的意义是什么

CSDN的各位友友们你们好,今天千泽要和大家交流一下写博客的意义,并且鼓励大家参加CSDN官方举办的新星计划,这个可以让我们更快的成长,十分有价值.接下来让我们一起开始吧!如果对您有帮助的话希望能够得到您的支持和帮助,我会持续更新的!&#x1f6a9;part1:自我介绍我是一名来自…...

嵌入式学习笔记——STM32的USART收发字符串及串口中断

USART收发字符串及串口中断前言字符串的收发发送一个字符串接收字符串需求利用串口实现printf中断中断是什么前言 上一篇中&#xff0c;介绍了串口收发相关的寄存器&#xff0c;通过代码实现了一个字节的收发&#xff0c;本文接着上面的内容&#xff0c;通过功能函数实现字符串…...

数据分析之Pandas(1)

3.Pandas 文章目录3.Pandas3.1 Pandas基本介绍3.1.1 Pandas的基本数据结构3.1.1.1 Pandas库的Series类型3.1.1.2 Pandas库的DataFrame类型DataFrame初始化DataFrame查看数据3.1.2 Pandas读取数据及数据操作行操作添加一行删除一行列操作增加一列删除一列通过标签选择数据条件选…...

17、江科大stm32视频学习笔记——USART串口协议和USART串口外设

目录 1、通信接口 2、 硬件电路 3、电平标准 4、串口参数及时序 5、USART简介 6、USART工作 &#xff08;1&#xff09;写操作 &#xff08;2&#xff09;读操作 &#xff08;3&#xff09;帧头和帧尾的添加和除由电路自动执行 &#xff08;4&#xff09;硬件数据控制…...

leetcode:有效地括号

给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右括号都…...

四等分list

Testpublic void s (){ int targ 4; List mList new ArrayList(); List<List> mEndList new ArrayList<>(); for (int i 0; i <34; i) { mList.add(“item” i); } // System.out.println(mList.toString()); if (mList.size() % targ ! 0) { for (int j …...

php连接sqlserver数据库

docker 安装sqlserver数据库sudo docker pull mcr.microsoft.com/mssql/server:2017-latestsudo docker run -e "ACCEPT_EULAY" -e "MSSQL_SA_PASSWORD<YourStrongPassw0rd>" -p 1433:1433 --name sqlserver --hostname sqlserver -d mcr.microsoft.…...

The 2019 China Collegiate Programming Contest Harbin Site F. Fixing Banners

Problem - F - Codeforces 翻译&#xff1a; 哈尔滨&#xff0c;这个名字最初是一个满语单词&#xff0c;意思是“晒渔网的地方”&#xff0c;从松花江边的一个小农村居民点发展成为中国东北最大的城市之一。1898年&#xff0c;随着中国东部铁路的到来&#xff0c;这座城市首先…...

Maven的下载和配置

一、前言 一般按要求下载jar ,但是jar 包版本不好控制。有时候就会jar版本不同导致项目运行的结果也有差异&#xff0c;这样在团队开发中&#xff0c;在多个项目开发的是&#xff0c;jar包还要进行拷贝&#xff0c;可能也会出现版本还jar损坏的情况&#xff0c;所以一个能统一…...

服务高并发、高性能、高可用实现方案

服务高并发、高性能、高可用实现方案 软件开发的三高指标&#xff1a;高并发、高性能、高可用。 高并发方面要求QPS 大于 10万&#xff1b;高性能方面要求请求延迟小于 100 ms&#xff1b;高可用方面要高于 99.99%(4个9) 一、高并发&#xff1a; 高并发是现在互联网分布式框架设…...

uniCloud在线升级APP配置教程

app在线升级背景实现思路流程流程背景 因用户需要添加手机h5页面来进数据操作实现思路流程 实现流程图流程 相关文档&#xff1a;帮助文档 https://uniapp.dcloud.net.cn/uniCloud/cf-functions.html 注册服务空间 https://unicloud.dcloud.net.cn/pages/login/login uni升级…...

idea常用的快捷键

idea常用的快捷键Alt回车 导入包,自动修正CtrlN 查找类CtrlShiftN 查找文件CtrlAltL 格式化代码CtrlAltO 优化导入的类和包AltInsert 生成代码(如get,set方法,构造函数等)CtrlE或者AltShiftC 最近更改的代码CtrlR 替换文本CtrlF 查找文本CtrlShiftSpace 自动补全代码Ctrl空格 代…...

全志V85x硬件设计大赛作品精选第一期,快来Pick你心目中的最佳方案

1、V853-智能交互摄像头开发板 该参赛作品基于全志V853开发板制作的一款类似眼镜外挂的小产品&#xff0c;可以对场景进行辅助识别&#xff0c;并通过云端交互实现物联网控制&#xff0c;进一步实现物联网与人机交互的融合。 开发板配置了摄像头和小屏幕接口&#xff0c;并外…...

博客系统(界面设计)

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录实现博客列表页预期效果导航栏页面主体左右布局左侧区域右侧区域完整代码实现博客详情页预期效果导航栏 左侧右侧完整代码实现…...

素材要VIP咋整?看python大展神通

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 再我们缺少素材的时候&#xff0c;我们第一反应 我们肯定会去网上寻找&#xff0c;但是&#xff01;&#xff01; 有的素材需要VIP&#xff01;这可咋整呢&#xff1f; 看我利用python大展神通&#xff0c;采集某图网图片…...

[ vulnhub靶机通关篇 ] 渗透测试综合靶场 DC-1 通关详解 (附靶机搭建教程)

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

软件测试文档编写步骤

编写软件测试文档是软件测试中非常重要的一部分。以下是编写软件测试文档的一些常见步骤&#xff1a; 1.明确软件测试的目标和目的&#xff1a;在开始编写软件测试文档之前&#xff0c;需要明确测试的目标和目的。这包括定义测试的范围&#xff0c;测试的目标和测试的优先级。 …...

重新认识下网页水印

使用背景图图片 单独使用 css 实现&#xff0c;使用 backgroundImage&#xff0c;backgroundRepeat 将背景图片平铺到需要加水印的容器中即可。 如果希望实现旋转效果&#xff0c;可以借助伪元素&#xff0c;将背景样式放到伪元素中&#xff0c;旋转伪元素实现&#xff1a; &l…...

Unity脚本练习

在C# 中 class 是创建类的标志&#xff0c;要创建类的话得现有class上面这个的逻辑是 类的访问权限&#xff0c; 关键字&#xff0c;类名以及类继承的父类在Unity中创建一个脚本或者添加一个组件&#xff0c;就相当于在Unity命名空间中创建了一个可以访问的类。这些类能够直接在…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...