css补充知识

鲜鸡屎
142 阅读4分钟

盒子模型

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

margin/padding 常见操作
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
可以简写为：margin: 20px;

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

margin还可以让内部标签水平居中显示：
    margin: 0 auto;

浮动布局

float:left\right   页面布局必不可少的操作

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

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
提前写好上述css操作，遇到标签塌陷直接给标签加clearfix类即可

浏览器针对被浮动元素遮挡的文本会想办法优先展示

溢出属性

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

定位

position
static(静态)
所有的标签默认都不能直接通过定位修改位置，必须切换成下面三种模式之一

relative(相对定位)
    现对于标签原来的位置做定位
absolute(绝对定位)
    基于已经定位过得父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
    相对于浏览器窗口做定位
'子绝父相'

z-index

浏览器界面其实是一个三维坐标系 z轴指向用户

1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

纯手搭页面练习

1.先分析页面结构 
    然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
    id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
    html文件、css文件、js文件

JavaScript简介

1.跟java没有关系
2.ECMAScript与JavaScript的关系：
    前者是后者的规格，后者是前者的一种实现。
3.一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
核心（ECMAScript） 
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
4.js是什么
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
5.js的两种注释语法
	//
	/**/
6.js语句的结束符是分号

JS变量与常量

在js中声明变量和常量要使用关键字
var:定义变量，全局有效
let:定义变量，如果在局部名称空间定义，那么仅在局部名称空间有效
const:定义常量

js也是动态类型:变量名绑定的数据值类型不固定
查看数据类型用 typeof()方法

JS数据类型之数值类型

在js中整型浮点型统称为数值类型number
NAN：Not A Number  表示不是一个数字

JS数据类型之字符串类型

字符串string
var name = 'jason'
var name = "jason"
var namr = `jason`   模板字符串

字符串拼接建议使用+

常用方法

方法说明
.length返回长度
.trim()移除空白
.trimLeft()移除左边的空白
.trimRight()移除右边的空白
.charAt(n)返回第n个字符
.concat(value, ...)拼接
.indexOf(substring, start)子序列位置
.substring(from, to)根据索引获取子序列
.slice(start, end)切片
.toLowerCase()小写
.toUpperCase()大写
.split(delimiter, limit)分割

模板字符串

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`


# 如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
avatar
文章
阅读
粉丝