ladream的博客

清除浮动的四种方式及其原理理解

转载文章【antd】使Pagination分页组件居中展示

文章目录什么是Less注释变量嵌套@arguments获取参数转义(避免编译)运算Mixins混合继承什么是LessLess是一门向后兼容的 CSS 扩展语言。它为css新增许多能，如：变量、函数、作用域、混合、嵌套等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，less可以让我们写更少的代码做更多的事情。它需要编译为css再被引入：lessc xxx.less yyy.css注释在less中，有两种注释/*这是会暴露出去的注释 */// 这是不会暴露出去的注释变量

一、部分实现效果1.管理员->管理员管理2.管理员->电影管理3.管理员->订单管理二、使用技术html+css使用jquery和ajax实现前后端交互三、主要代码1. jq+ajax提交表单数据$('#new_hall_form').on('submit', e => { //对表单数据序列化 e.preventDefault() const formData = $('#new_hall_form').serializeArray() v

容器：采用Flex布局的元素项目：容器的所有子元素主轴：水平轴交叉轴：纵轴一、容器的属性flex-directionflex-wrapflex-flow（前两个属性合起来一起写）justify-contentalign-itemsalign-content1、flex-direction：决定主轴的方向（即项目的排列方向）。值：column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。row（默认值）：主轴为水平方向，起点在左端.

一、盒子垂直居中1、display:flex;Flex意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。（行内也可以，inline-block）。采用Flex布局的元素，称为 ”容器”。它的所有子元素成为容器成员，称为 ”项目”。容器默认存在两根轴：水平的主轴 和 垂直的交叉轴这里用到的是两个属性：（1）justify-content: center：-------定义了项目在主轴上的对齐方式。（2）align-items:center：-------

伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。伪类使用单冒号 “:” ; 伪元素使用双冒号 “::”一、伪类1、锚点关于锚点< a>有五个伪类，：link、:hover、:active、:focus、:visiteda:link{background-color:pink;}/品红，未访问/a:visited{color:orange;}/字..

浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动元素根本不存在一样。但是,框的文本内容、背景色、边框会受到浮动元素的影响，会移动以留出空间。float的本意：让文字像流水一样环绕着浮动元素。例子：盒子浮动边框浮动两大特性：（包裹性和高度欺骗性）（1）包裹性例子： <div style="border:4px solid red;"> <img src="photo.

1.浮动机制：inline元素设置height和width是无效的，但是如果设置了float为left 或right，就自动变成了block块级元素，高宽的设置就生效了对普通元素（block,inline-block），它感受不到浮动元素的存在、可能会与浮动元素发生重合对内联元素和文字，可以感知到浮动元素的存在，会形成环绕效果对其他浮动元素： 浮动元素可以感知到浮动元素，高度不一样可能会...

1.选择器权重权值权重最大： ！important1000： 行间样式100： id选择器10: class选择器 、属性选择器（a[href]） 、 伪类（:first-child ，:link、:vistited，:hover:，:active，:focus，:lang，:right，:left，:first）1：标签选择器、伪元素（:after、:before）0：通配符（*）2.display常见的值，包括的标签（1）none：不显示（2）block:块元素如：h1、p、d

1.bfc的定义（block formatting context）直译为“块级格式化上下文”目的：形成一个完全独立的空间，使空间内的元素不会受到外界元素的影响。2.如何触发bfc（1）float不为none（2）position不是relative或static（3）display的属性不能是inine-block、table-cell、flex、table-caption或inli...

1.display:table;此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符。2.display:table-cell;此元素会作为一个表格单元格显示（类似 < td > 和 < th >）display:table和display:table-cell实现单行，多行文本垂直居中3.placeholder定义：该属性可描...

一、介绍::before和::after是伪元素，（css3中为了与伪类做区别，伪元素采用双冒号的写法；但因为兼容性的问题，所以现在大部分还是统一的单冒号，比如:first-line、:first-letter、:before、:after等，但新的在CSS3中引入的伪元素就不允许用单冒号的写法。）“:before” 伪元素可以在元素的内容前面插入新内容。“:after” 伪元素可以在元素的...

伪类与伪元素的区别区别：它们是否创造了新元素。伪元素：不存在于DOM文档中，伪元素用于创建一些不在文档树中的元素，并为其添加样式。它是虚拟的元素，是创造新元素，代表某个元素的子元素，则个子元素逻辑上存在，但却并不存在于文档树中。例如：我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。伪元素选择符：伪类：存在于DOM文档中，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化

1.< pre>< /pre>保留空格2.< q>< /q> 引用，包含的文本带双引号3.< abbr title=“文本的全称”>文本的缩写< /abbr>4.< bdo dir=“rtl”>< /bdo> 文本从右向左显示5.< a href=“url” target="_blank"> < /a>6.< caption>< /caption> 定义表