元素的展示类型:block/inline/inline-block/none;
块级元素:会占据一整行,可以设置宽高。Display:block;
行级元素:不会占据一整行,不可以设置宽高,根据内容的文字来占据空间的大小。Display:inline;
行块元素:不会占据一整行,但是可以设置宽高。Display:inline-block;
盒子常用的属性:
Width
Height
Padding内边距:边框到内容的距离
Border边框
margin外边距
Padding:Margin:Border:
Padding:内边距,上下左右边距都是可以自定义设置。
分别设定内边距:
/*padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;*/
统一设定:
Padding:top right bottom left;从top开始,沿着顺时针进行设定
如果少写了left,那么left就会跟right一致。
如果少写了left,bottom,那么left,bottom,就会跟right,top一致
如果少写了right,bottom,left,那么就会跟top一致。
Margin:外边距跟内边距的设置方式是一致的。本元素的边框跟其他元素的距离。元素的外边距会重叠。
外边距常用水平居中技巧:margin: 上下边距值 auto;
Border:设置元素边框的粗细,样式,颜色。
可以分别进行设置:
border-top: 50px solid purple;
border-bottom: 50px solid transparent;
border-left: 10px solid purple;
border-right: 10px solid transparent;
/*border-width: 50px;
border-style: dashed;
border-color: deeppink;*/
统一设定:
border: 20px dashed purple;
背景属性
Background:颜色,背景图片,可以同时设置颜色和背景。综合性的设定,尽量少用,因为会覆盖掉其他详细的设置。
Background-color:设定背景颜色
Background-image:设定背景图片
Background-size:设定背景图片尺寸
Background-position:设定背景图片的位置
Background-repeat:设定背景图片是否重复
注意:可以设定多张背景图,多张背景图的设定需要用逗号隔开。
/*设定背景图片尺寸的大小
background-size:背景图片的宽度 背景图片的高度
auto:会自动根据宽高,进行适度的拉伸和压缩,保证比例是按照正常的图片比例进行
可以使用百分比设定背景图片。
* \* */
background-size:400px auto,200px auto;
/*
设置背景图片是否重复
background-repeat: no-repeat;不重复
repeat-x:水平重复
repeat-y:垂直重复
* */
background-repeat: no-repeat;
/*背景图片的位置
字体属性
Font-size:字体大小;
Font-weight:字体粗细
Color:字体的颜色
Font-family:字体的名称
Line-height:字体行与行之间的距离,行距
Text-align:文字的排布
Text-shadow:文字的阴影
盒子模型
Box-sizing:
content-box;在元素上设置的宽高即为内容的宽高,如果增加内边距和外边距会使得整个元素增大。
border-box;在元素上设置的宽高即为内容加上内边距加上border的整个元素的宽高,如果增加内边距或者是边框,会导致内容的缩小。
根据是内容是固定还是整个元素固定大小,如果是内容固定大小那么请使用content-box,如果是元素固定大小,请使用border-box;
浮动解决的问题:
1/浮动解决了莫名其妙的间距问题。
2/将元素向左或者向右靠拢
3/可以将文字包拢图片
浮动的原理:浮动元素会脱离正常的文档流。会向父元素的最边缘或者是设定浮动的元素的边缘靠拢。
浮动的缺陷:父元素会高度塌陷。
解决方案:
1/设置父元素的高度。
2/使用清除浮动的方式解决。