前端基础总结--CSS

最新推荐文章于 2023-01-18 14:32:48 发布

chenyouleww

最新推荐文章于 2023-01-18 14:32:48 发布

阅读量525

点赞数 1

分类专栏：笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/chenyouleww/article/details/118576403

版权

前端

1.1前端方向

所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。

前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。

一般的我们说前端都是小前端，就是web端。

大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端

1.2前端的技术

前端能做什么？

前端能做你上网看到的所有页面。哈哈。

优秀的程序员=兴趣+正确的方法+勤奋

Jquery:简化js操作

Bootstrap基于jQuery和css的框架，做响应式的网站（根据分辨率的变化而变化）非常方便，

框架则是提供一套解决方案，你得按我的规定来安排代码结构，它是随着前端功能的增强而产生的，对于往应用方向发展（也就是越来越像客户端）的web产品就很必要做前端架构这件事，它开始以模型为中心，DOM操作只是附加，通过关注点分离鼓励改进应用程序。

web标准的核心理念就是结构标准、样式标准和行为标准，提倡结构、表现和行为相分离，即HTML-结构、CSS-表现、JavaScript-行为 分离。

经常给自己的CSS等代码简化，相同的或者相似的两个并集选择器合在一起，不相同的再区分写出来

同步按你的代码顺序执行，

异步不按照代码顺序执行，异步的执行效果更高：

同步（Synchronization）：任务顺序执行，在上一个任务未执行完成之前下一个任务等待执行。

异步（Asynchronous ）： CUP暂时搁置当前任务，等到主线程任务执行完成，再来响应该任务。

1.3标签的内外边距

企业中要根据标签来判断写不写内外外边距，一般不用*｛margin：0 ；padding：0；｝*

为0，单位可要可不要

div没有内外边距，是默认浏览器给的。

1.4一些好用的快捷键

div*3再按tab可以生成三行div双标签

ul>li[class=‘hh’]{我是li标签}*10

按alt选中不同地方，可以写多行相同文字，

ctrl+d选中相同的，切换到下一个相同的

如果有父子级关系的标签，可以用>。例如ul>li就可以了

如果有兄弟关系的标签，用+就可以了。例如 div+p

如果生成带有类名或id名字的，直接写.demo或#two tab键就可以了，

.top+.banner+(.main>.left+.right+).footer按下tab会变

		<div class="top"></div>
		<div class="banner"></div>
		<div class="footer">
			<div class="main">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>

如果生成的div类名是有顺序的，可以用自增符号$，从1开始排序。

如果想要在生成的标签内部写内容可以用{}表示

input:submit会变

log 后按tab，会出现console.log。

例如w200，按下tab键就可以生成width: 200px;

例如lh26，按下tab键就可以生成line-height: 26px;

1.5一些好的代码

background-size:cover; box-sizing:border-box; font-size:0;**间距也是文字的一种**

style=“background: url(“images/index/15785568884650.jpg”) 0% 0% / 100% 100% no-repeat;”

setTimeout(func,1000);

setInterval(function(){clock()},1000);

background:url(images/2.jpg)no-repeat center/100% 100%;

setTimeout (‘test(参数)’,1000)； //1秒后执行

注：如果不小心写成了setTimeout (test(参数),1000)；test方法就会立即执行哦。

timer = setInterval(autoPlay, 1500);

clearInterval(timer)；

background:url(images/1.png) no-repeat left center;//背景图片不平铺左居44444中对齐

border-radius:75px;//让border-radius值等于高度的一半

border-radius:50%;

border:1px solid #000;

margin:0 auto;//让盒子居中水平居中对齐，更简洁的代码margin:0;

margin:auto;//让盒子水平垂直居中的常用代码之一

display: table-cell;  /* 可以被vertical-align: middle限制*/ 
vertical-align: middle;      // 里面内容为居中对齐，写父盒子里

text-align:center;//文字水平居中

line-height:24px;//24px等于盒子的高度，让盒子内的文字垂直居中

overflow:hidden;

1.如何让文字垂直居中？
在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。（line-height:50px；）
2.如何去除a标签自带的下划线？
text-decoration: none; 取消下划线(取消文本装饰)

ul{list-style:none;}

border: 4px double #000000;//定义双线边框，两条线及其间隔宽等于指定的border-width值

backface-visbility:hidden;

     我们就给它的父级添上相对定位，和最小宽度，最小高度避免全部都皱成一团
     width: 100%;

      min-width: 810px;

      height: 100%;

      min-height: 600px;

br和hr的区别：

标签在 HTML 页面中创建一条水平线。
可插入一个简单的换行符。

cursor:pointer;//鼠标变小手

firworks测量工具

1.6给网页标题加小图标（网站头像）

找网页图标可以去图标字体（如阿里图标库）上去找

通过查询资料，网络上有两种写法(写在head标签内)：

语句一：<link rel="shortcut icon" href="图片地址（一般是favicon.ico）" />
其中favicon.ico需放在根目录下面（不提倡用这种方法，因为图片没有授权，违反了W3C标准，）
语句二：<link rel="icon" href="图片地址" type="image/gif" />

静态的图标文件使用：

标题栏：
<link rel="icon" href="ico地址" type="image/x-icon">
收藏夹：
<link rel="shortcut icon" href="ico地址" type="image/x-icon">

注意：图标要用 16*16 色的。。。(保证了兼容性，无论在哪个地方都可以显示，也可以是32*32)

动态图 gif（动画也是16*16）使用：

<link rel="icon" href="1.gif" type="image/gif" >

清除原格式

