css属性

目录

• 边框属性
• display属性
• 盒子模型
• 浮动属性
• 浮动带来的影响
• 溢出属性
• 定位属性
• z-index属性
• 脱离文档流

边框属性

border-left-color:yellow;
border-left-width:5px;
border-left-style:solid;
可以简写为:
#border-left:5px solid yellow


border-top-color:red;
border-top-width:10px;
border-top-style:dashed;
可以简写为:
#border-top:10px dashed red

border-right-color:yellow;
border-right-width:3px;
border-right-style:dotted;
可以简写为:
#border-top:3px dotted yellow

border-bottom-color:pink;
border-bottom-width:8px;
border-bottom-style:solid;
可以简写为:
#border-bottom:8px solid pink

终极缩写形式 上下左右全部采取一样的样式
#border:5px solid black

#画圆
border-radius:50%

display属性

display:none
eg:
   钓鱼网站

盒子模型

1.外边距(margin)
2.边框(border)
3.内边距(padding)
4.内容(content)

#margin用来调节标签与标签之间的距离
#padding用来调节标签与标签内部(文本或者标签)的距离


margin-left:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
#前缀一致 那么可以缩写为以下几种情况:
margin:10px  # 一个参数表示上下左右
margin:20px 40px  # 第一个控制上下 第二个控制左右
margin:20px 30px 40px  # 第一个控制上 第二个控制左右 第三个控制下
margin:10px 20px 30px 40px  # 上右下左(顺时针)


padding-left:40px;
padding-top:30px;
padding-right:40px;
padding-bottom:60px
#前缀一模一样 也可以缩写 规律跟margin一致 

浮动属性

float  # 页面布局肯定需要用到浮动

"""浮动的元素脱离文档流 相当于漂浮在空中"""
#前提
浏览器针对文本是优先展示的

浮动带来的影响

浮动会导致父标签元素"塌陷" 


#解决方法：
1.自己再写一个div撑着（不可取）
2.用clear属性
    clear:left、right、both  # 不允许标签左侧有浮动的元素
3.终极结论
	.clearfix:after {
				content:'啦啦啦';
				display:block;
				clear:both
			}
  
#结论：
在写css代码之前先写好解决浮动带来塌陷的css代码
哪个父标签塌陷了就给哪个父标签加一个clearfix类属性即可

溢出属性

# 圆形头像制作
overflow参数

eg:
div {
				width:100px;
				height:100px;
				border:3px solid black;
				border-radius:100%;
				overflow:hidden
			}
img {
				width:100%;
			}

定位属性

1.非定位态(静态) 
	所有的标签默认都是非定位状态 无法使用定位改变位置  #static
2.相对定位  
	position:relative    #相对于标签原来的位置做定位
3.绝对定位 
	position:absolute    #相对于已经定位过的父标签做定位
	eg:小米官网购物车
4.固定定位  
	position:fixed       #相对于浏览器窗口做定位

是否脱离文档流

#脱离文档流:
通俗来说就是原来的位置是否可以被其他标签占用


脱离文档流
1.浮动
2.绝对定位
3.固定定位


不脱离文档流
相对定位