css
关注
分享
扫一扫
文章平均质量分 74
css的使用
有蝉
文章有用的话，请点个赞啊
展开
-
高级的transition过度状态
transition: all .3s cubic-bezier(.4, 0, .2, 1);原创 2019-04-10 15:44:06 · 776 阅读 · 0 评论 -
自己的css
html,body { height: 100%; width: 100%; padding: 0; margin: 0;}ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd { margin: 0px; padding: 0px; border: none; list-style: none;}a { t...原创 2019-04-10 17:15:45 · 178 阅读 · 0 评论 -
css实现强制不换行、自动换行、强制换行、超出2行省略号以及word-wrap: break-word和word-break: break-all的区别
1. 强制不换行，并且多行文字溢出显示省略号.ellips{/*超出省略号*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.ellips_line2,.ellips_line3{/*chrome下的私有属性*/ display:-webkit-box; -webkit-box-orie...原创 2019-04-17 12:03:18 · 4903 阅读 · 0 评论 -
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面咱们看一段代码：<!DOCTYPE htm...原创 2019-05-09 10:38:04 · 17379 阅读 · 1 评论 -
原生table:表格table中thead固定，tbody超出高度出现滚动条
首先认识一下表格的table-layout属性tableLayout 属性用来显示表格单元格、行、列的算法规则。tableLayout有如下三个值：autofixedinherit值 描述 auto 默认。列（td，th）宽度由单元格内容设定。 (1) 给td指定的width不一定生效，td的width会自动调整 (2) text-overflo...原创 2019-05-16 09:42:22 · 25239 阅读 · 4 评论 -
CSS颜色代码 颜色值 颜色名字大全
颜色值CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色（根据 256 x 256 x 256 计算）。十六进制值使用三个双位数来编写，并以 # 符号开头。如下：#FFFFFF #DDDD...原创 2019-05-16 13:58:02 · 3178 阅读 · 0 评论 -
CSS样式表特征（包含css优先级计算方式）
1、继承性 大多数CSS属性是可以被继承的2、层叠性 可以为一个元素定义多个样式规则 多个样式规则中，如果样式声明不重复的话，那么则可以层叠为一个样式规则3、优先级 样式定义冲突(重复)时，会按照不同样式的优先级来应用样式 低：浏览器缺省设置(User Agent) ...原创 2019-05-20 16:49:05 · 633 阅读 · 0 评论 -
css选择器详解
基础选择器 一、通用选择器(了解) 1、作用 匹配页面上所有的元素 2、语法 *{样式声明;} 3、注意 效率低，尽量不用 ...原创 2019-05-20 16:57:36 · 994 阅读 · 0 评论 -
css尺寸与边框
尺寸与边框 一、CSS单位 1、尺寸单位 1、% 占据父元素尺寸的占比 2、in 英寸，1in=2.54cm 3、cm 厘米 4、mm 毫米 ...原创 2019-05-20 17:00:06 · 21587 阅读 · 0 评论 -
css font属性和background属性的值简写方式
经常使用到CSS， 其中的font和background属性可以有多个更详细的关联样式属性，但也可以用这两个进行简写， 很多时候我都忘了他们的简写的格式，所以网上找了一些，写下来，方便日后直接参考...1，字体属性主要包括下面几个font-family，font-style，font-variant，font-weight，font-size，fontfont-family（字体...原创 2019-05-21 10:35:07 · 922 阅读 · 0 评论 -
css背景属性详解（背景图片铺满全屏的简写）
一、背景色 属性：background-color 取值： 任意合法颜色值 transparent 注意： 背景颜色会填充到元素的内容区域，内边距区域以及边框区域 二、背景图像 属性：background-image 取值：url(......原创 2019-05-21 10:38:44 · 7876 阅读 · 0 评论 -
css 背景渐变详解
一、什么是渐变 多种颜色变化的一个过程 分类： 1、线性渐变 2、径向渐变 3、重复渐变(线性,径向) 特点： 1、渐变都有填充方向(线性渐变) 2、色标(颜色，位置) 二、语法 属性：backg...原创 2019-05-21 10:40:03 · 10241 阅读 · 0 评论 -
css font属性详解
一、字体属性 1、字体 属性：font-family 取值：value,value 注意： 字体取值中包含特殊符号和中文的话，要用 "" 引起来 ex: font-family:Arial,"microsoft yahei"...原创 2019-05-21 10:44:34 · 23750 阅读 · 0 评论 -
css显示效果详解（display属性和cursor属性详解）
一、显示方式 1、what 每个元素都有自己的显示方式，显示方式决定了元素的显示特点 2、属性 属性：display 取值： 1、none 不显示元素--隐藏 特点：脱离文档...原创 2019-05-21 10:48:50 · 998 阅读 · 0 评论 -
css浮动定位详解（float属性）
本节讲浮动定位 1、什么是定位 元素该出现在网页的哪个位置处 2、定位方式 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位 3、普通流定位 又称为 文档流定...原创 2019-05-21 10:52:29 · 4475 阅读 · 0 评论 -
css定位属性详解（position属性）
一、定位属性 1、定位属性 属性：position 取值： 1、static 默认值，默认定位方式 2、relative 相对定位 3、absolute ...原创 2019-05-21 10:56:54 · 4424 阅读 · 0 评论 -
css 时间线（timeLine）
样子如下图所示：上代码<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta...原创 2019-05-22 11:24:36 · 4705 阅读 · 0 评论 -
css多列(column-count)
1、分隔列 1、作用 将一段文本拆分成几列 2、属性 column-count 取值：数字 2、列间隔 1、作用 每两列之间的间隔距离 2、属性 column-gap 取值：...转载 2019-05-23 10:14:57 · 3473 阅读 · 0 评论 -
css转换（transform）
一、转换简介 1、什么是转换 改变元素在页面中的大小，位置，角度和形状的一种方式 2、转换分类 ①、2D转换 使元素在x轴和y轴上发生变化效果 ②、3D转换 在2D转换基础上，增加 z轴的变化效果 3、转...原创 2019-05-23 20:28:48 · 1773 阅读 · 0 评论 -
sass切换主题时，变量示例
切换主题时，通过改变最外围dom的data-theme属性的值来加载不同的样式 data-theme 有两个值分别为：[data-theme = 'wh-theme']和[data-theme = 'default-theme']<div id="hompage" :data-theme="nowTheme" v-loading="loading"> <r...原创 2019-06-28 15:22:22 · 3140 阅读 · 1 评论 -
字体两边对齐
<div class="item"> <span class="label">姓名</span>： <span class="value">呵呵</span></div><div class="item"> <span class="label">出生日期&l...原创 2019-08-13 14:34:19 · 295 阅读 · 0 评论 -
CSS中 height/width取值为百分比时参考值 以及 padding/margin(内外边距)设置为百分比时的参考值
宽高取值为百分比时的参考值width 是 基于父元素的 width 计算的值height 是基于父元素的 height 计算的值内外边距取值为百分比时的参考值margin(四个方向：top，right，bottom，left )以及padding(四个方向：top，right，bottom，left )设置的值为百分比的时候，是相对于最近的父级块级元素的width。...原创 2019-10-22 10:20:21 · 1608 阅读 · 0 评论 -
box-shadow属性分析
https://www.html.cn/archives/9360/原创 2019-12-10 13:51:36 · 380 阅读 · 0 评论 -
flex实现元素从右上角开始依次往下布局【如果超出父元素高度，则往左边补齐】
要实现点击地图中的marker，依次出现如下图所示的直播视频布局，代码如下<!doctype html><html><head><meta charset="utf-8"><title>flex运用</title></head><style> .flex{ ...原创 2020-02-19 17:09:52 · 2942 阅读 · 0 评论 -
css3中 nth-child 和 nth-of-type 的区别
nth-child 和 nth-of-type的下标都是从1开始的nth-child 和 nth-of-type有什么不同？直接上例子，看代码注释就好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</ti...原创 2020-04-26 09:48:04 · 510 阅读 · 0 评论 -
css背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置background:red url(img/bg.png) np-repeat fixed center top番外：background-position的值①值如果是方位名词，则两个值前后顺序无关，比如right center和center right 效果是等价的； 如果只指定了一个方位名词，另一个值省略，则第二个值默认为center/*background-position...原创 2022-03-13 14:53:46 · 444 阅读 · 0 评论 -
用flex布局的问题
1、如果红色、、蓝色、绿色三个元素的宽度不一致，如何保证中间的蓝色元素一直居中。如下图所示：解决：中间的元素使用绝对定位2、 上图中的红色元素如果没有了，如何保证蓝色的元素居中。如下图所示：解决：给左边一个空元素占位，可设置opacity:03、如何实现中间的元素靠左或靠右解决：① 不改变代码结构 靠左的话，给中间的元素加margin-right:auto 靠右的话，给中间的元素加margin-left:aut...原创 2021-07-26 11:11:09 · 428 阅读 · 0 评论