目录
文本属性
.box{
font-size: 30px;
字体尺寸,
用法为用ps 量取字体的“高”,再进行输入
font-family: "仿宋";
字体风格
中文的字体 和 多单词的字体 要引号括住
color: #000;
字体的颜色
font-weight: bold;
字体的宽度
用于加粗字体
text-indent: 2em;
文本缩进
用于文章前面空两行
2em是两个父元素长度
text-decoration: line-through;
line-through:删除线
overline:上划线
underline :下划线
none:清除样式(通常用于清除超链接的默认下划线)
line-height: 30px;行高
如果将其设置为div模板(应为父元素模板)的高度,可以实现垂直居中的效果
text-align: center;
设置该块元素内的文本水平居中
注意:给一个父元素设置该属性,会将这个父元素的行内元素1全部设置文本水平居中,而如果父元素内有其他的块元素,而这个块元素内也有行内元素2,这个text-align: center是不会对 行内元素2生效的,因为该属性只对块元素内的文本水平居中,而不会将块元素中的块元素的文本水平居中
1.Center:居中 较为常用
2.Justify:当段的长度超出width 时 会适应换行
图例:
letter-spacing: 12px;
字体间距
flex-direction: ;
用于在 Flexbox 布局中设置主轴方向的属性。它可以接受以下值之一:
row
:主轴与文档流方向相同,即水平方向从左到右。row-reverse
:主轴与文档流方向相反,即水平方向从右到左。column
:主轴垂直于文档流方向,即垂直方向从上到下。column-reverse
:主轴垂直于文档流方向,即垂直方向从下到上。
Font缩写设置:
1.font-weight
2.flex-direction
3.font-size/line-height: 字体大小/行高
4.font-family
font:bold italic 12px/1.5em "宋体";
img{
vertical-align: middle;
*作用:去除图片下面的多余背景
}
背景和透明度
1. background-color:; 背景颜色
2. background-image:ur1();
3. background-repeat: 背景重复;
有一下几个属性
- repeat默认值, 重复
- no-repeat 不重复( 这个较为常用 通常是设置只有一张图的背景)
- repeat-x 水平方向重复
- repeat-y 垂直方向重复;
4. background-position:0 0; 背景定位
水平方向: left左 、right右、center
居中垂直方向: top上 、bottom下 、center居中
5. background-size:100px 100px; 背景尺寸
重点:背景属性的简写形式
**background : url() 背景重复 背景定位(x,y)/ 背景尺寸(可以为具体的尺寸(w , h) ,也可以用百分号填充(100%,100%))
注:url()内是图片的链接,该属性用来设置背景图片
设置透明度的两个形式
1.background:rgba(0,0,0,0.6);
没有继承性
2.opacity:0.6;
有继承性
外边距与内边距
1. ' * '作用:用于选中所有
设置内外边距为 0
* {
margin: 0; //外边距
padding: 0; //内边距
}
2.单方向外边距的设置
margin-top上外边距
margin-bottom下外边距
margin-left左外边距
margin-right右外边距
3.四个方向外边距的设置
margin:10px; 上下左右外边距都是10px
margin:10px 20px; 第一个值代表上下,第二个值代表左右
margin: 10px 20px 3px; 第一个值代表上,第二个值代表左右,第三个值代表下
argin:10px 20px 30px 40px; 分别代表上右下左
内边距与外边距的使用完全相同这里,只举了外边距
flout (浮动)与 clear(清楚)应用场景:
要实现这样的效果,就会用到flout
即让每个div向左浮动
使用flout可能会出现这样的问题,flout的div太大 , 会超出父元素div的高度或宽度,而flout的div并不会撑开父元素div的高度,就出现溢出问题。
一般有两种种解决方法:
1.设置足够高的父元素div
此方法较为笨,很不灵活
2. 设置足够高的父元素div 同时 设置overflow:hidden \ auto;
之后会讲一种更实用的方法,即万能清除浮动法
这样的表格是如何实现?
在给过多的div设置flout属性时,父元素的宽度容纳不下这么多的div时,div会“滑动”下去
但不是单纯的从下一行在排列
看以下例子:
其实是这样的一种关系,div3从右边滑下来,掉到了div1上,并没有换行
解决父元素高度坍塌问题
万能清除浮动法(实际开发中相当常用)
.clear-fix:after
{
content: "";
display: block;
clear : both;
}
行内元素inline,块元素block与元素转换类型(即display属性)
- display 属性规定元素应该生成的框的类型,常用的值有下面几个
- block 元素显示为块级元素
- inline 元素显示为行内元素
- inline-block 元素显示为行内块元素
- none 元素消失
block块元素特点(参考了其他文章):
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度与高度自动填满其父元素宽度与高度(在父元素没有设置宽高的前提下,子元素block会撑开父元素的宽高)
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin(外边距)和padding(内边距)属性。
inline行内元素特点 :
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果(有效);
- 但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果(无效)。
inline-block行内块元素特点:
- 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
- 比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
行内元素和块级元素的区别
1. 块级元素block独自占一行且宽度会占满父元素宽度,行内元素inline不会独占一行,相邻行内元素可以排在同一行
2. 块级元素可以设置width和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行
3. 块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right,可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果。
举一个block转化为 inline-block 的应用:
定位属性position
相对定位 (position:relative)
- 参考物:元素本身,是相对于它自己原来的位置来说的
- 是否脱离文档流:不脱离
- 偏移距离:(向着中心点方向移动为正值)
-
边偏移(方位名词):
top:10px 参考自己的顶部向下移动10px
bottom:100px 参考自己的底部向上移动100px
left:100px 参考自己的左侧向右移动100px
right:100px 参考自己的右侧向左移动100px
相对定位的的三个注意点:
用于边偏移,相对于自己原来的位置来移动(移动位置的时候参照点是自己原来的位置),借助top,
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。因此,相对定位并没有脱标,也就是位置看起来虽然发生变化,但实际上它还在原来的位置
它最典型的应用是给绝对定位当爹的,也就是说,该元素设置该属性后,其子元素设置了position:absolute的,会以该元素进行参照
绝对定位(position:absolute)
-
绝对定位是元素在移动位置的时候,是相对于它父元素来说的
-
absolute特点:
完全脱标 —— 完全不占位置;
父元素或者祖先元素没有定位(没有设置 相对定位 position:relative),则以浏览器为准定位(Document 文档)。
- 元素将依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
fixed 固定定位
设置该属性后,元素不会根据浏览器的上下滑动而改变位置
后续还会继续修改,感谢你能看到这里!