组件是一种对html 元素数据的封装,对原生 html标签元素的一种拓展,但底层核心依旧依赖DIV+CSS
CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。
这篇文章主要给大家详细解释一下这些代码的作用和意义，以及编写网页代码的格式与思路。
关于css是什么，详细的介绍大家自行查阅资料。比如昨天的的只有HTML文件那些内容的话，显示的内容很不友好，从上到下的顺序显示，从左到右看，只有左边有内容，右边是空的。这里如何排版布置就是CSS的作用。
选择器 { 属性名:属性值; 属性名:属性值; …… }
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
css的盒模型本质是一个盒子，封装周围的HTML元素，包括：外边距、边框、内边距和实际内容。
一、布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已，在很多情况下，我们可以使用其他更合适且更简洁的标签可以替代它。 二、标签的差异 共性：都是一个容器，可以在其中放置内容 差异：分为行内和块级两个大类，且不同便签有相应含义上的预设，如：h-标题，p-段落，a-链接，等等 三、标签语义化的好处 a、让结构更简洁，让搜索引擎更友好 b
如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ;
选择器就是css样式指定的作用在那些标签上；如果一个属性名有多个值，多个值之间使用 空格 隔开
本文内容概要： 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布局操作，那本周的这篇文章我们主要与大家分享的是如何去实现我们网页的布局，这也是作为前端的我们需要做的第一个大操作——实现网站的页面布局。本文主要讲解CSS的基本选择器、盒模型、浮动等知识点，并会提供一个布局案例来给大家做参考。 在上周，在文章的最后给大家留了一个网页结构的案例，通过使用讲解的所有标签来书写了一个页面，可是在那个页面里面，我们只能看到最
在 父容器 盒子模型 中 , 将 子元素 设置为 浮动元素 , 会出现如下情况 :
将 效果图片拖动 到 Adobe Fireworks 中 , 使用 切片工具 分析盒子模型 :
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。
今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ 在此之前先为大家显示下前端工程师的路线图: 第九天的笔记:HTML AND CSS: -复习：HTML类： 定义类选择器：.cc{ color=""; } 类选择器引用： -复习：块级元素： :可以用作其他HTML元素的容器，同个类可以设置 多个块级元素。 例： -复习元素：行内元素，可以作为文本的容器，同个类可以设置多个行 内元素。 例：cccccc HTML布局： 多列显示内容：解析： 样式标签 #header {定义头部的
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1 { padding-top
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS 由此诞生，CSS 是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了 CSS，html 中大部分表现样式的标签就废弃不用了，html 只负责文档的结构和内容，表现形式完全交给 CSS，html 文档变得更加简洁。
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
导航栏文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有 65 像素 ;
「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
举例子： 结论 1.在HTML中所有的标签都可以设置 宽度/高度 == 指定可以存放内容的区域 内边距 == 填充物 边框 == 手机盒子自己 外边距 == 盒子和盒子之间的间隙
注意 : 仅在 垂直方向 上会出现 外边距合并 现象 , 水平方向 外边距 不会合并 ;
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
选择器主要作用是为了确定需要改变样式的HTML元素 每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开
从自身开始，沿着__proto__指向，一直到Object.prototype，这样一条链式结构，终点是null
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
padding 属性值设置 : 设置 1 ~ 4 个 值 , 单位 像素 px ;
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
下图中 , 中心 100 x 100 像素 的 是内容 , 内容外侧 , 边框内侧 , 就是 内边距 范围 ;
今天正好有时间，就来实验了一把。原来 span 标签默认的不是只能设置左右边距，还有更有意思的现象。
定义：CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
向 HTML 的 <body> 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 , 如下图所示 :
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。
层叠样式表 (Cascading Style Sheets)，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
拉四条辅助线 , 将版心包起来 , 可以测量 Banner 条版心的尺寸为 1200 x 420 像素 ;
Day7:html和css 如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相. 清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: 使用after伪元素进行清除浮动. .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *
内容尺寸 大小是 固定的 , 设置的 width 和 height 是多少 , 内容尺寸就是多少 ;
CSS(层叠样式表)控制着网页的样式，例如我们之前编写的HTML文件，文字的颜色都是默认的黑色，如果希望将文字设置成其他颜色，就需要CSS了，可以在HTML文件中填写如下代码，即可把一个h1标签的文字设置成红色;
本节所有的代码: https://download.csdn.net/download/qq_44273429/12729648 未完待续，，， 下一节链接: Web前端基础（04）
可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
上网搜了一下scrollWidth和scrollHeight，大部分都是转帖，也没有具体说清楚，这两个属性值是什么，也没有图。
值： (1)、normal(正常)；bold(加粗)；（<==常用） (2)、纯数字：100~900的整百数；
行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
