盒子边框、外边距、内边距以及浮动设置

最新推荐文章于 2023-01-03 00:00:00 发布
最新推荐文章于 2023-01-03 00:00:00 发布
阅读量1.7k 收藏 9
点赞数 1
分类专栏： css 文章标签： 盒子边框、外边距、内边距以及浮动设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45251955/article/details/95880988
版权

1.浮动设置     float：浮动方向        right右浮动     left左浮动。

             

  2.边框设置      dorder：宽度   样式   颜色         ，其中边框实线为solid，虚线为dotted。

3.外边距设置     margin：距离       1-4个值都可以，顺时针赋值，或者      margin-top：距离  、 margin-right：距离  、 margin-botton：距离  、 margin-left：距离        单位为px。

4.内边距设置     padding：距离        1-4个值都可以，顺时针赋值，或者       padding-top：距离  、  padding-right：距离  、 padding-botton：距离  、  padding-left：距离        单位为px。

 

 

 

 

 

周朝兵
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS快速入门关键字整理文档
04-10
盒模型（Box Model）：CSS布局的基础，每个HTML元素都可以看作是由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。 流（Flow）：在CSS中，元素可以处于不同的布局流中，如普通流、浮动...
一致性协议理解：保序与order
a11214033的博客
03-18 3246
Order使用背景 1）除非特别要求，对Normal memory、Device RE的访问，同地址保序即可； 2）对Device nRE\Device nRnE的访问，需要对空间访问保序； 3）CHI中，互联不保证顺序，从相同channel发布的命令不一定按照相同顺序到达HN。 问题：那么CHI如何解决transaction顺序问题？ CHI中提供Comp、CompAck、Order这3种mechanism解决顺序问题，下文分别描述。 Comp mechanism Comp如何传递？ 为了
设置元素的浮动（float）
m0_72959685的博客
08-09 2261
块元素在文档流中会独占一行，自上而下排列，如果设置元素浮动，元素脱离文档流后，就不会具有元素的特点float：设置元素的浮动可选值：none；元素正常显示，不浮动（默认值）left；元素向左浮动right；元素向右浮动浮动可以使块元素水平布局例：设置元素左浮动。...
java order_【技术累积】【点】【java】【25】Orderd
weixin_42299679的博客
02-20 321
基础概念Orderd是spring core中定义的一个接口，使用它以及相关的Comparator和@Order注解，可以实现对元素的排序。@Order直接先说下@Order注解吧，使用场景较多。@Retention(RetentionPolicy.RUNTIME)@Target({ElementType.TYPE, ElementType.METHOD, ElementType.FIELD})@...
drools规则引擎从入门到精通
只为成功找方法 不为失败找借口
05-02 1828
1 .场景 1.1需求 商城系统消费赠送积分 100元以下, 不加分 100元-500元 加100分 500元-1000元 加500分 1000元 以上 加1000分 ...... 1.2传统做法 1.2.1 if...else if (order.getAmout() <= 100){ order.setScore(0); addScore(order); }else if(order.getAmout() > 100 && order
复制 order 表的效率挑战
TiDB 社区干货传送门
01-03 140
作者： pepezzzz 原文来源： https://tidb.net/blog/d8310c21 ...
css3浮动知识
m0_67316957的博客
06-30 295
在实际开发中我们的块经常需要按行显示，如果将其改为行内块元素，他们之间的间隔难以调节，如果采用浮动就可以快捷方便地调节块的位置
html图片浮动之间距离,[转载]【Css技巧】Li列表中放入图片在浮动情况下出来的间距!...
weixin_30573089的博客
06-07 940
Li列表中放入图片，并且如果图片在浮动的情况下出来在IE6下会使LI之间产生2个像素的间距，即使为LI设置 padding:0;margin:0;也是一样的。如果图片不浮动，那么LI也就不会有2个像素的间距了。bug如下图:1、样式如下:.box{ width:581px; height:280px; clear:both; padding:0px;margin:0px; overflow:hid...
spmak matlab,Differentiate function
weixin_39941859的博客
03-16 308
fnderDifferentiate functionDescriptiondorder-th derivative of the function inf. The default value of dorder is 1.For negative dorder, the particular|dorder|-th indefinite integral is returned that van...
css系列-float浮动
前端蜗牛君
12-30 604
浮动布局 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 在网站开发中需要一行排列多个元素，使用浮动可以方便实现。下面是使用浮动排列多个元素 #FLOAT 使用浮动可以控制相邻元素间的排列关系。 选项 说明 left 向左浮动 rig...
HTML之浮动和边距
点点的java小栈
08-02 6484
在html中，浮动和边距是比较重要的一部分，本文就带大家来认识一下浮动和边距，并熟练运用到项目中去。
css基础、选择器介绍、样式介绍
12-29
盒子模型：内容、边框、内边距、外边距； CSS布局：结构伪类选择器、伪元素、标准流、浮动； 定位：绝对定位、相对定位、固定定位、子绝父相； 装饰：垂直对齐方式、光标类型、边框圆角、overflow溢出部分显示效果
重新整理了一遍,花了小半月终于将基础Html+css系统的学完，期间的学习笔记+中文手册都在这，分享..
01-08
盒子边框（border） 十. 内边距（padding） 十一.外边距(margin) 十二.浮动(float) 十三定位(position) 十四.overflow 溢出 十五.鼠标样式cursor 十六.溢出的文字省略号显示 一.认识WEB。 网页主要由文字、图像和...
H5+CSS3.zip
08-06
css盒模型：块级元素，内联元素，内敛块状元素，none使元素隐身，设置宽度、高度、背景色、边框、圆角，padding内边距，margin外边距； css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、...
css设计彻底研究 源代码
04-18
　3.1　盒子的内部结构　3.2　边框（border）　3.2.1　实验1——border-style 3.2.2　属性值的简写形式　3.2.3　实验2——属性的缩写形式　3.2.4　实验3——边框与背景　3.3　内边距（padding）　3.4　外边距...
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
web盒子模型浮动非浮动代码
05-12
以下是一个使用盒子模型的浮动和非浮动示例代码： 非浮动盒子模型代码： ```html <div class="container"> <div class="box"> <h2>标题</h2> <p>这是文本内容</p> </div> </div> <style> .container { width: 600px; /* 指定容器的宽度 */ margin: 0 auto; /* 居中显示 */ border: 1px solid black; /* 容器边框 */ padding: 20px; /* 容器内边距 */ } .box { background-color: #eee; /* 盒子背景色 */ border: 1px solid gray; /* 盒子边框 */ padding: 10px; /* 盒子内边距 */ } </style> ``` 浮动盒子模型代码： ```html <div class="container"> <div class="box box-left"> <h2>标题1</h2> <p>这是文本内容1</p> </div> <div class="box box-right"> <h2>标题2</h2> <p>这是文本内容2</p> </div> </div> <style> .container { width: 600px; /* 指定容器的宽度 */ margin: 0 auto; /* 居中显示 */ border: 1px solid black; /* 容器边框 */ overflow: hidden; /* 清除浮动 */ } .box { background-color: #eee; /* 盒子背景色 */ border: 1px solid gray; /* 盒子边框 */ padding: 10px; /* 盒子内边距 */ } .box-left { float: left; /* 左浮动 */ width: 30%; /* 左盒子宽度 */ } .box-right { float: right; /* 右浮动 */ width: 70%; /* 右盒子宽度 */ } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值