Day51 前端开发 浮动、定位 、js入门
文章目录
1、盒子模型
比喻 | 实际 | 名词 |
---|---|---|
两个快递盒之间的距离 | 标签之间的距离 | 外边距(margin) |
快递盒的厚度 | 标签的边框 | 边框(border) |
盒子内物体距离盒子内壁 | 内部文本与边框的距离 | 内边距(padding) |
物体自身的大小 | 标签内部的内容 | 内容 |
需要掌握的操作
margin-top: 20px; /*设置 上外边距为20px*/
margin-left: 100px; /*设置 左外边距为100px*/
margin-right: 100px; /*设置 右外边距为100px*/
margin-bottom: 100px; /*设置 下外边距为100px*/
margin:0; 简写形式 作用于上下 左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px 40px; 上右下左(顺时针)
margin 还可以让内部标签 居中显示
margin:100px auto 仅限于水平方向 居中
- padding 使用方式与margin一致
2、浮动布局
靠左 或靠右浮动:float:left\right
浮动会造成 父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷
.clearfix:after{
content: ''; /*空文本*/
display: block; /*让其变成块儿级*/
clear: both; /* 让其左右两边不能有浮动元素*/
}
提前写好 上述的css操作 遇到标签塌陷就给标签添加clearfix类值 即可
浏览器针对文本时优先展示的(浮动的元素如果遮挡会想办法展示)
3、溢出属性
overflow 属性值 | 作用 |
---|---|
visible |
默认值,内容不会被修剪,会是呈现在元素框之外 |
hidden |
内容会被修剪,并且其余内容是不可见的 |
scroll |
内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
auto |
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
inherit |
规定从父元素继承 overflow 属性的值 |
div {
width: 50px;
height: 50px;
border: black 3px solid;
overflow: auto; /*更好用的 滚动查看*/
}
</head>
<body>
<div>
<span>
哈勒可汗发过拉横幅拉回来放回去了
哈勒可汗发过拉横幅拉回来放回去了
哈勒可汗发过拉横幅拉回来放回去了
</span>
</div>
</body>
圆形头像的实现
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: black solid 2px;
overflow: hidden;
}
div img {
max-width: 110%;
}
<div>
<img src="788438d06ffb10e478ea837cf1598ca.jpg" alt="" >
</div>
4、定位
static(静态)
所有的标签默认都不能直接通过定位修改位置 必须切换成下面三种之一
relative(相对定位)
相对于标签原来的位置昨定位
absolute(绝对定位)
基于已经定位过的父标签左定位(如果没有父表则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
绝对定位用法
<style>
#a {
height: 100px;
width: 150px;
background-color: burlywood;
position: relative; /*父类 不能是static*/
left: 200px; /*左边往右移动200px */
}
#b {
height: 50px;
width: 200px;
background-color: antiquewhite;
position: absolute; /*利用绝对定位 必须要基于已经定位过的父类*/
top: 100px;
left: -50px;
}
<div id="a">
<div id="b"></div>
</div>
4.1、z-index
5、纯手搭页面练习
6、JavaScript
跟java没有关系 主要是为了蹭热度
JavaScript 与ECMASript的区别
- 前者是后者的规格,后者是前者的一种实现
- EcmaScript不是JavaScript唯一的部分 也不是唯一被标准化的部分
- 完整的JavaScript 由以下三个不同的部分组成
- 核心(ECMAScript)
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
JavaScript 是一门编程语言(NodeJS 是能够 执行js在后端服务器运行的工具)
6.1、html引入js的方式
<script>
在这里写js代码
</script>
引入 js文件 通过 script
标签中 src属性 导入js文件
<script src="js文件"></script>
6.2、js两种注释语法
//
/**/
js 代码编写 建议结束符号是分号
7、js变量与常量
- pycharm
- 浏览器
在js中声明 变量 和 常量 都需要使用关键字
JS也是动态类型:变量名绑定的数据值类型不固定
var name = 'jason'
name = 123
name = [11,22,33,44] //列表在js中称之为数组
8、js数据类型之数值类型
在js中常看数据类型可以使用 typef
在js中整型浮点型称为数值类型number
parseInt() //装为整数
parse Float() // 转为小数
NaN
: Not a Number 不是一个数字
9、JS数据类型之字符串类型
字符串 string
// 字符串 定义 有三种方法
var name = 'kk' //单引号
var name = "kk" //双引号
//模板字符串
var s1 = `你好啊${name}` //格式化输出
字符串 方法 | 功能 |
---|---|
.length |
返回长度 |
.trim() |
溢出空白 |
.trimLeft() |
移除左边的空白 |
.trimRight() |
移除右边的空白 |
.charat(n) |
返回第n个字符 |
.concat(value) |
拼接 js中最好使用+号拼接 |
.indexOf(from,to) |
子序列位置 |
.substring(from,to) |
根据索引获取序列 |
.slice(start,end) |
切片 |
.toLowerCase() |
小写 |
.toupperCase() |
大写 |
.split(delimiter,limit) |
分割 |
原文地址:https://www.jb51.cc/wenti/3280724.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。