布局
文章目录
1.1 盒子布局
border : 简写属性在一个声明设置所有的边框属性
默认值为 not specified
值 | 描述 |
---|---|
dotted | 定义点状边框,在大多数浏览器中呈现为实线 |
dashed | 定义虚线,在大多数浏览器中呈现为实线 |
solid | 定义实线 |
double | 定义双线,双线的宽度等于 border-width 的值 |
padding: 简写属性在一个声明中设置所有内边距属性。
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;所以,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定 负边距值
padding:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
注: 属性中决定边距的元素从上开始顺时针旋转 第一个永远是上内边距 不能取负值。
值 | 描述 |
---|---|
auto | 浏览器计算内边距 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px |
% | 规定基于父元素的宽度的百分比的内边距 |
inherit | 规定应该从父元素继承内边距 |
margin: 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 这四个值。
设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
margin:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
与padding一样的是顺时针排列 不过可以使用负值。
值 | 描述 |
---|---|
auto | 浏览器计算内边距 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px |
% | 规定基于父元素的宽度的百分比的内边距 |
inherit | 规定应该从父元素继承内边距 |
1.2 元素分类
display: 属性规定元素应该生成的框的类型
值 | 描述 |
---|---|
none | 此元素不会被显示 |
block | 此元素将会显示为块级元素,前后会带有换行符 |
inline | 默认,此元素会被显示为内联元素,元素前后没有换行符 |
块级元素是独占一行,可以设置宽和高的
内联元素是不会自动换行,设置宽和高的时候是不起作用的
注: 块级元素和内联元素可以进行相互转换
CSS隐藏元素的方式:display:none;
width:0 ;height:0;
overflow:hidden;
1.3 浮动布局
float: 定义元素在哪个方向浮动,总应用于图像,使文本围绕在图像周围,在CSS中任何元素都可以浮动,浮动的元素会产生一个块级框,如果浮动元素非替换元素,则要指定一个明确的高度,否则会变形。
注: 如果在一行之内没有足够的空间供给浮动元素,则这个元素会跳到下一行,如果下一行空间也不够则会继续向下一行跳,以此类推直至空间足够则不再跳转。
值 | 描述 |
---|---|
left | 元素向左浮动,后面的内容流向对象的左侧 |
right | 元素向右浮动 ,后面的内容流向对象的左侧 |
none | 默认值,元素不浮动,并会显示在其在文本中出现的位置 |
inherit | 规定从父元素继承float属性的值 |
1.4 定位布局
position 规定元素的定位类型,建立元素布局所用的定位机制。
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
. static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
1.5 其他属性
1.5.1 overflow
overflow: 规定当内容溢出元素框时决定以什么样的形式,是对溢出元素内容区的内容进行处理。
值 | 描述 |
---|---|
visible | 默认值,内容不被修剪,会呈现在冤死框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但会添加滚条以便查看其余内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看剩余内容,如果未被修剪就不会出现滚动条 |
1.5.2 zoom
zoom: 是对图片放大和缩小的一个属性,取值为1或者100%的时候是按原比例显示。
代码形式:
效果:
1.6 CSS3弹性盒子
1.6.1 flex-direction
flex-direction: 规定弹性项目的方向,如果元素不是弹性项目,则flex无效。
值 | 描述 |
---|---|
row | 默认值,作为一行,水平地显示弹性项目。 |
row-reverse | 等同行,但方向相反。 |
column | 作为列,垂直的显示弹性项目 |
column-reverse | 等同列,但方向相反。 |
代码形式:
注: 在style当中必须加display:flex 否则flex-direction无效。
1.6.2 flex-wrap
flex-wrap: 规定弹性项目是否应换行,如果元素不是弹性项目,则 flex 属性无效。
值 | 描述 |
---|---|
nowrap | 默认值,规定项目不会换行。 |
wrap | 规定弹性项目在需要时换行。 |
wrap-reverse | 规定弹性项目在需要时以反方向换行。 |
1.6.3 flex-flow
flex-flow: 是flex-direction与flex-wrap这两个属性的简写属性,如果元素不是弹性项目,则 flex 属性无效。
代码形式:
1.6.4 align-items
align-items: 属性为弹性容器内的项目指定默认对齐方式。
值 | 描述 |
---|---|
stretch | 默认值,项目被拉伸已合适的容器。 |
center | 项目位于容器的中央。 |
flex-start | 项目位于容器的开头 |
flex-end | 项目位于容器的末端。 |
baseline | 项目被定义到容器的基线。 |
1.6.5 align-content
align-content: 属性为修改 flex-wrap 属性的行为。与 align-items 相似,但是它不对齐弹性项目,而是对齐弹性线。在多行项目时该属性才能生效。可使用 justify-content 属性将主轴上的项目水平对齐。
值 | 描述 |
---|---|
stretch | 默认值,行拉伸以占据剩余空间。 |
center | 朝着弹性容器的中央对行打包。 |
flex-start | 朝着弹性容器的开头对行打包。 |
flex-end | 朝着弹性容器的结尾对行打包。 |
space-between | 行均匀分布在弹性容器中。 |
space-around | 行均匀分布在弹性容器中,两端各占一半。 |
1.6.6 justify-content
justify-content: 当项目不占用主轴上所有可用空间时,justify-content属性对齐弹性容器的项目。
值 | 描述 |
---|---|
flex-start | 默认值,项目位于容器开头 |
flex-end | 项目位于容器的结尾 |
center | 项目位于容器中央 |
space-between | 项目在行与行之间留有间隔 |
space-around | 项目在行之前、行之间和行之后留有空间 |