html基础和head标签html基础注释：便于开发人员对开发项目解释和说明性的文字快捷键是ctr+/注释不会被应用程序解析html是超文本标记语言，严格意义上来说，不是一个开发语言html5是html的第五个版本，添加了一些新标签和api，使用h5必须在页面的开头添加以下代码他的含义是声明当前文档类型是html5标准的文档，这样浏览器在解析渲染的时候会按照h5的标准解析hyml文档是由标签组成的

一、浮动样式CSS浮动是一种布局技术，可以让元素浮动在容器中，半脱离（p元素无效)文档流，使得其他元素可以围绕它排列。浮动属性可以用于图片、文字和其他元素的布局。Float设计初衷：文本环绕文本元素P和浮动天然排斥，不会重叠p元素感受不到浮动元素1、浮动属性值：left：向左浮动right：向右浮动none：不浮动inherit：继承父元素的浮动属性2、浮动元素产生的问题：高度坍塌问题：当一个元素

一、css阿里图标阿里矢量图标库：https://www.iconfont.cn/要在网页中使用阿里图标，需要先在阿里图标库中选择所需的图标，然后引入相应的CSS文件。以下是具体的引入方式：在阿里图标库中选择所需的图标，点击右侧的“下载代码”按钮，选择“CSS”格式，下载生成的zip文件。将下载的zip文件解压，找到其中的iconfont.css文件，复制该文件到项目的CSS文件夹下。在HTML文

HTML+CSS笔记1.内联框架：2.音视频：注意浏览器是否支持的问题！3.到CSS啦！这就是第一种css样式：内联样式；（在实际开发中并不推荐这样！

选择器通配选择器*{}元素选择器元素{}类选择器.类名{}id选择器#id名{}复合选择器交集选择器/*p元素且类名为beauty的元素*/p.beauty{}.rich.beauty{}并集选择器又称分组选择器.rich,.beauty,.navtop,#myIMage{}后代选择器ulli{}子代选择器div>a{}兄弟选择器/*向下找紧紧相邻（中间不能被其他元素隔开）的兄弟--相邻兄弟选择器

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。定位=定位模式+边偏移定位模式说明static静态定位,按标准流特性摆放,没有边偏移,很少用relative相对定位,相对自身原有位置移动,原有位置继续占有（不脱标）absolute绝对定位,相对祖先元素移动位置（脱标）fixed固定定位,以浏览器的可视窗口为位置参照（脱标）sticky粘性定位，兼容性较差，I

本文将简单介绍下CSS来方便日后的CSS的学习。CSS全称CascadingStyleSheets，中文意思是层叠样式表。如今支持最广泛的是CSS2.1，同时还有CSS3也是我们的主要学习内容。下面我们将列出几种适合初学CSS的学习资源。CSS2.1中文specCSSTricksCodrops炫酷CSS效果接下来，我们将介绍引入CSS的几种最基本的用法内联样式，把style属性写到标签里面示例：不

盒子阴影属性值为box-shadow,盒子阴影不占空间,不影响盒子之间的距离.值说明h-shadow必需,水平阴影位置,允许为负值v-shadow必需,水平阴影位置,允许为负值blur可选,模糊距离,数值越大影子越模糊spread可选,影子的尺寸color可选,影子的颜色inset可选,将外阴影改为内阴影(省略即为outset,outset不能出现在语句中)示例:box-shadow:20px20

