css
文章平均质量分 76
Boale_H
这个作者很懒,什么都没留下…
展开
-
css元素水平垂直居中
/图片与文字垂直居中,但会有少量偏差,再通过。在应用一的基础上,给子项(元素) 添加 vertical-align: middle;//子元素相对父元素水平(主轴)居中。//子元素相对父元素垂直(交叉轴)居中。这种写法,在没有指定子元素宽高的情况下,也能让其在父容器中垂直居中。//给父元素加,弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;原创 2024-06-03 18:53:48 · 971 阅读 · 0 评论 -
CSS弹性盒总结
CSS弹性盒总结弹性盒简介弹性盒的使用创建html文件定义一个弹性盒弹性盒的对齐方式justify-contentalign-items排列方向 flex-directionflex 设置弹性盒子的子元素如何分配空间order 设置弹性盒子的子元素排列顺序flex-wrap 设置弹性盒子的子元素超出父容器时是否换行排列方向 flex-direction与换行(列) flex-flow 缩写形式弹性盒多属性之间的相互配合弹性盒简介弹性盒(Flex Box)是 CSS3 的一种新的布局模式,是一种当页面需原创 2020-06-23 16:07:18 · 828 阅读 · 3 评论 -
css浮动布局以及清除浮动的几种办法
css清除浮动的几种办法清除浮动实际上就是为了触发BFC,因为两个BFG不会互相影响,BFC是一种布局环境9、BFC①什么是BFC?在了解BFC之前,先了解两个个概念:1.box就是盒模型。box是css布局的对象和基本单位,说白了就是咱们网页布局的基石, 简单来说一个页面是由很多box(盒模型)组成的。2.元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。 不同类型的Box,会参与不同的Formatting Context(一个决定如何渲染文档的容器-原创 2020-06-24 15:04:41 · 287 阅读 · 0 评论 -
详细说说CSS中的BFC概念
css中的BFC什么是BFCBFC布局规则如何触发 BFCBFC的应用什么是BFC在了解BFC之前,先了解两个概念:box就是盒模型。box是css布局的对象和基本单位,说白了就是咱们网页布局的基石,简单来说一个页面是由很多box(盒模型)组成的。元素的类型也就是display属性。元素的类型和display属性决定了这个 box的类型。 不同类型的box,会参与不同的Formatting Context(一个决定如何渲染文档的容器-人话就是网页布局的一个范围),因此box内的元素会以不同的方原创 2020-06-24 15:02:58 · 365 阅读 · 1 评论 -
css盒模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。原创 2024-05-15 18:23:52 · 245 阅读 · 0 评论 -
css多种布局方式
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等,我会从文档流,容器,效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。原创 2024-05-14 18:25:49 · 1469 阅读 · 0 评论 -
一个很有意思的css-position定位,sticky
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置(很多官网就是依靠这个来实现部分效果的)。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。原创 2024-05-14 18:14:19 · 374 阅读 · 0 评论 -
css层级图解
css层级图解原创 2024-05-14 17:24:47 · 356 阅读 · 0 评论