Web03--CSS进阶

1、CSS常用属性

1.1 文本字体相关属性设置

样式名	描述
text-align	设置内容位置
text-decoration	控制下划线 none没有 underline有
line-hight	行高
font-size	设置字体大小
font-weight	设置字体粗细的
font-famliy	设置字体样式
letter-spacing	设置中文字体之间的间距
word-spacing	设置英文单词之间的间距

行高：设置单行文字所占据的高度，实际位置是文字的大小+上下的空白间距

  
    
    
    
  
  
    

      轻轻的我走了，正如你轻轻来了

      轻轻的我走了，正如你轻轻来了

      i love you!
    
    百度
  

1.2 背景相关属性设置

用于设置元素的背景样式，包括背景色、背景图、大小等，背景样式的设置前提是元素有大小

属性名	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片的位置
background-size	设置背景图片的大小
background-repeat	设置背景图片是否重复
background-attachment	设置背景图片相对浏览器的定位位置

div{
  width: 1000px;
  height: 1000px;
  background-color: #008B8B;
  background-image: url(./timg.jpg);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  /* background: #008B8B url(./timg.jpg) no-repeat; */
}

1.3 列表相关属性设置

	
		
		
		
	
	
		
		

			
服装
			
食品
			
家居
			
美妆
		
	

1.4 边框相关属性设置

	
		
		
		
	
	
		
111
		
222
		

	

2、CSS布局

CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。HTML里常见的布局方式有三种:

1. 盒子模型，通过设置元素的宽高，修改内外边距来布局
2. 浮动，修改float属性对应的值，让元素向左或者向右浮动。
3. 定位，修改元素的position属性，将元素直接放在指定的位置上。

2.1 盒子模型

页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际占位，通过F12可以直观的查看到盒子模型

盒子模型主要涉及一下几个属性。

属性名	取值	描述
width	数字	用来设置元素的宽度
height	数字	用来设置元素的高度
padding	数字	用来设置内边距
margin	数字	用来设置外边距
border	数字 样式 颜色	用来设置边框的线宽，颜色和样式
display	line/block/inline-block/none	用来修改元素的显示方式
box-sizing	conten-box/border-box	用来规定边框和padding是否会撑大盒子

	
		
		
		
	
	
		
111
		
222
	

2.1.1 显示模式--display

display用于改变元素的生成类型，从而增加元素的使用方式

属性名	描述
display:none;	隐藏元素
display:block;	将元素变为块元素
display:inline;	将元素变为行元素
display:inline-block;	将元素变为行内块元素

		
	
	
		

			

			    
			        
假装情侣
			        
主演：江一燕 and 黄波
			        
今天晚自己习要学习
			        
点击量：9999999999.0次
			    
			    

			        
			        
七十七天
			        
主演：江一燕 and 黄波
			        
今天晚自己习要学习
			        
点击量：9999999999.0次
			    
			    

			        
			        
假装情侣
			        
主演：江一燕 and 黄波
			        
今天晚自己习要学习
			        
点击量：9999999999.0次
			
		
	

2.1.2 display和visibility

visibility控制元素的显示与隐藏

display属性在隐藏元素时，不占据页面的位置，visibility隐藏后，位置仍然被占据着

2.2 浮动

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版，浮动脱离了标准流布局。

float:left/right

	
		
		
		
	
	
		
111
		
222
	

2.3 定位

浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等

属性	取值	描述
position	static	元素框正常生成
	relative	可以修改left和right属性让元素框偏移某个距离,元素原本所占的空间仍保留
	absolute	元素框从标准文档流完全删除，并相对于其父元素定位
	fixed	固定定位
left	数字	设置元素向左的偏移像素
right	数字	设置元素向右的偏移像素

2.3.1 相对定位与绝对定位

    
    
    
    


    

        
展会活动
    

2.3.2 固定定位

2.3.2 堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

注意：z-index的使用前提是元素必须要有定位属性

3、CSS3常见效果

3.1 透明效果

透明效果的应用比较广泛，特别是在商城网站中的图片+文字描述

3.1.1 背景透明

背景透明只针对背景颜色进行透明

background-color:rgba(x,x,x,x) 透明度在0~1之间

3.1.2 整体透明

针对整个元素进行透明，包括该元素的所有子元素

opacity 透明度在0~1之间

	
		
		
		
	
	
		
百度一下
	

4、响应式效果（了解）

早期页面的开发，需要有前端人员、Android工程师和IOS工程师，因为PC端和移动端的屏幕大小差别比较大，需要针对PC端和移动端分别开发整套项目；从H5出现之后，前端人员在开发PC端可以通过技术将PC端的页面在IPAD和移动端上都进行自适应，因此前端就变得更加重要了。

自适应方式两种：响应式、弹性盒子；目前基本上所有用于前端页面开发的流行框架中都封装了响应式或弹性盒子的操作

手机屏幕的适应

H5的出现可以让PC端的应用直接在手机端进行等比例使用，需要设置其视图模式

页面自适应

对网页中的元素的大小，根据电脑屏幕的大小进行动态设置，从而达到一种响应式的效果