css
jackey李
嗯
展开
-
css元素的显示与隐藏
1. display显示隐藏(none和block)block有显示的意思 隐藏后不占有位置2. visibility显示隐藏(hidden和vibile) 隐藏后继续占有位置3. overflow溢出显示隐藏 hidden auto(在需要的时候添加滚动条)原创 2021-01-13 12:23:14 · 132 阅读 · 0 评论 -
css定位
1.static 静态定位(了解)安装标准流特性摆放位置,没有边偏移,默认定位方式2.relative 相对定位(自恋型)相对于自己本身原来的位置来移动的,原来元素的位置继续占有,定位后的盒子任然以标准流来显示不脱标3.absolute 绝对定位(重点)相对与元素在移动的时候,相对于它的祖先来说的,如果祖先元素没有进行定位或没有定位,则以浏览器为基准定位-脱标4.fixed固定定位(重点)根据浏览器可视窗口定位,不占有原来位置,脱标...原创 2021-01-13 11:55:33 · 75 阅读 · 0 评论 -
css背景属性
定义和用法background 简写属性在一个声明中设置所有的背景属性。background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image1.background-color :背景颜色2.background-position :背景图像的位置3....原创 2021-01-12 20:20:05 · 86 阅读 · 0 评论 -
css文本属性
1.color :颜色2.text-align :文本对齐方式3.text-decoration :文本修饰4.text-transform :文本转换5.text-indent :文本缩进6. line-height :行高7.letter-spacing :字符间距8.word-spacing : 字间距9.text-shadow :文本阴影10.direction :文本方向...原创 2021-01-12 19:20:13 · 115 阅读 · 0 评论 -
css字体属性
简写顺序font-style font-variant font-weight font-size font-familyline-height1. generic-family :通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace2. font-size :属性用于设置字体大小3. font-style :属性指定文本的字体样式4. font-weight 属性设置文本的粗细5.fo...原创 2021-01-12 19:07:29 · 131 阅读 · 0 评论 -
css选择器
1. 选择器优先级:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器2. 选择器优先级权值3. 最大优先级:!important原创 2021-01-12 18:56:08 · 61 阅读 · 0 评论 -
css样式声名进行计算
test { width: calc(100%-80px); 可以使用 + - * / 进行计算}原创 2021-01-09 16:55:39 · 65 阅读 · 0 评论 -
css图片变模糊
test{ filter: blur(5px); 数值越大越模糊}原创 2021-01-09 16:53:25 · 148 阅读 · 0 评论 -
css伪元素选择器
作用:利用css创建新的标签元素,而不需要html元素,简化html结构,创建的元素都是行内元素,在文档树中找不到结构,必须有content属性,权重为1::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 ...原创 2021-01-09 16:36:19 · 411 阅读 · 0 评论 -
css修改鼠标样式
.cursor { cursor: pointer;/* 小手 */ /* default: 小白 默认 pointer: 小手 move: 移动 text: 文本 not-allowed: 禁止 */}原创 2021-01-09 16:07:10 · 135 阅读 · 1 评论 -
css修改表单的轮廓线和防止拖拽文本域
添加以下样式去掉输入框点击显示默认轮廓线input { outline: none;}防止拖拽文本域text{ resize: none; /* horizontal: 左右拖动 vertical: 上下拖动 none: 不能拖动 */}原创 2021-01-09 16:04:15 · 195 阅读 · 0 评论 -
css解决图片底部默认空白缝隙问题
原因:是因为行内块元素会和文字的基线对齐解决办法:.test { vertical-align:middle;top|bottom都行}原创 2021-01-09 15:44:17 · 377 阅读 · 0 评论 -
css清除浮动方法
1.双伪元素清除浮动给父元素添加伪元素样式.clearfix:after,.clearfix:before { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { /*IE6,IE7专有 */ *zoom: 1}2单伪元素清除浮动-推荐使用给父元素添加伪元素样式.clearfix:after { visibility: hidden;原创 2021-01-09 15:26:56 · 63 阅读 · 0 评论 -
css文字溢出省略号显示-多行文本
.test { /* 超出部分隐藏 */ overflow: hidden; /* 用省略号替代超出部分 */ text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制显示的文本行数 */ -webkit-line-clamp: 2; /* 设置伸缩盒对象的子元素排列方式 */ -webkit-box-orient: vertical;}..原创 2021-01-09 15:14:58 · 110 阅读 · 1 评论 -
css文字溢出省略号显示-单行文本
/* 强制一行内显示文本 */white-space: normal;/* 超出部分隐藏 */overflow: hidden;/* 用省略号替代超出部分 */text-overflow: ellipsis;原创 2021-01-09 15:09:15 · 71 阅读 · 0 评论