css属性and盒模型

字体属性

font-family: "Arial Black","微软雅黑","...";     /*第一个不生效就用后面的 写多个备用*/
font-size: 24px;	                        /*字体大小*/
font-weight: bold;                              /*字体粗细*/
color: red;			                /*颜色*/

# ps:
	- 颜色属性值有四种表达方式,英文单词|颜色编号|rgb|rgba 
	- pycharm取色器 or QQ微信截图颜色编号显示功能

  

文字属性

text-align: center;		/*文字居中*/
text-align: right;		/*右对齐*/
text-align: left;		/*左对齐*/
text-align: justify;	        /*两端对齐*/

text-decoration: underline;		/* 下划线*/
text-decoration: overline;		/*上划线*/
text-decoration: line-through;	        /*删除线*/
text-decoration: none;			/*无样式,主要用在a标签上,取消默认的下划线*/

text-indent: 32px;				/*首行缩进*/
text-indent: 2em;				/*首行缩进2倍的字体大小, em是相对单位*/

line-height: 2em;				/*两倍的行间距*/
letter-spacing: 5px;			        /*字符之间的距离*/
word-spacing: 5px;				/*调整英文单词之间的距离*/

  

背景属性

background-color: red;			/*背景颜色*/
background-image: url('')		/*背景图片,默认全部铺满*/
background-attachment: fixed;	        /*固定背景图片位置*/

background-repeat: no-repeat;	        /*x,y方向都不平铺*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: center center;     /*第一个x方向  第二个y方向*/

如果出现了多个属性名前缀是一样的情况,一般情况下都可以简写,只写前缀

background: red url("222.png") no-repeat center center;  
/*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/

  

边框属性

border-width: 5px;
border-style: solid;
border-color: green;

border: 5px solid green;		/*简写*/

border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
border-bottom-width: 5px;

border-radius: 50%;			/*直接写50%即可,长宽一样就是圆,不一样就是椭圆*/

  

display属性

display: none;	/*隐藏标签不展示到前端页面,并且不占用页面的位置,但是还存在文档中*/

display: inline;	/*块级标签转为行内标签,具有行内标签的特点*/
display: block;		/*行内标签转为块级标签,具有块级标签的特点*/
display: inline-block;	/*标签既可以在一行,又具有可以设置宽高*/

# 补充:visibility: hidden
<div style="visibility: hidden">单纯的隐藏 位置还在</div> 

  

盒模型

所谓的盒子模型指的是,所有的HTML标签都是一个盒子,具有边距、边框、填充和实际内容。

margin		外边距,标签与标签的间距
border		边框,标签边框
padding		内填充,标签内容到边框的间距
content		标签内容

  

谷歌浏览器的body默认自带8px的margin,写页面时,一般首先要清除body的margin.

margin: 0;				/*上下左右都是0px*/
margin: 10px 20px;			/*上下10px, 左右20px*/
margin: 10px 20px 30px; 		/*第一个上,第二个左右,第三个下 */
margin: 10px 20px 30px 40px;  	        /*上,右,下,左*/

/*每个防线单独设置*/
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

/*水平居中*/
margin: 0 auto;


padding和margin类似,都有四个方向间距设置,且规律一毛一样。
border也有四个方向粗细、颜色、线条样式的设置。也支持简写设置,和margin规律一模一样。
border-color: red green blue		/*上,左右,下*/
border: none;	/*清除边框, 或者 border:0;*/

  

外边距塌陷

/*上下margin边距不叠加,两个标签之间margin最大的间隔 ----> d1和d2上线间隔50px*/
#d1{
    margin-bottom: 50px;
}
#d2 {
    margin-top: 20px;
}

  

浮动

浮动的元素没有块级的概念,浮动之后,本身多大就占多大位置;

一般页面布局设计,都是先用浮动前规划好。

float: left;		/*左浮动*/
float:right;		/*右浮动*/

  

posted @ 2020-05-13 21:07  清轩挽长风  阅读(196)  评论(0编辑  收藏  举报