小白初学CSS杂碎知识点总结

CSS杂碎知识点总结

如何把元素变短

1. 定宽
2. 浮动
3. 绝对定位
4. 相对定位
5. 修改元素性质 如变成块元素

清除行内块的边距小空白

一般建议先给父元素字体设置为0 再给相应的子元素设置具体的字体

图片底侧空白缝隙解决办法

原因 行内块元素是和文字的基线对齐的

主要解决办法：

1. 给图片添加 vertical-align :middle/top/bottom
2. 给图片转换为块级元素 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;