CSS
文章平均质量分 81
介绍CSS常用的技巧和知识点。
儒rs
小小的天有大大的梦想,我有属于我的天。
展开
-
【CSS】关于BFC的理解
【CSS】关于BFC的理解一 两个基本概念学习BFC之前,先简单看一下两个基本的概念。Box: CSS 布局的对象和基本单位,⼀个⻚⾯是由很多个 Box 组成的,这个Box就是我们所说的盒模型。Formatting context:块级上下⽂格式化,它是⻚⾯中的⼀块渲染区域,并且有⼀套渲染规则,它决定了其⼦元素将如何定位,以及和其他元素的关系和相互作⽤。二 什么是BFC?BFC是页面中的一块渲染区域,有着自己的渲染规则,可以看作是一个隔离的独立容器,在这个容器中按照一定规则进行物品摆放,并原创 2022-05-09 21:00:58 · 663 阅读 · 0 评论 -
【css】盒子水平垂直居中的实现
【css】盒子水平垂直居中的实现一 HTML模板先给出接下来用于测试的HTML模板 <style> .parent { width: 200px; height: 200px; background-color: skyblue; } .child { width: 100px; height: 100px; background-color: pink; } </style&原创 2022-05-05 10:29:03 · 307 阅读 · 0 评论 -
【CSS】实现三栏布局的方式
【CSS】实现三栏布局的方式三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,三栏布局的具体实现如下:① 利用浮动利用浮动,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值。注意这种方式,中间一栏必须放到最后。.container { overflow: hidden;}.left { float: left; width: 100px; background: tomato;}.right {原创 2022-05-04 11:03:19 · 866 阅读 · 0 评论 -
【CSS】实现两栏布局的方式
【CSS】实现两栏布局的方式一般两栏布局指的是左边一栏宽度固定,右边一栏宽度自适应。两栏布局的具体实现有以下几种方式:① 利用浮动利用浮动,将左边元素宽度设置为200px,并且设置向左浮动。将右边元素的margin-left设置为200px,宽度设置为auto(默认为auto,撑满整个父元素)。.container { height: 100px;}.left { float: left; width: 200px; height: 100px; background:原创 2022-05-04 08:45:38 · 4066 阅读 · 2 评论