自己写网页

今日内容概要

主体：结束css

• 边框属性（重要）
• display属性
• 盒子模型（重要)
• 浮动属性
• 溢出属性
• 定位属性
• z-index属性
• 手动写一个网页

今日内容详细

边框属性（重要）

border-left-color:green;
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-right: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
    """
    钓鱼网站
    	做一个与正规网站一模一样的页面（银行网站)
    		利用display隐藏提前写好的骗子数据
    		实现狸猫换太子的效果
    """

盒子模型

"""
类比学习法
	盒子模型我们可以看成是包装盒
		包装盒与包装盒之间的距离 外边距（margin）
		包装盒的厚度 			 边框（border)
		包装盒与内部物体之间的距离 内容（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:30xp;
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

div{
    width:100px;
    height:100px;
    border:3px solid black;
    border-radius:100%
    overflow；hidden
}
img{
    width:100%;
}
#圆形头像的制作

定位属性

非定位态（静态）
	所有的标签默认都是非定位状态 无法使用定位改变位置 static
相对定位
	position：relative 相对于标签原来的位置做定位
绝对定位
	position;absolute 相对于应定位过的父标签做定位
固定定位 # 掌握
	position：fixed 相对于浏览器窗口做定位

是否脱离文档流

脱离文档流
	浮动
    绝对定位
    固定定位
不脱离文档流
	相对定位
# 脱离文档流：简单的理解为原来的位置是否可以被其他标签占用