html-day04盒子模型

简介: html-day04盒子模型

html-day04盒子模型


1.浮动:是一种布局属性,主要用于实现一行多列效果

语法:
    float:left; 或者  float:right;
应用:
  1.一行多列-元素横着排列
  2.实现图文环绕效果。 
注意:浮动会让元素脱离文档流!

2.盒子模型:是一种思维模型,主要用于实现布局效果。

组成: 尺寸 + 内边距 + 外边距 + 边框

1.尺寸

1.设置宽度    width:*px | *%;
2.设置高度    height:*px | *%;
说明: 
 如果使用百分比,代表的是其父元素的宽高的百分比。
 行级元素不能设置宽高。

2.边框

border:边框的粗度   线型    颜色;
    线型有:  solid实线    dashed虚线   dotted点线  double双线
设置指定方向的边框
    border-方向的英文:边框的粗度   线型    颜色;
    设置左边框          border-left:边框的粗度   线型    颜色;
    设置上边框          border-top:边框的粗度   线型    颜色;
    设置下边框          border-bottom:边框的粗度   线型    颜色;
    设置右边框          border-right:边框的粗度   线型    颜色;
注意:单个和复合属性一起使用,必须复合在前,单个在后!

3.内边距:盒子内容和其边框之间的间隔。

padding:*px;
   padding:10px 20px 30px 40px;
   padding:10px 20px 30px;
   padding:10px 20px;
   padding:10px; 四个方向
   对应规则:上方向出发,顺时针旋转对应。有缺省,取对边。
设置左内边距          padding-left:*px;
设置上内边距          padding-top:*px;
设置下内边距          padding-bottom:*px;
设置右内边距          padding-right:*px;
注意:padding会撑大盒子;在盒子的宽高基础上做减法解决

4.外边距:盒子边框和之外的东西的间隔。

margin:*px; 
  margin:10px 20px 30px 40px;
  margin:10px 20px 30px;
  margin:10px 20px;
    margin:10px; 四个方向
    对应规则:上方向出发,顺时针旋转对应。有缺省,取对边
    设置左外边距          margin-left:*px;
    设置上外边距          margin-top:*px;
    设置下外边距          margin-bottom:*px;
    设置右外边距          margin-right:*px;
块级元素和行级元素的区别: 【面试题】
    块级元素:默认独占整行,是一个完整的盒子,可以设置宽高等。
    行级元素:有多宽占多宽,不是完整的盒子,不可以设置宽高、垂直方向的内外边距等。
注意:可内可外用内边距 
      盒子自动水平居中   margin:0 auto;
ps的操作:
    ctrl+h 隐藏参考线
相关文章
|
8天前
|
人工智能 运维 安全
|
6天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
7天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
629 22
|
6天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。
|
13天前
|
人工智能 JavaScript 测试技术
Qwen3-Coder入门教程|10分钟搞定安装配置
Qwen3-Coder 挑战赛简介:无论你是编程小白还是办公达人,都能通过本教程快速上手 Qwen-Code CLI,利用 AI 轻松实现代码编写、文档处理等任务。内容涵盖 API 配置、CLI 安装及多种实用案例,助你提升效率,体验智能编码的乐趣。
1020 110
人工智能 数据可视化 数据挖掘
224 0