第五十一天盒子模型浮动布局溢出属性定位 z-index JS入门

一、昨日内容回顾

1.radio是单选的意思
2.checkbox是可以多选的方框
3.checked="checked"是默认选中的意思

form表单中补充知识
1.获取用户输入的标签必须要有name属性
	name属性类似于字典的键 用户输入的数据类似于字典的值(value属性)
2.针对单选框、多选框、下拉框需要提前写好name属性和value属性
3.获取用户输入的input标签理论上都应该配合label标签一起使用
4.获取用户输入的input框可以设置提示信息
	placeholder
5.针对单选框、多选框、下拉框可以提前设置默认值
	checked
 	selected
'''标签可以有默认的属性 也可以有任意自定义属性'''

css简介
层叠样式表
1.语法结构
2.注释语法
3.引入方式

css选择器
基本选择器
组合选择器
属性选择器
分组与嵌套
伪类选择器
伪元素选择器
选择器优先级

字体样式
font-size
font-family
color
text-align
text-decoration

背景属性
background-color/image/position/repeat
background
ps:背景图片固定不动  background-attachment

边框属性
border-left-color
border-left
border
border-raduis

display属性
display:none

二、盒子模型

所有的标签都可以看成是一个快递盒
1.两个快递盒之间的距离     标签之间的距离			外边距(margin)
2.快递盒的厚度			 标签的边框		 		 边框(border)
3.盒子内物体距离盒子内壁    内部文本与边框的距离     内边距(padding)
4.物体自身的大小			标签内部的内容			   内容(content)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 400px;
            width: 400px;
            background-color: red;
        }
        #d2 {
            height: 400px;
            width: 400px;
            background-color: greenyellow;
            margin-top: 200px;
            margin-left: 100px;
            margin-right: 100px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3" class="c1"></div>
</body>
</html>

需要掌握的操作
	margin-top: 20px;
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 100px;

body标签自带8px的外边距
	margin:0;   简写形式 作用于上下左右
	margin: 10px 20px;  上下  左右
	margin: 10px 20px 30px;  上 左右	下
	margin: 10px 20px 30px 40px; 上 右 下 左    顺时针走一圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div id="d1" style="border: 5px solid black ; height: 400px ;width: 500px">
        <div id="2" style="width: 100px; height: 100px ;border: black solid 6px;margin: 0 auto"></div>
    </div>
</body>
</html>
"""
margin: 0 auto 的意思是距离上边框为0  左右居中
auto是居中的意思 仅限于水平方向
margin只能
"""
margin还可以让内部标签居中展示
		margin:100px auto  仅限于水平方向

padding使用方式与margin一致
下面是关于padding内容的演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <p style="border: 5px solid black;padding: 5px; text-align: center">
        有缘江湖再见!
    </p>
</body>
</html>
"""
padding在padding: 5px可以影响边框的大小，因为是位置的设置，padding设置是没办法让文字居中的
text-align: center可以让文字居中
"""

三、浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>
'''
我个人的理解：
1.首先因为同时进行了漂浮，所以原来多大现在就有多大，不会再占据一行
2.因为同时向左浮动，所以第一个排在第一个位置，因为无法再占据一行，所以第二行的绿色能够跑上来
'''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c3 {
            background-color: orange;
            height: 500px;
            width: 500px;
        }
    </style>
