css 随笔

1.父元素display:flex布局下的子元素宽度无效

因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置）

width: 120px;
flex-shrink: 0;

2.

.c1 {
color: #ff0000;
}
.c2 {
font-style: italic;
}
.c1.c2 {    //类名同时包含c1,c2两个类名才生效
text-decoration: underline;
font-size: 50px;
}
<p class="c1">这里是红色</p>
<p class="c2">这里是斜体</p>
<p class="c1 c2">这里是红色、斜体、下划线</p>  

p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
 .a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝；

 

3.

• margin:10px 5px 15px 20px;
  • 上边距是 10px
  • 右边距是 5px
  • 下边距是 15px
  • 左边距是 20px
• margin:10px 5px 15px;
  • 上边距是 10px
  • 右边距和左边距是 5px
  • 下边距是 15px
• margin:10px 5px;
  • 上边距和下边距是 10px
  • 右边距和左边距是 5px
• margin:10px;
  • 所有四个边距都是 10px

 

4.width: calc(100% - 40px);