CSS杂碎知识点总结
如何把元素变短
- 定宽
- 浮动
- 绝对定位
- 相对定位
- 修改元素性质 如变成块元素
清除行内块的边距小空白
一般建议先给父元素字体设置为0 再给相应的子元素设置具体的字体
图片底侧空白缝隙解决办法
原因 行内块元素是和文字的基线对齐的
主要解决办法:
- 给图片添加 vertical-align :middle/top/bottom
- 给图片转换为块级元素 display-block
如何用padding不会撑开盒子
box-sizing:borger-box 盒子就是原来的大小不会变
移动盒子的位置:
定位 盒子的外边距 2d转换移动
translate 不会影响其他元素的位置
对行内标签没有效果
disabled 禁用 一般禁用输入框 按钮 下拉框单选框 复选框
checked 单选或复选框选中某项
selected 下拉框选中某项
readonly 只读,光标只能进入元素但不能输入
文本省略号
单行省略号三个前提
1.定宽
2.文本强制不换行
(white-space:nowrap;
word-break:keep-all)
3.overflow:hidden
当有了前提才能控制省略号(text-overflow:ellipsis)
多行省略号
1.定宽
2.文本强制不换行
3.控制元素是旧的伸缩盒以及盒子中的元素排列方向 控制显示的行数
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
有了前提在加入省略号
让元素垂直居中
position: absolute;
left:0
right:0
top:0
botton:0
margin:auto
轮廓线:
显示到边框外,不占宽高,使用方法同border
outline
轮廓线偏移量(离边框的偏移量) outline-offset
输入框获取焦点时有轮廓线
按钮点击时有轮廓线
:focus
获取焦点时执行的伪类选择器,
inherit 继承 让字体继承他父元素的字体,父元素没字体则在向上找 font-size:inherit
如下代码可以直接撑开父容器
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
border: 1px solid red;