</head>
<body>
<div class="c3">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>
'''
这里面的内容是一块橙色背景包含着两种颜色
'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c3 {
            background-color: blue;
            height: 100px;
            width: 300px;
        }
    </style>
</head>
<body>
<div class="c3">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>
"""
仔细观察就能发现，上面的色块按照向左的浮顺序进行排序
下面的色块有一半被覆盖掉了
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            /*float: left;*/
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            /*float: left;*/
        }
        .c3 {
            border: black solid 5px;
        }
    </style>
</head>
<body>
<div class="c3">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>
"""
在没有浮动之前的两个色框还是好好的，但是这里浮动了之后就出现了一点问题，父标签塌陷了

浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可
"""
解决方法之一：利用在浮动下面的东西进行填充，这里是加上了一块.c4<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c3 {
            border: 5px solid black;
        }
    </style>
</head>
<body>
<div class="c3">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c4" style="height: 100px" ></div>
</div>
</body>
</html>

解决方法之二:设置一个标签左边不允许有浮动的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c3 {
            border: 5px solid black;
        }
    </style>
</head>
<body>
<div class="c3">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c4" style="clear:left; border: aqua solid" ></div>
</div>
</body>
</html>
下面有图片来使得理解更加容易

"""
这边可以理解为c4这个标签不允许左边存在浮动标签
这时候红色的浮动标签已经存在了
所以蓝色的c4就慢慢的下落，最后落在最底下
这样的好处是背景框被支撑起来了
"""

解决方法之三:先设置一个不允许有浮动的元素的伪标签选择器再将其使用进样式中
# 在左边写一个什么都没有的文本，这个文本是一个块级标签，两边都不能有浮动标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c3 {
            border: 3px black solid;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="c3 clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>
'''
1.display: block;让标签变成块级标签！！！！！！！！！！！！
2.border: 3px black solid;   这里不写solid边框是无法显示的
'''

浏览器针对文本会优先展示的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2 {
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c3 {
            border: 3px black solid;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="c3 clearfix">
    <p>你看得见我吗</p>
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>
# 理论上字会被挡住但是这里被显示出来了

四、溢出属性

1.正常状态下不设置溢出属性，文字因为有最高的显示优先级，溢出的文字也会显示出来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
            width: 50px;
            border: 3px solid black;
        }
    </style>
</head>
<body>
    <div>
        按键打开世纪大劫案十九大江苏科技打卡圣诞节
        按键打开世纪大劫案十九大江苏科技打卡圣诞节
        按键打开世纪大劫案十九大江苏科技打卡圣诞节
    </div>
</body>
</html>

2.这个时候就需要用overflow来设置文字的显示方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
            width: 50px;
            border: 3px solid black;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        按键打开世纪大劫案十九大江苏科技打卡圣诞节
        按键打开世纪大劫案十九大江苏科技打卡圣诞节
        按键打开世纪大劫案十九大江苏科技打卡圣诞节
    </div>
</body>
</html>
"""
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。不用掌握了解即可
auto相较于scroll多了滚动条，可以使用鼠标滚轮控制
"""

3.下面的是关于图片的溢出属性，设置图片是否溢出
# 这里会出现问题，图片只是被展示了一个小角落
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
            width: 50px;
            border: 5px solid gold;
            border-radius: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://img2.baidu.com/it/u=1204473175,3676263147&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661446800&t=0fe61dfa8ee1dee237d641c82663e8ad" alt="">
    </div>
</body>
</html>

4.利用max-width: 100%
# max-width: 100%可以让边框在比图片小的情况下，按比例缩小图片并且进行居中显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
            width: 50px;
            border: 5px solid gold;
            border-radius: 50%;
            overflow: hidden;
        }
        div img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://img2.baidu.com/it/u=1204473175,3676263147&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661446800&t=0fe61dfa8ee1dee237d641c82663e8ad" alt="">
    </div>
</body>
</html>

五、定位

1.这里的块级标签默认的position属性为static静态，所以是无法直接调整位置的
所以下面的left:100px;就被无效化了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: static;
            left:100px;
        }
        div img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

2.relative(相对定位)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
            left:100px;
        }
        div img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>
"""
这里是相对于原来的位置左移了100px
"""

3.absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;
        }
        #d2 {
            height: 200px;
            width: 500px;
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
</body>
</html>
"""
注意上面所说的：基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
只要position的属性不是static那么就是被定为过了，就可以作为absolute的父标签
"""

4.fixed(固定定位)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d3 {
            height: 100px;
            width: 100px;
            border: 5px solid black;
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: greenyellow"></div>
<div style="height: 1000px;background-color: orange"></div>
<div id="d3"></div>
</body>
</html>
"""
相对于浏览器窗口做定位
不管页面怎么移动d3都会一直在相同的位置
这个东西很多的网站都会用到！！！！！！！！！！！！！！！！！！！！
"""
"""
最后的总结
static(静态)
	所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
	相对于标签原来的位置做定位
absolute(绝对定位)
	基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
	相对于浏览器窗口做定位
"""

六、z-index

# 这里我们想要达到网页登录的效果 将页面分为上中下三层结构
# 最下面的是网页原来的内容 第二层是一层灰色 第三层就是登录的选项框
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            background-color: rgba(127,127,127,0.6);
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 999;
        }
        .modal {
            height: 200px;
            width: 500px;
            background-color: white;
            z-index: 1000;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div>我在最底层</div>
    <div class="cover"></div>
    <div class="modal">
        <form action="">
            <p>Username:<input type="text"></p>
            <p>Password:<input type="text"></p>
        </form>
    </div>
</body>
</html>
"""
1.cover是中间的那层灰色，position: fixed是让灰色能一直占据屏幕的中间
2.基于上下左右都没有距离是为了能够占据整个页面
3.z-index用来设置页面的z轴的高度，modal的z-index值大于cover的就行了
4.left: 50%; top: 50%;可以使得左上角在页面中间
6.<div style="opacity: 0.9">又快干饭了</div>用来调整透明度
"""
<div style="opacity: 0.9">又快干饭了</div>

七、博客园页面构建

依照下图内容进行网页的构建
具体内容太长，网页源代码就不进行展示了

八、JS入门

定义变量
name = 'jason'      不推荐使用，虽然也有效
var s1 = 'hello world'     全局名称空间，使用次数更多
let s2 = 'jason'    局部名称空间

定义常量(不能修改)
const pi = 3.1415926

"""
支持编写js代码的地方
	1.pycharm
	2.浏览器
"""
在JS中声明变量和常量都需要使用关键字
	var:全局有效
 	let:如果在局部名称空间中使用 那么仅在局部名称空间有效
 	const:定义常量

JS也是动态类型:变量名绑定的数据值类型不固定
   var name = 'jason'
	name = 123
   	name = [11, 22, 33, 44]

九、JS数据类型之数值类型

在js中查看数据类型可以使用 typeof
typeof s2
typeof NaN   这里的结果是number

在js中整型浮点型统称为数值类型number
parseInt('789.666')        转换为整数
parseFloat('1564651561。6456456')   转换为浮点型
NaN:Not A Number 不是一个数字

十、JS数据类型之字符串类型

字符串string
var name = 'jason'
var name = "jason"
var name = `jason`  模板字符串
age = 18
插入内容进行置换的方法
var s1 = `my name is ${name} age is ${age}`
# 注意想要同时写好几行得使用模板字符串，换行的时候得按住shift+enter!!!!!!!!!!!!!!!!!!

内置方法
	1.js中涉及到字符串拼接 推荐使用+
	name + age
	jason18
	2.s1.slice(1,3)
	取出第一位到第三位的内容

s2 = 'jason|123|hahah'
s2.split('|',2)  # ['jason', '123']
取出了前两位的内容

posted @ 2023-07-04 21:48 暧昧的花蝴蝶阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

tuq2791

第五十一天盒子模型浮动布局溢出属性定位 z-index JS入门

一、昨日内容回顾

二、盒子模型

三、浮动布局

四、溢出属性

五、定位

六、z-index

七、博客园页面构建

八、JS入门

九、JS数据类型之数值类型

十、JS数据类型之字符串类型

公告

tuq2791

第五十一天 盒子模型 浮动布局 溢出属性 定位 z-index JS入门

一、昨日内容回顾

二、盒子模型

三、浮动布局

四、溢出属性

五、定位

六、z-index

七、博客园页面构建

八、JS入门

九、JS数据类型之数值类型

十、JS数据类型之字符串类型

公告

第五十一天盒子模型浮动布局溢出属性定位 z-index JS入门