`昨日内容回顾`

CSS简介

就是给HTML标签添加样式

固定语法结构
	选择器 {属性名1:属性值;属性名2:属性值}

三种引用方式

1.link标签引入外部css文件(最正规)
2.html文档结构中的head标签内通过style标签内部直接编写(学习的时候)
3.直接在标签内部通过style属性编写(不常用)

诸多选择器

# 一个页面上有很多相同的标签但是需要有不同的样式
基本选择器
	id选择器 类选择器 标签选择器 通用选择器 
重要选择器
	儿子选择器 后代选择器 毗邻选择器 弟弟选择器
伪类选择器
	a:hover
...

字体样式
```
color、font-size...
```

边框样式

# 如果属性名前缀相同 那么几乎都可以简写
border、border-radius...

背景样式

background-color、-image、-position...

盒子模型

'''类比成快递盒'''
外边距		margin		# 标签与标签之间的距离
边框		 border
内边距		padding		# 内部数据与边框的距离
内容		 content

`今日内容概要`

浮动
定位
两者是否脱离文档流
其他样式补充
博客园页面搭建(总结)
前端编程语言值JavaScript

`今日内容详细`

`浮动`

# ps:html代码是没有缩进一说的 全部写在一行也可以
"""浮动主要就是用于页面布局的!!!"""

# 浮动带来的负面影响
"""会造成父标签塌陷!!!"""
解决浮动的负面影响
	1.在写一个div撑场面(不可取)
    2.关键字clear(可以使用)
    3.通过解决策略(推荐使用):只要父标签塌陷就使用
        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
		# 谁塌陷就给谁加class属性
        
# 浏览器默认都是文本优先展示

`定位`

1.静态定位	static
	所有的标签默认都是静态定位即不能改变位置
2.相对定位	relative
	相对标签原来的位置做定位
3.绝对定位	absolute
	相对已经定位过的父标签做定位(没有则参考body标签)
4.固定定位	fixed
	相对浏览器窗口做定位
    	eg:小米官网右边回到顶部
如何使用css完成定位
	定位关键字position
    位置关键字left、right、top、bottom

`是否脱离文档流`

# 标签位置改变之后 原来的位置是否会空出来
	如果空出来了被其他标签自动占有 那么表示脱离否则不脱离
    
浮动、定位
	脱离文档流
    	浮动、绝对定位、固定定位
	不脱离文档流
    	相对定位

`溢出属性`

# 圆形头像
# d1 {
		width: 200px;
         height: 200px;
		border: 3px solid darkgray;
		border-radius: 50%;
		overflow: hidden;
       }
# di img {
			/*max-width: 100%;*/
        	 width: 100%;
        }

`z-index属性`

# 浏览器平面不是一个二维坐标系而是一个三维坐标系
eg:百度登录或者退出界面>>>:三明治结构(模态框)

`透明度`

rgba(124,124,124,0.5)
	只影响颜色
opacity:0.5
    影响颜色和字体

`JavaScript`

# JavaScript简称JS 与Java可是一点关系都没有的!!!
	完全是为了蹭Java的热度
# JS也是一门编程语言
	是前端意淫想摆脱后端的约束
    写出了使用JS编写后端代码的方案>>>NodeJs
# JS虽然是一门编程语言但是逻辑非常的不严谨
	据传该语言最初的版本是由一个程序员花了七天时间写出来的
# JS很容易学习

`JavaScript补充`

类中引入方式
	1.script标签内部直接编写
    2.script标签src属性导入外部js文件(最正规)

注释语法
	html:<!--注释语法-->
	css:/*注释语法*/
	JS://单行注释	/*多行注释*/
	# 模板语法注释: {#注释语法#}
    
结束符号
	分号作为结束符号(;) 但是不写问题也不大

posted on 2022-02-10 23:33 Henrywuovo 阅读(102) 评论(0) 收藏举报

刷新页面返回顶部