*{清除默认的内外边距，几乎是必写的。也叫CSS的初始化，这是最简单的，不推荐。
margin:0;//外边距
padding:0;//内边距
}
border-top要写在border后面，不然容易被覆盖

ul{

list-style:none;//取消列表的默认样式小点

}

text-decoration:none;

input{border:0;}//所有的表单边框为0

清除基线

1.设置块元素

2.设置字体大小为0

3.vertical-align：bottom;//低对齐

鼠标经过事件

第一种：主要用了onMouseOver和onMouseOut事件
html代码：

css代码：

img:hover{ cursor: pointer; }

1）、alt表示图片不能正常显示时的替换内容，里面可以加上文字，一般不写这个属性的话会有警告错误，所以我一般是会加上的。

2）、src="url()"表示图片的地址，此处的意思是images文件夹下的名字为1的jpg图片。

3）、onMouseOver 属性是鼠标指针移动到元素上时触发的。

4）、onMouseOut属性是鼠标指针移出元素是触发的。

此处的意思是在鼠标移入时显示1.png，移出时显示1.jpg。

5）、img:hover 是鼠标经过img标签时显示的内容。

6）、cursor:pointer 表示鼠标经过是指针显示为小手形状。

注：这里是两张图片完全替换，鼠标移入时图片1.jpg完全不会显示。

第二种

.div_style:hover{
background-image: url(“img2.png”); //这是改变背景色
background-repeat: no-repeat;//这是让背景色不平铺
color:red; //这是让字体变为红色
}

1.7小总结

HTML

//可以设置语言

//H5支持自定义标签

ine-height是内容的垂直居中而不是元素的垂直居中，

元素的垂直居中可以利用内联元素设置vertical-align:middle来实现，在确定高度的情况下也可以通过设置margin或者padding来实现。

2.1文档类型（Doctype声明放在HTML前面）

<!doctype>用来声明html的版本，浏览器只有知道html的版本后才能正确显示文档,<!DOCTYPE>本身不是一个标签，而是一个声明。
html5的文档类型是：
文档类型设定
·document
HTML：sublime输入html：4s
XHTML：sublime输入html：xt
HTML5：sublime输入html：5

声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种。
DOCTYPE可声明三种 DTD 类型：严格、过渡以及框架集的 HTML 文档。

制作一个符合标准的网页，DOCTYPE声明是是不可缺少的，它在Web设计中用来说明你用的XHTML或者HTML是什么版本，

如果不做DOCTYPE声明或声明不正确的情况下，将有可能导致你的标识与CSS失效，从而令你网页的布局变乱，造成网页在浏览器中不能正常的显示。

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式

在标准模式中，浏览器以其支持的最高标准呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

当浏览器开启了混杂模式的时候：

影响css的情况

主要是IE浏览器，其他Chrome，FF以及IE高版本浏览器无论在什么模式下都能正常显示

盒模型是混杂模式和标准模式的主要区别
<=IE6将盒子的padding和border算到盒子尺寸中，这被称为IE盒模型。
W3C标准的盒模型中，box大小就是content大小。
这一区别将导致页面绘制时所有块级元素都出现很大差别，所以两种不同的文档模式下的页面也区别很大。
影响图片元素的垂直对齐方式，就是在行框对基线的选择，IE的怪异模式会以Bottom-line为基线，标准模式下以base-line为基线。
影响table元素继承字体的某些属性，在IE5的怪异模式下不会继元素的一部分属性，尤其是font-size属性。
IE5怪异模式中内联元素可以定义尺寸
IE标准模式下，overflow取值为visible即溢出可见，在怪异模式下该溢出会被当作扩展box来对待，元素的大小由其内容决定，溢出不会被裁剪，而是父元素会自动调整自己的宽高以完全适应包含内容。

影响javascript的情况

跨浏览器确定一个窗口大小不是一件简单事，注意以下介绍的属性获取后的值都是整数而且没单位，即使是小数浏览器计算时也会四舍五入。

模式触发

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。

如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡DTD和URL的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URL会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容

2.2字符集

由于不同的国家和地区使用不同的文字，就衍生出了很多不同的字符集和不同的字符编码方案。如：

用于现代英语的ASCII字符集
用于欧洲很多国家的iso8859系列字符集
用于中国的GB2312，GBk，GB18030等字符集
用于台湾，香港，澳门等的Big5字符集。
用于日本的Shift JIS字符集
用于越南的VISCII
用于印度的ISCII
包含全世界所有文字符号的Unicode字符集和其UTF-7，UTF-8，UTF-16等字符编码方案。

2.3BFC（独立渲染区域）

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

**具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

HTML 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)，不为static或则releative中的任何一个
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)，

BFC 特性及应用

总结 BFC 的布局规则：

内部的 Box 会在垂直方向排列（块级元素）
Box 垂直方向上的边距由margin决定，属于同一个 BFC 的两个相邻的 Box 的margin会发生重合
每个盒子的左边框紧挨着包含块的左边框，浮动元素也是如此
BFC 的区域不会于 Float Box 重叠 BFC 就是页面上的一个隔离的独立容器，容器里面的子
元素不会影响到外面的元素，反之亦然
计算 BFC 的高度时，浮动子元素也参与计算

1. 同一个 BFC 下外边距会发生折叠

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

这时候，两个盒子边距就变成了 200px

2. BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

最低0.47元/天解锁文章

chenyouleww

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端基础总结--CSS

前端1.1前端方向所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。一般的我们说前端都是小前端，就是web端。大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端1.2前端的技术前端能做什么？前端能做你上网
复制链接

扫一扫