关系选择符
eg .list~li 选中后面所有的兄弟
.list+li 选中后面紧挨着的兄弟
属性选择符
1. li[id]{
color:pink;
}
在li中 选择所有带有id属性的li并改变颜色
2. li[id="list"]{
color:pink;
}
在li中 选择所有id=list的li并改变颜色
3. <style>
li[class~="list"]{
color:pink;
}
</style>
<li class="list list111">4</li>
选中元素中 包含list
4. li[class^="list"]{
color:pink;
}
选中属性以list开头的字符串
5. li[class$="list"]{
color:pink;
}
选中属性以list结尾的字符串
6. li[class*="list"]{
color:pink;
}
具有class属性 且属性值包含list
7. li[class|="list"]{
color:pink;
}
拥有class属性 并且值为list 或者以”list-“开头的会被选中
-------------------------------------分割线---------------------------------------------
1.text-shadow :5px 5px 5px red;
第一个值 水平偏移量 第二个值 垂直偏移量 第三个值模糊度 第四个值 颜色
2. text-overflow：ellipsis; //强制文本一行展示
white-space:nowrap;
overflow:hidden;
单行文本溢出隐藏 文本修饰 溢出部分替换为”...“
-------------------------------------分割线---------------------------------------------
border-box 怪异盒模型 element width=width
content-box 标准盒模型 element width=width+padding+border
button为怪异盒模型
把怪异盒模型变成标准和模型
eg button{
width:300px;
height:100px;
padding:20px;
border:10px solid #000；
box-sizing: content-box; //<------------这步
}
-------------------------------------分割线---------------------------------------------
伸缩盒
display:flex;
#parent>div:nth-child(2){
flex:1;
height:200px;
background:chocolate;
}
#parent>div:nth-child(3){
flex:2;
height:200px;
background:pink;
}
// flex 表示自适应 分别占剩余空间的一份及两份 即 三分之一 三分之二
justify-content: flex-start; 向左排列
justify-content: flex-end; 向右排列
justify-content: flex-center; 在中间无缝隙排列
justify-content: space-between; 在元素中间留有空格
justify-content: space-around; 每个元素两边都有空格
flex-direction:row-reverse; 行排序反过来
flex-direction:column; 把行变成列
flex-direction:column-reverse; 列排序反过来
