首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    html三大盒子模型梳理

    标准盒(W3C) html所有元素默认是标准盒。会被内间距和边框撑大。 宽度计算规则:设置的宽度+内间距+边框+外间距 怪异盒(IE盒) 怪异盒子,不会被内间距,边框撑大。...盒子内的内容也只会在减掉内间距+边框的剩余空间绘制。...转化为怪异盒: box-sizing:border-box 宽度计算规则:设置的宽度+外间距 弹性盒(flex) 弹性盒子是 CSS3 的一种新的布局模式。ie不支持。...父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。...转换为弹性盒子:display:flex 可选后续属性: flex-direction:设置主轴的方向 flex-wrap:设置子元素是否换行 flex-flow:复合属性,相当于同时设置了 flex-direction

    1.1K30

    html外边距如何归零,盒子模型的overflow属性,border属性,padding与margin属性

    html外边距如何归零,盒子模型的overflow属性,border属性,padding与margin属性...具体图下图所示: ㈠概念与组成 1.页面上区域,图片,导航,列表,段落都可以是盒子。 2.页面中的所有元素都可以看成一个盒子,占据着一定的页面空间。...★用margin属性来进行盒子的设定的时候注意两点: ⑴div标签做盒子的时候,有一个特点,每一个div标签做出来的盒子,有一个换行的效果,就是它会独占一行。 ⑵显示结果的这个上下边距是什么样的?...text-align:center; ⑵div水平居中:margin:0 auto;浏览器自动计算 其中,0设置的是上侧和下侧的值,可以任意;auto设置的是左侧和右侧的取值,设定为auto ★案例示意: ⑴首先是HTML...如图所示: 以上就是盒子模型相关知识,希望可以有所帮助。

    1.3K20

    弹性布局(伸缩布局)

    } 图片 2.justify-content:设置水平对齐) | 值|描述 | |—|—| | flex-start | 子元素左对齐 | flex-end|子元素右对齐(不改变盒子顺序...) center|水平居中 space-between|左右盒子贴近父盒子,中间的平均分布空白间距 space-around|每个盒子平均分配父元素留下的左右间距 space-between左右盒子贴近父盒子...,中间的平均分布空白间距 图片 space-around每个盒子平均分配父元素留下的左右间距 图片 2.align-items:调整侧轴对齐(设置单行垂直对齐) | 值 |描述 | |—|—|...|—|—| stretch|使子元素的高度拉伸填充父容器(在子元素不指定高度的情况) center|垂直居中 flex-start|顶部对齐 flex-end|底部对齐 space-between|左右盒子贴近父盒子...,中间的平均分布空白间距 space-around|每个盒子平均分配父元素留下的左右间距 center 图片 space-around 图片 子元素属性 order:设置元素排列顺序,值越小排在最前

    2.5K20

    【CSS】课程网站头部制作 ① ( 头部区域测量 | 头部盒子标签结构 | 整体页面背景颜色设置 | LOGO 盒子设置 | 切片工具切图 | LOGO 相关 HTML 结构及 CSS 样式编写 )

    文章目录 一、 课程网站头部区域测量 1、 整体的头部盒子测量 2、 头部盒子标签结构 3、 整体页面背景颜色设置 二、 LOGO 盒子设置 1、 LOGO 图片切图 2、 HTML 结构及 CSS...样式编写 一、 课程网站头部区域测量 ---- 1、 整体的头部盒子测量 在 网页切图 的头部区域 的上下位置 , 拉两条上下辅助线 , 左右两侧的辅助线是 版心 的边界 ; 使用 " 矩形选框工具...高度 42 像素 */ height: 42px; /* 设置颜色 方便调试 */ background-color: pink; /* 上下设置 20 像素外边距 , 左右自动居中 */...点击要切割的切片 ; 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " , 选择要导出的格式 , 点击 " 存储 " 按钮 ; 选择导出当前切片 ; 最终导出的结果 : 2、 HTML...结构及 CSS 样式编写 HTML 头部模块结构如下 : <!

    1.3K20

    【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

    内边距 ; 设置 2 个值 : 设置 上下、左右 内边距 ; 设置 3 个值 : 设置 上、左右、下 内边距 ; 设置 4 个值 : 设置 上、右、下、左 内边距 ; 2、代码示例 - 设置 1 个值...padding 属性设置 1 个值 : 设置 上下左右 内边距 ; 代码示例 : <!...进入调试模式 ; 使用 选择工具 , 将鼠标移动到 盒子模型 上方 , 会显示如下内容 ; 淡蓝色 是 盒子内容 的颜色 ; 青色 是 盒子内边距 的颜色 ; 右侧的 图 , 可以很明确的看出..., 盒子内容 , 内边距 , 边框 , 外边距 的轮廓 ; 3、代码示例 - 设置 2 个值 padding 属性设置 2 个值 : 设置 上下、左右 内边距 ; 代码示例 : <!...: 设置 上、左右、下 内边距 ; 代码示例 : <!

    89720

    【海贼王航海日志:前端技术探索】CSS你了解多少?(三)

    3 -> 盒模型 每一个HTML元素就相当于是一个矩形的 "盒子"。 这个盒子由这几个部分构成: 边框border。 内容content。 内边距padding。 外边距margin。...注意: 整个盒子的大小从原来的300 * 200 => 310 * 205。说明内边距也会影响到盒子大小(撑大盒子)。 使用box-sizing: border-box属性也可以使内边距不再撑大盒子。...margin: 10px;四个方向都设置 margin: 10px 20px;上下为 10,左右 20 margin: 10px 20px 30px;上 10,左右 20,下 30...意思为"弹性盒子"。 任何一个html元素,都可以指定为display:flex完成弹性布局。 flex布局的本质是给父盒子添加display:flex属性,来控制子盒子的位置和排列方式。...space-between 行均匀分布在弹性容器中。 space-around 行均匀分布在弹性容器中,两端各占一半。 取值和justify-content差不多。

    7910
    领券