圆角边框border-radius:length;效果显示Document*{margin:0;padding:0;}div{display:inline-block;margin-top:20px;margin-left:30px;background-color:pink;}.div1{/*圆角边框,用半径为10px的圆,切原有的矩形*/border-radius:10px;height:10

选择器选择器分为基础选择器和复合选择器两大类。基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器。/*标签选择器*/p{color:red;}/*类选择器*/.classname{color:yellow;}/*id选择器*/#idname{color:blue;}/*通配符选择器，选择页面所有的标签*/*{color:green;}多类名可以把一些标签元素共同的样式放到一个类里面。这

浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用.网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。浮动特性1.浮动元素会脱离标准流(脱标)脱离标准普通流的控制,移动到指定位置,且浮动的盒子不再保留原先的位置当为粉色div设置浮动后,其原有的位置空出,表现为压

鼠标样式cursor属性值说明default默认pointer小手move移动text文本not-allowed禁止表单轮廓去除表单轮廓线input{outline:none;}防止拖拽文本域textarea{resize:none;}溢出文字省略号显示单行文本强制单行显示文本，超出部分隐藏，文字用省略号代替超出的部分。多行文本有兼容性问题，适用webkit浏览器或移动端。推荐后端做这个功能。Do

京东首页CSS初始化/*清除默认的padding和margin*//*通配符选择器渲染较慢，一般用标签选择器*/*{margin:0;padding:0;/*CSS3盒子模型*/box-sizing:border-box;}/*em和i中的文字不再倾斜*/em,i{font-style:normal}/*去除列表前的圆点样式*/li{list-style:none}/*border:0;是为了照顾

背景图片满屏显示：.mainbody{position:absolute;top:0;left:0;height:100%;width:100%;background-image:url(images/bj.jpg);background-position:topcenter;background-repeat:no-repeat;background-attachment:fixed;backg

CSS笔记05定位positionCSS属性position-用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。

CSS笔记04浮动标准文档流标准文档流就是浏览器按照各种元素标签排版布局中默认的状态。浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。

文档流（normalflow）网页是多层结构文档流是最底下的一层称为文档流元素在文档流中有什么特点块元素：块元素在页面中独占一行，默认宽度是父元素的全部（会把父元素撑满）默认高度是被内容撑开（子元素）行内元素：行内元素不独占页面一行，只占自身大小，如果一行之中不能容纳所有的行内元素，则换行到第二行自左向右排列（书写习惯）行内元素的默认宽度和高度都是被内容撑开的内容区:元素中所有的子元素喝文本内容都

CSS笔记03盒子模型什么是盒子模型概念：CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示的以及元素间的相互关系。

文章目录前言HTML的局限性什么是CSS？CSS语法规范代码风格引入方式外部样式表(Externalstylesheet)内部样式表(Internalstylesheet)行内样式(Inlinestyle)CSS选择器基础选择器标签选择器类选择器:star2:类命名规范id选择器通配符选择器基础选择器总结复合选择器后代选择器子选择器并集选择器:star:伪类选择器:star:CSS3新增选择器**

CSS笔记01什么是CSSCSS（CascadingStyleSheets）：层叠样式表，也可以叫做级联样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

CSS笔记02美化网页元素为什么要美化网页目的：有效的传递页面信息美化网页、页面漂亮、才能吸引用户突显页面的主题提高用户的体验span标签span标签是短语内容的通用行内容器，它本身并没有任何特殊语义。

介绍CSS导入方式三种方法都将文字设置成了红色CSS选择器元素选择器id选择器图中div将颜色控制为红色，#name将颜色控制为蓝色，谁控制的范围最小，谁就生效，所以第二个div是蓝色的。id属性值要唯一，否则报错。class选择器同样的class属性值可以用于多种元素CSS属性进入这个网址HTML系列教程(w3school.com.cn)点击css3，这是最新的版本点击参考书，就能看到按照字母顺

一枚专业的计算机小白css笔记。html文件的固定结构页面文档的头部，也就是页面标签显示的文字内容都在body标签中段落标签标题标签，有6个，h1。。。

margin叠加盒子模型的相邻元素、父子元素的垂直方向上的margin会产生margin塌陷，具体的margin值为一大一小取大，一正一负取和。相邻的盒子模型中，如果有一个是浮动的，则不会产生margin重叠,水平方向的margin永远不会发生重叠。BFC不会发生margin重叠，而且和它的子元素也不会发生重叠,但相邻子元素之间会发生重叠。两栏布局的两个BFC，float的BFC垂直方向的marg

引入CSS样式表1、内部样式表选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。type="text/CSS"在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。2、行内式（内联样式）3、外部样式表（外链式）JSBin常见CSS属性1、字体样式font-size

青训营css笔记样式继承计算布局的相关技术css个人笔记1.你了解过z-index，简单介绍下：z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

css布局/*字体粗细normal:400bold:700bolder*/font-weight:700;/*设置字体*/font-family:'MicrosoftYaHei',Arial,Helvetica,sans-serif;/*字号大小*/font-size:24px;/*文字样式italic斜体*/font-style:italic;/*复合属性必须保留：fint-size和font-

一.CSS简介CSS是什么？CSS，即“CascadingStyleSheet（层叠样式表）”，是用来控制网页的外观的一门技术。我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下。HTML、CSS

笔记基于尚硅谷菜鸟教程目录1.文档流2.盒子模型2.1简介2.2边框2.3盒子的内边距2.4盒子的外边距2.5盒子在水平方向的布局2.6盒子在垂直方向的布局2.7外边距的折叠2.8行内元素的盒模型2.9浏览器的默认样式2.10盒子的大小2.11盒子的阴影轮廓和圆角1.文档流我们认为网页是一个多层结构，是一层一层的可以通过css为每一次设置样式用户只能看到最上面的一层我们称最下面的一层叫文档流，文档

visibility:hidden;---隐藏并占位visible--默认值，可见display:none;--隐藏，不占位用百分比的方式做屏幕适配以下代码在不同屏幕表现不一样，可能是一行显示3个div，也可能是三行，每行各显示一个divDocumentdiv{border:1pxsolidblack;float:left;}.box1{width:200px}.box2{width:300px}

学前端的一点css笔记，参考的是黑马程序员pink老师的教程。

css笔记css样式规则选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（styleattribute）。每个属性有一个值。

CSS什么是CSSCSS的作用是:可以给网页中的每一个元素设置样式("化妆"、排版布局),让网页更加精美。完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片CSS全称是CascadingStyleSheets.层叠样式表CSS样式书写格式CSS提供了各种各样、丰富多彩的CSS样式，书写格式如下所示color:red冒号左边是样式名，冒号:右边是样式值如何将CSS样式应用到

CSS全称为“层叠样式表(CascadingStyleSheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。一、CSS样式基本知识从CSS样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。1.内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：image.png2.嵌入式嵌入式css样式，就是可以把css样式

1.你了解过z-index，简单介绍下：z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：z-index仅能在定位元素上奏效！可能用到值：auto——默认。堆叠顺序与父元素相等。number——设置元素的堆叠顺序。inherit——规定应该从父元素继承z-index属性的值。适用的元素：必须在定位元素（position:relative/abso

文本text-decoration文本修饰line-through删除线overline上划线underline下划线none没有修饰text-algin文本对齐方式Leftcenterrighttext-indent首行缩进white-space：nowrap不换行（wrap换行）word-spacing单词间距letter-spacing字母间距direction文字排列方向右到左边框.1bo

Flexbox跨浏览器兼容Bug探索FlexboxCSSGrid布局以CSS为中心：完整的指南CSSclip:rect矩形剪裁功能及一些应用介绍CSS3@font-faceCSS清除浮动与位置属性通用CSS

字体属性color字体颜色font-style指定文本的字体样式(正常、斜体)font-size指定文本字体大小font-family定义文本使用某个字体font-weight指定文本的粗细font-variant设置字体为小型大写字母font简写属性：斜体/小型大写字母/粗体/(字体/行高)/族科letter-spacing设置字的间距word-spacing:设置单词的词间距(对中文无效)op

CSS笔记1、CSS的概念层叠样式表(英文全称：CascadingStyleSheets)层叠：多个样式可以作用在同一个html的元素上，同时生效是一种用来表现HTML或XML（标准通用标记语言的一个子集

半透明边框通过rgb和hsla进行颜色设置：border:10pxsolidhsla(0,0%,100%,.5);background:yellowgreen;background-clip:padding-box;image.png设置padding-box代表浏览器会用内边距来裁剪背景，这时候border下的背景是padding外的。而默认是border-box，border下的背景是padd

说明：该笔记为学习《千锋教育_最新版/前端/Web前端/HTML5/教程1000集全套视频带项目》时所整理①拨云见日HTML基础Web前端的三大核心技术：HTML：结构CSS：样式JavaScript：行为HTNL常用标签HTML：超文本标记语言超文本:文本内容+非文本内容(图片、视频、音频等)标记:语言:编程语言标记也叫做标签：标签是可以上下排列，也可以组合嵌套。标签的属性：来修饰标签的，设置当

CSSCSS的简介table元素多类选择器和类选择器id选择器id与类选择器的区别通配符选择器基础选择器的总结复合选择器后代选择器(重要)子元素选择器（重要）**并集选择器(重要)**伪类选择器复合选择器总结代码风格altshiftf字体属性字体属性总结文本文本属性总结**三种样式表：内部外部行内**background参数名词背景复合写法背景半透明色总结outline消除边框线CSS三大特性层叠

css层叠样式表思维导图W3C标准或者web标准1.什么是W3C其实就是WorldWideWebConsortium的缩写，中文是W3C组织或者万维网联盟，W3C这个组织是做什么的呢？简单的说，就是出网页标准的。那么又W3C组织推出的标准就被称为W3C标准或web标准大家所看到的W3C的文档，其实就是万维网联盟提出的标准W3C标准或者叫web标准web标准是一系列的标准结构层：HTML用于描述网页

2.学习了综合案例-五彩导航,运用上最近学的CSS知识,感觉还不错3.准备去跑步,自从换了软件就跑了一次,再不跑体育就挂了每日总结5.191.今天上午满课,中午在打游戏之余翻了翻CSS笔记2.下午学习了

课程：HTML5入门翁恺HTML如今的HTML标记更多是说明这是什么的(段落、标题...)，具体长什么样通常由CSS决定。（HTML5仍保留了少数表示样式的HTML标签）表示换行符，中间无空行，无结束标志(HTML中极少)。表示段落标记符，中间有空行表示删除线，标记要删除的内容。也有删除线的效果，但在HTML5中已经删除有下划线效果，表示这是添加的内容，一般与连用CSS使用CSS有三种方式，引用外

HTML图片语义化1.alt属性与tittle属性。2.figure元素与figcaption元素。表单分组fieldset标签、legend标签优点：1.增强表单语义2.可定义fieldset元素的disabled属性来禁用整个组的表单元素其他br：只适合用于p标签内换行del标签、ins标签：定义删除和更新后的文本img标签：图片作为HTML一部分，想被搜索引擎识别，应使用img反之，应使用背

1.选择父元素的子元素,除去最后一个.item:not(:last-child){background:red}2.文本溢出a.文本溢出显示省略号overflow:hidden;text-overflow:ellipsis;white-space:nowrap;b.让文本显示两行，溢出部分省略号显示width:200px;max-height:50px;line-height:25px;overf

CSS设置块级元素、内联元素、行内块元素属性及区别一、块级元素独占一行默认width是父元素的100%，height取决于内容的height设置width、height有效设置margin，上下左右有效设置padding，上下左右有效二、内联元素不会独占一行默认width取决于内容的width，height取决于内容的height设置width、height无效设置margin，左右生效、上下无效