css笔记

text-shadow

语法：text-shadow: h-shadow v-shadow blur color;

HTML标签分类

块状元素

块状元素特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

设置display:block就是将元素显示为块级元素。

行内元素

行内元素：<span>、<label>、<strong>等典型的行内元素，也可以将块状元素通过设置css样式display:inline将元素设置为行内元素。
行内元素特点：

1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高及顶部和底部边距不可设置；
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，通过display:inline-block将元素设置为内联块状元素。如<img>、<input>标签。

inline-block元素特点：

1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置

css – 向右浮动

内联元素

设置父元素text-align: right;即可
并且对内联块级元素也适用。

法1-使用position属性

position: absolute,
right: 0,

缺点：不能使用中心对齐外盒

法2-使用margin-left

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}

<div class="parent">
  <div class="child1">left</div>
  <div class="child2">right</div>  
</div>

其他方法可参考本文

设置超出部分隐藏

over-flow: hidden;
//取消
over-flow: visible;

flexbox:如何使元素独占一行

父元素，利用flex-wrap设置超出换行

display: flex;
flex-direction: row;
flex-wrap: wrap;

子元素，设置宽度，可以使用width属性，这里使用flex-basis。

flex-basis: 100%;

参考资料：
flex布局中如何使最后一个元素独占一行？
html标签元素分类