首页
学习
活动
专区
工具
TVP
发布

HTML盒子水平垂直居中

以前我们使定位盒子水平/垂直居中可能是这样 .father{ width:300px; height:200px; border...absolute; left:50%; margin-left: -35px; } 父元素设置相对定位,子元素绝对定位,左边父元素50%...效果如下 图片 可见盒子还是向右边偏了一点,这是由于子盒子自身宽度原因,我们只需使子盒子在向左移动自身宽度一半,即可实现水平居中 因此我们可能会这样做 margin-left: -35px;...子盒子原宽度70px 向左移动自身宽度一半确实能解决问题 图片 但这个宽度是我们自己算出来,如果盒子宽度不能整除怎么办?...在前面一篇文章提到过transform属性 transform:translate(x,y)如果单位为像素,则相对于父元素移动,如果单位为百分比则相对于自身移动 有了这个特性我们这里就很好解决了,将原来margin-left

3.3K10
您找到你想要的搜索结果了吗?
是的
没有找到

css盒子布局,浮动布局以及显影与简单动画

08.05自我总结 一.盒子布局 1.盒子布局组成 margin border padding content 2.margin margin是外边距,控制盒子显示位置相对于他上一级 left、top...padding与边框之间距离 5.盒子阴影 box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色 6.重点 盒模型:margin、padding协调操作,能用padding尽量用...padding,再考虑用margin 父子级顶端产生距离,建议使用padding margin、padding参数auto自动获取留白区域适用根据留白地方居中使用 二.浮动布局 1.浮动布局 float...:连接 after元素出现后 before元素出现前 3.清浮动 父级清浮动,就是在自己宽度是否确定下,都能保证父级高度刚刚好包裹子集 需要左右排列block采用浮动布局,且父级一定要清浮动 方法一...: .浮动标签:after { content: ''; display: block; clear: both; } 方法二: .浮动标签下一个要显示标签(会受到他浮动影响

82720

CSS布局(二) 盒子模型属性

盒子模型属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   ...这样,使页面结构更具有健壮性,最后一个元素移除或位置调换,都不会破坏原生布局 2.auto   只有width/height和margin可以设置auto。...line-height和垂直对齐vertical-align来影响,垂直margin并不会影响它们,所以不会影响垂直布局。...3、BFC造成margin看似无效   左侧元素使用浮动,右侧元素使用overflow-hidden实现两栏自适应布局时,右侧元素margin-left值只有足够大,才能看到效果。...  盒子阴影box-shadow可以为元素设置阴影 box-shadow: none(默认) box-shadow: (h-shadow v-shadow blur spread color inset

1.8K70

CSS布局(一) 盒子模型基础

怪异盒子模型 从下图可以看到 ie 盒子模型范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同是:ie 盒子模型 content 部分包含了 border...假如不加 doctype 声明,那么各个浏览器会根据自己行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你盒子,而 ff 会采用标准 w3c 盒子模型解释你盒子,所以网页在不同浏览器中就显示不一样了...doctype html>   你用盒子模型是标准w3c盒子模型   <script language="javascript" src="jquery.min.js..."标准w3c":"ie";     document.write("您页面目前支持:"+sbox+"盒子模型");    ...在CSS中,html标签元素大体被分为三种不同类型:块级元素、行级元素和行内块元素。

99150

弹性盒子(display: flex)布局超全讲解|Flex 布局教程

---什么是弹性布局?弹性布局(Flex布局)是一种现代CSS布局方式,通过使用display: flex属性来创建一个弹性容器,并在其中使用灵活盒子模型来进行元素排列和定位。弹性布局特点?...弹性布局具有以下特点:主轴与交叉轴:弹性容器具有主轴(main axis)和交叉轴(cross axis)。默认情况下,主轴是水平方向,交叉轴是垂直方向。...弹性容器:通过将父元素display属性设置为flex或inline-flex来创建弹性容器。子元素弹性项目:弹性容器中每个子元素都成为弹性项目。...换行与自动调整:可控制弹性项目是否换行,并且具备自动调整元素大小能力。弹性布局简化了网页布局开发过程,提供了更灵活、响应式布局方式。它适用于各种屏幕尺寸和设备类型,并能够快速适应不同布局需求。...具体对齐方式与交叉轴方向有关,下面假设交叉轴从上到下。flex-start:交叉轴起点对齐。flex-end:交叉轴终点对齐。center:交叉轴中点对齐。

46220

HTML布局基本要点

image.png 如果要掌握、运用好Position、Float属性必须要对HTML两个基本点有清晰了解。...盒子模型(box model) HTML普通流(normal flow) 盒子模型 在HTML中元素盒子模型分为两种:块状元素、行内元素,请注意这里块状元素(Block)和行内元素(Inline)...我们直观上看两种盒子模型区别 块状(Block)类型元素可以设置width、height属性,而行内(Inline)类型设置无效。...HTML普通流 浏览器在读取HTML源代码时候是根据元素在代码出现顺序读取,最终元素呈现方式是依据元素盒子模型来决定。行内元素是从左到右,块状元素是从上到下。...如果你不改变元素默认样式前提下,元素在HTML普通流中会“占用”一个位置,而“占用”位置大小、位置则是由元素盒子模型来决定。

2K70

HTMLHTML5 元素布局使用

HTML 标签 定义和用法 可定义文档中分区或节(division/section)。 标签可以把文档分割为独立、不同部分。它可以用作严格组织工具,并且不使用任何格式与其关联。...可以通过 class 或 id 应用额外样式。 不必为每一个 都加上类或 id,虽然这样做也有一定好处。...这两者主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独唯一元素。...div元素布局 完整代码 规定各个模块样式,DIV可不用加 width代表宽度,height代表高度 ,background代表背景颜色, float代表排序方式, clear 清除左右排序让footing...content_menu">内容菜单 内容主体 底部 布局样式

3.8K20

HTML|制作表单、布局

问题描述 什么是html表单? 如何在html网页制作实现选择框或是下拉菜单? 如何实现html布局?...解决方案 在我们日常工作和学习中,我们经常会需要使用某些网站功能,这时就会面临需要注册该网站账号。...而在注册时候,会让我们填写一个个人信息表,这样一个网页就可以用html表格、表单、布局等来完成制作。 1 html布局 ? 图1 div元素使用示例 2 html表单 ?...图2.2 标签示例 结语 在使用html进行一个注册表编写时,要注意表单标签使用,标签是最重要和基本标签,定义类型必须包含在标签之内。...由于示例是在表格中进行表单编写,格外注意表格中行列标签。html布局时,可以加入颜色值。 ?

3.7K10

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

1K30

HTML中CSS浮动布局特点

※ 相当于从地面飘到了空中,如果一个元素按照正常标准流来显示,会在html中所属位置上占位,后面的元素会紧跟着它,但是浮动脱离了标准流,以后我们在看到浮动元素之后,不能以正常标准流里进行判断。...浮动元素比标准流高半个级别,可以覆盖标准流中元素。 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动。 浮动元素会受到上面元素边界影响。...浮动元素有特殊显示效果: ※ 一行可以显示多个,不管元素是行内元素还是块级元素,设置浮动后,将来显示时候会在同一行内显示,除非一行放不下了,才会在第二行依次显示。...※ 可以设置宽高 注意点 浮动元素不能通过 text-align:center 或者 margin:0 auto 让浮动元素本身水平居中。

2.7K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券