CSS盒子模型
1.本质：CSS盒模型本质是一个盒子 封装周围的HTML元素 包括边距、边框、填充、内容
2.作用：对HTML元素用来设计和布局
3.包含部分
3.1 margin(边距)：用来控制元素与元素之间的距离(控制元素周围空间的间隔 从视觉上达到相互隔离的目的)
3.2 border(边框)：围绕外边距与填充之间的边框
3.3 padding(填充)：用于控制内容与边框之间的距离
3.4 content(内容)：盒子内容 显示文本和图像
4.包含部分具体操作
margin(边距)：调整上右下左元素之间的距离 可单独调整某一侧 也可以简写调整 也可以使内部标签居中(仅限于水平位置-margin: 0 auto;)
border(边框)：调整边框大小及颜色样式 可单独调整某一侧 也可以简写调整(只能统一调整四侧)
padding(填充)：调整数据在边框中的位置 可单独调整某一侧 也可以简写调整(正常只能调整两侧)
content(内容)：填写的数据信息
5.实操
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 200px;
background-color: green;
border: 3px solid black;
padding: 10px;
margin: 0 auto;
text-align: center;
}
#d2{
width: 100px;
height: 200px;
background-color: green;
border: 3px solid black;
padding: 50px 50px;
margin: 20px 10px 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1">123</div>
<div id="d2">222</div>
</body>
| margin/padding简写操作 | 描述 |
|---|---|
| x1 | 四边 |
| x1 x2 | 上下、左右 |
| x1 x2 x3 | 上、左右、下 |
| x1 x2 x3 x4 | 上、右、下、左 |
CSS元素浮动
1.浮动元素(float):浮动元素会生成一个块级框 而不论它本身是何种元素
2.特点：浮动的框可以向左或向右移动 直到它的外边缘碰到包含框或另一个浮动框的边框为止
由于浮动框不在文档的普通流中 所以文档的普通流中的块框表现的就像浮动框不存在一样
3.取值：
left 向左浮动
right 向右浮动
none 默认值 不浮动
注：浮动会造成父标签塌陷 会引起歧义(设置一个边框 里面放入两个元素 将元素进行浮动 边框会塌陷)
解决办法
4.解决办法伪元素:遇到标签塌陷就给标签加clearfix类值即可
.clearfix:after{
content:"";
display:block;
clear:both;
}
5.实操
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c4{
/*width: 300px;*/
/*height: 300px;*/
/*background-color:wheat;*/
border: 3px solid black;
}
.c1{
width: 100px;
height: 100px;
background-color:green;
float: left;
}
.c2{
width: 100px;
height: 100px;
background-color:orangered;
float: right;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
/*.c3{*/
/* clear: both;*/
/* !*border: 2px solid black;*!*/
/*}*/
</style>
</head>
<body>
<div class="c4 clearfix">
<div class="c1"></div>
<div class="c2"></div>
<!-- <div class="c3"></div>-->
</div>
</body>
注：浏览器针对文本是优先展示
CSS溢出属性
1.溢出属性(overflow)
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注：overflow 水平和垂直均设置
overflow-x 水平
overflow-y 垂直
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 50px;
height: 50px;
background-color:green;
float: left;
overflow: auto;
}
</style>
</head>
<body>
<div class="c1">232243546557686878776756</div>
</body>
定位
1.定位属性(position):
1.1 static(默认值)：无定位 不能当做绝对定位的参照物 并且设置标签对象的left、top等值不起作用
1.2 relative(相对定位)：相对于标签原来位置做定位
1.3 absolute(绝对定位)：基于已经定位过的父标签做定位(如果没有父标签则以body为参照 )
1.4 fixed(固定定位)：相对于浏览器窗口做定位
z-index
1.设置对象的层叠顺序
1.1 z-index数值大的在上面 浮动元素不能定位
1.2 只有定位了元素 才能有z-index 除了无定位 其余都可以 定位了元素永远在上 没定位的在下
博客园简易页面
1.先分析页面结构
然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
id与class的命名也要做到见名知意
3.不同的语言存储不同的文件
html文件、css文件、js文件
JavaScript编程语言
JavaScript简介
1.跟Java没有关系
2.JavaScript与ECMAScript的关系
商标，JavaScript本身已被Netscape注册为商标。
而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性 因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现
3.版本迭代
4.JavaScript是一门编程语言
5.html页面引入js的方式
style标签中scrip直接写入
外部引入js文件
6.注释语法
//单行注释
/*多行注释*/
7.结束符; 不写也可以
JS变量与常量
1.在JS中变量与常量都需要关键字
var：全局有效
let：如果在局部名称空间中使用 那么仅在局部名称空间有效
const：定义常量
2.JS也是动态类型：变量绑定的数据值类型不固定
var l1 = [1,2,3];
l1 = 123;
l1 = 'cici';
注：支持编写JS代码的地方
1.pycharm
2.浏览器
JS数据类型
数值类型
1.数值类型-number(相当于python中的整型+浮点型)
2.数据类型转换(js中虽没有整型与浮点型之分但是可以做数据类型转换)
parseInt()
parseFloat()
注：NaN：Not A Number 不是一个数字 转换的类型不是整型或浮点型时
字符串类型
1.字符串类型-string
var name = "lili";
var age = 18;
var info = name + age # lili18
注：js中字符串的拼接推荐用加号(+)
2.内置方法
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
posted on
浙公网安备 33010602011771号