风火一回，一生不毁

样式优先级CSS样式分为内联样式和外部样式，一般情况下：内联样式的优先级大于外部样式。即style样式>id选择器>class选择器>元素选择器。例如：.on{ width:20px; height:20px; line-height:20px; font-weight:bold; background-color: #BCC029;}.person-num&...

页面左右布局例如:现有一个页面，需要左侧200px,右侧自适应页面宽度。页面代码如下：import React, { Component } from 'react';import styles from './CssLayout.less';export default class CssLayout extends Component { constructor(prop...

antd多选下拉框一行展示我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。 .ant-select-selection--multiple { ...

1.多行文本省略失效说明：使用多行文本显示省略号样式时，-webkit-box-orient: vertical;会被浏览器自动过滤。解决方案用注释打开autoprefixer属性，然后关闭。如下：.line-ellipsis-2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ...

CSS画三角形1.实心三角形.triangle { margin: 20px auto; width: 0; height: 0; border-width: 30px; border-style: solid; border-color:...

Flex布局常用的布局方式有3种：display:css内联和块级布局。position:绝对、相对定位布局。float:浮动布局。传统的布局方式存在一个很明显的问题，那就是垂直居中不易实现。flex:弹性盒子布局，可以更好的实现响应式布局。Flex的使用Flex容器任何容器都可以flex布局。Flex容器的所有子元素也自动成为容器的成员，成为Flex项目。Flex容器默认存在2根轴线（水平

1.水平居中如果只是单行包含文本内容的组件可以使用text-align:center;通过文本内容居中影响元素居中。适用于内联元素。注意：text-aligin:center需设置在父容器上，子元素必须包含文本内容，且是内联元素。例如:<div style="text-align:center"> <span>测试<span>&...

filter属性允许您向文本和图像添加更多的样式效果，可替代部分ps的效果。注释：1.若需要使用 filter 属性，请始终指定元素的宽度。           2.除非 background-color 属性被设置为 transparent，否则某些 Filter 属性将无法工作！属性参数描述例子alphaopacityfi

word-spacing:增加或减少单词间的间距(默认值：normal即0，可填写具体数字)letter-spacing：增加或减少字符间的间距（默认值：normal即0，可填写具体数字）word-break ：规定自动换行的处理方法可用值：          normal:使用浏览器默认换行规则（默认值）          break-all:允许单词内换行   

盒子模式=外边距+边框+内边距+组件大小box-shadow（火狐浏览器中常会添加该属性）box-shadow 属性向框添加一个或多个阴影。默认值：none提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！语法box-shadow: h-shadow v-shadow blur spread color inset;注释

今天做一个浮动效果，使用了float始终得不到效果，后来反复修改，发觉margin和height也能影响浮动效果。我所需效果如下：当代码为下时： 消息分割: 映射: 默认值:

当文本只有一行时，其溢出部分用省略号表示很简单，可以直接使用css样式控制。p{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}但多行文本溢出时用省略号表示却没有现成的样式了，网上提供了一种方式，用省略号插入溢出的位置，覆盖掉尾部内容，但是这种方式治标不治本。它也是通过css来控制显示的，下面先看一

伪类的使用常见在连接的颜色改变等。下面简单介绍一下。a:link{},链接未访问前的样式设置a:visited{},链接已被访问后的样式设置a:hover{},鼠标移动到链接上时的样式设置a:active{},点击链接时的样式设置a:focus{},链接获取焦点时的样式设置注意：     a:hover 必须被置于 a:link 和 a:visited 之后

一、布局属性width描述:设置对象的宽度语法:width:value; height描述:设置对象的高度语法:height:value;说明：只有块级对象、HTML中存在width、height属性的内联对象、图片有width和height属性。 overflow描述:溢出的处理语法:overflow:visible|hidden|scroll|a

在设计中宽度我们通常可以进行控制，但高度却没有明确的控制，一般元素的高度都是由子元素来控制的。即子元素的高度和决定了父元素的高度。当然手动设置父元素的指定高度也是可以的。问题：百分比控制的父元素有时不能够被撑开，子元素都几百px了，但父元素高度仍然为0。原因：浮动造成了容器不能正常计算元素高度。解决方案：    方案一：为父元素添加样式：overflow：hidden；该样式相当于

1.border-collapse属性   该属性表示折叠边框。有3个默认值：separate | collapse|

CSS[Cascading Style Sheets]（层叠样式表）：可快速维护页面元素(如文本、图像、链接等)的外观(如字体、字号、颜色等)。CSS版本号:2.0 W3C建议尽量使用CSS样式取代HTML标记属性。（即交集部分用CSS样式，特殊部分使用自己独有的） CSS在HTML中的应用方式 1.外部样式表：链接到外部的CSS文件（先创建一个CSS文件，再链接到该文件）