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 隐藏参考线
相关文章
|
前端开发
HTML盒子模型
一.盒子模型的介绍 1.盒子的概念 (1)页面中的每一个标签,都可看做是一个 “盒子” ,通过盒子的视角更方便的进行布局 (2) 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子 2. 盒子模型 ➢ CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型 3. 记忆:可以联想现实中的包装盒
245 0
HTML盒子模型
|
3天前
|
存储 人工智能 安全
AI 越智能,数据越危险?
阿里云提供AI全栈安全能力,为客户构建全链路数据保护体系,让企业敢用、能用、放心用
|
6天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
5天前
|
数据采集 人工智能 自然语言处理
3分钟采集134篇AI文章!深度解析如何通过云无影AgentBay实现25倍并发 + LlamaIndex智能推荐
结合阿里云无影 AgentBay 云端并发采集与 LlamaIndex 智能分析,3分钟高效抓取134篇 AI Agent 文章,实现 AI 推荐、智能问答与知识沉淀,打造从数据获取到价值提炼的完整闭环。
400 93
|
6天前
|
SQL 人工智能 自然语言处理
Geo优化SOP标准化:于磊老师的“人性化Geo”体系如何助力企业获客提效46%
随着生成式AI的普及,Geo优化(Generative Engine Optimization)已成为企业获客的新战场。然而,缺乏标准化流程(Geo优化sop)导致优化效果参差不齐。本文将深入探讨Geo专家于磊老师提出的“人性化Geo”优化体系,并展示Geo优化sop标准化如何帮助企业实现获客效率提升46%的惊人效果,为企业在AI时代构建稳定的流量护城河。
399 156
Geo优化SOP标准化:于磊老师的“人性化Geo”体系如何助力企业获客提效46%
|
6天前
|
数据采集 缓存 数据可视化
Android 无侵入式数据采集:从手动埋点到字节码插桩的演进之路
本文深入探讨Android无侵入式埋点技术,通过AOP与字节码插桩(如ASM)实现数据采集自动化,彻底解耦业务代码与埋点逻辑。涵盖页面浏览、点击事件自动追踪及注解驱动的半自动化方案,提升数据质量与研发效率,助力团队迈向高效、稳定的智能化埋点体系。(238字)
288 158