border
对元素设置边框,写法如下:
- 1
- 1
设置border的顺序为border-width、,border-style和border-color,width直接设置宽度,color直接设置颜色,style有多种选择,如solid(实线)、dashed(虚线)等。直接设置border是对元素四边全部设置,也可以用border-top、border-left等设置单独某一边。
overflow
如果内容溢出显示区域的话,相应的设置,写法如下:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
overflow有hidden、scroll、visible、auto等属性,默认是visible。
overflow-wrap有normal和break-word两种,normal为允许内容顶开或溢出指定的容器边界,break-word为内容将在边界内换行。如果需要,单词内部允许断行
flex
让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容。其实我感觉和安卓的weight有点像,下面举个简单的例子,就是左中右三个布局横向展示,左右自适应宽度,中间区域扩充父类。代码如下:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
运行结果如下:
可以看到中间红色设置flex:1之后会自适应扩充父类。