一、开发中用到的零碎CSS知识点
1.position: 定位
static（静态定位） relative（相对定位） flex（固定定位）absolute（绝对定位）
static:块级元素只能上下定位 行级元素只能左右定位
四种定位中 静态定位在最下层(会保留原始位置 相当于visibility:hidden )
relative:相对其静态定位进行平移 （按照 top left right bottom）
.relative{
backgroud:red;
position:relative;
top:10px;//只有设置完定位才可以生效
right:-10px;
z-index:0 //可以设置图片重叠的层次
}
flex：相对于 浏览器左上角 （不会保留 原始位置 相当于 display：none ）
absolute:相对于 找到的第一个非静态定位的父标签的位置 如未找到则相对于html的左上角（不会保留 原始位置 相当于 display：none ）
3.CSS组合选择符
div p后代选择器：后代选择器用于选取某元素的后代元素。
div>p子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素
div+p相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
div~p后续兄弟选择器：后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
4.命名空间规范
1.布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
2.状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
3.工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
4.组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
5.钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。
5.CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
6.HTML5部分新特性和CSS3部分新特性
6.1新的语义和结构元素
语义元素无实际的效果，但是可以方便结构的理解
如 header、article、nav、footer等
<header>表明这是一个标题，一个网页可以有多个header</header>
<nav>表明这是一个导航栏</nav>
6.2 表单元素 datalist元素
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
6.3 resize、box-sizing、outline-offset
/*resize属性指定一个元素是否应该由用户去调整大小,这个 div 元素由用户调整大小*/
div
{
resize:both;
overflow:auto;
}
/*CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:*/
/*推荐写法*/
* {
box-sizing: border-box;
}
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
/*outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形*/
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
7.内联标签、块级标签
行内标签：a b img em br i span input select
块级标签：div p h1-h6 form ul dl ol table
8.动画transition和animate
transition:all 0.3s linear 0; 所有元素 0.3秒 平均速度 0秒延迟
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候
$('.nav-btn').animate({left:'220px'},500,'linear'); 选择class修改class的left属性
9.开发中遇到的问题
9.1让子标签内容占据父标签的全部空间和通过点击实现切换样式
//子标签占满父标签
.aa{
display: block;
margin: 0;
height: 40px;
}
.checkbox-show{
width: 100%;
height: 100%;
margin: 0;
padding: 7.5px 0;
}
//点击切换状态
.checkbox0 input:checked + label{
font-size: 16px;
font-weight: bold;
font-family: MicrosoftYaHei;
}
.checkbox-hide{
display: none;
}
<div class="checkbox0 aa">
<input type="checkbox" id="1-1" class="checkbox-hide">
<label class="checkbox-show" for="1-1">否</label>
</div>
9.2 伪类(:)和伪元素(::)
<q>一些引用</q>, 他说, <q>比没有好。</q>.
CSS:
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
//结果
«一些引用», 他说, «比没有好。».
9.3 文本域超出显示省略号
- 单行
div{
width:100px;
text-overflow : ellipsis;
white-space:nowrap;
overflow: hidden;
}
- 多行
.mult_line_ellipsis{
width:130px;
text-overflow:ellipsis;//文本溢出显示省略号
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;//最多几行
-webkit-box-orient: vertical;
}
/*问题：在某些webpack打包的项目下会出现-webkit-box-orient: vertical;样式应用不上情况
原因：该样式被autoprefixer插件过滤掉了*/
.mult_line_ellipsis{//多行文本溢出
overflow: hidden;
text-overflow:ellipsis;//文本溢出显示省略号
display: -webkit-box;
-webkit-line-clamp: 3;
/*autoprefixer: off*/
-webkit-box-orient: vertical;
/*autoprefixer: on*/
width:130px;
}
\
