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);