前言 作为前端开发人员或者学生，你一定知道BFC这个关键词，但是你是否具体了解过什么是BFC?BFC有什么用？BFC怎么用些问题呢?本文就来总结一下相关的知识点，希望对阅读到的小伙伴在面试、学习、开发中有所帮助。 正文 1、什么是BFC 首先来看下下面的代码段1： <style>
一、使用 clear 解决 1.clear 简介： 给一块元素设置 clear 属性后，将消除它上面元素因浮动对它造成的影响。（可选值：left，right，both） For example： <style> .box1{ width: 200px;
jquery使用.css()添加样式不起作用 如果你像下面这样用jquery给一个元素标签设置样式，它不起作用。 $("#test").css("width", "100px !important"); 那是为什么呢？ 因为里面有‘!important’，jquery css不识别它。因为已经直接应用到某个元素上了，所以就不需要加上important了。 $('#t
变形就是指通过 css 来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 translateX() 沿着由方向平移 translateY() 沿着 y 轴方向平移 translateZ() 沿着 z 轴方向平移平移元素 百分比是相对于自身计算的 几种水平垂直双方向居中的
这次要介绍的是块标签，行标签、行块标签还有标签的互换，先来看看思维导图： 001：块标签 来看看块标签的大致结构框架： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
1.类型选择器 类型选择器用于选择特定类型的元素，如 p 或者 h1 元素 只需要写出元素名即可，也叫元素选择器 <html> <head> <style> div { width: 100px; height: 100px; background-color: red;
BFC: block formatting context <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
.scss后缀文件 .header{ font-size: 12px; .main:active{ background-color: #f40;; } // &代表外层父级 &:hover{ color: #000; } } //定义变量,一定义要写在执行之前 $text-color:#444; //使用变量 color:$text-color; //lighten颜色变浅 color:lighte
当我们在给子元素设置margin-top后会出现一个现象，子元素与父元素之间没有出现间距，反而是父元素和其他元素之间出现了间距，像是margin-top的效果作用在父元素上一样。这种现象就是margin-top穿透现象。 如下所示： HTML代码 <div class="father"> <div class="son">
有些在html布局中，为了更加灵活，会使用没有设置高度的盒子，让子盒子来控制父盒子的高度，在灵活方便的同时也会有可能出现父盒子边框塌陷问题。 1 <title>盒子模型</title> 2 <style> 3 #man{ 4 width: 300px; 5 6
<style> div{width:100px;height:100px;background:blue;transition: 0.5s;//0.5秒完成}div:hover{width:600px;}</style><body> <div></div><p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> </body>
致谢 box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。 如果你创造了一个 <div> 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为： 10
1.上下margin重叠问题 HTML: <div class="box1"></div> <div class="box2"></div> CSS: * { margin: 0; padding: 0; } .box1 { height: 100px; width: 100px; background-color: pink;
CSS常用布局 1⃣️流体布局 网页缩小和放大时网页布局也会随着浏览器的大小而改变 优点：页面布局的宽度都是百分数，页面的放大缩小都不会出现滚动条 缺点，窗口宽度较小时，行会变得很窄，不方便阅读其中的内容 2⃣️圣杯布局 三列布局；中间主体内容前置，且高度自适应；两边内容定宽 优点：重要的内
## 概念 将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。例如：9宫格 css代码： .box{ width: 300px; height: 300px; border: 1px solid #000; /* 网格布局 */
一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可
收到一个师弟的问题，说同样的代码，有的有问题，有的没有问题。不知道为什么 问题是这样子的 左边的不会，但右边的会。但代码是一样的 这个问题，早在我当时初学的时候也发现了。不过当时没有找到很好的解决办法。 对此，我先是查看了结构和样式。 发现的盒子，就比立即抢购这个元素多
方法五 给父标签tent-alian:center；line-height：父标签的高；给子标签display：inline-block;vertical-align：middle；给予标签旁边添加空span 方法六 <style> .small { width: 100px; height: 100px; background-color: #f00;
<style>. 方法四 box4{ width: 300px; height: 300px; border: 2px solid green; /* background-color: pink; */ /* margin: 100px auto; */ /
1. 方案一 给父元素设置font-size:0;然后给子元素重新设置font-size style="font-size:0;" <style> <!--父元素设置font-size:0;--> .bg{ font-size: 0; } .box1{ height: 100px; width: 100px;
一、css3的三角形画法（一）、原理通过对于边框的设置，来画出三角形。 width: 50px; height: 50px; border-bottom: 50px red solid; border-top: 50px green solid; border-left: 50px yellow solid; border-right: 50px blue solid; 当设置盒子的宽高为0时，就是由四个三角形维成的一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } body{ fo
今天学习了css常用的选择器、css的选择器 （width:；宽度 height:；高度 background-color:；背景颜色） (1)标签选择器-通过标签名查找 (2)id选择器-唯一标识 (3)类选择器-同时选择多个 ， (4)通配符选择器 一般用来 *{margin:0;padding:0;} 自己做了相对的练习：<style type="text
<!DOCTYPE html> <html> <htad> <meta charset="UTF-8"> <title>线性渐变</title> </htad> <style type="text/css"> .rainbow-randial-gradient { width:
（1）当然块级元素是可以直接设置高度和宽度的 块级元素：块级大多为结构性标记 div、h1~h6、ul、ol、dl、form、table、p、hr、pre、address、center、blockquote、marquee 行内元素：行内大多为描述性标记 span、a、b、strong、i、em、img 、input、textar
