(1)table,不常用
可以使页面更加美观,但不如DIV方便好用。
(2)border(边框)
边框有多个属性分别为border-style(边框样式),border-width(边框宽度),border-color(边框颜色),border-radius(边框圆角),具体用法为div { width: 100px; height: 100px; border: solid 1px aqua; border-radius: 10px; }
其中border可以简写,将样式,宽度,颜色写在一起,
border-style的属性值有solid(直线),dashed(虚线),dotted(点线),none(无)
border-radius的属性值规范则是"数字加单位",设定四个角的圆滑程度
注:border可同时设置四个边框,也可单独设置,即上右下左的顺序,例:border-style: solid solid solid solid,对应的就是上右下左四条边框,当只有一个属性的时候设置的是四个边框,两个的时候分别对应上右,下左自动和对面的对应,以此类推
具体思维导图如下
(3)outline(轮廓)
outline标签的属性与border大致相同,即
outline-color(边框颜色)
outline-style(边框样式)
outline-width(边框宽度)
none(无)
(4)margin/padding(内外边距)
可用这两个属性配合top,right,bottom,left来设置内外边距,进行网页布局
(5)display(显示方式)
用于进行各种元素之间的变换和弹性布局,即
block(块级元素)
inline(行内元素)
inline-block(行内块元素)
flex(弹性盒子)
常用于改变各种元素的属性来方便布局
(5)overflow(溢出)
常用于对超出部分的隐藏和归纳,即
hidden(内容会被修建,并且其余内容不可见)可用此来进行一些小的交互效果
scroll(内容会被修建,但是浏览器会显示滚动条以便查看其余的内容)