m0_65334415的博客

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列通过浮动可以制作一些水平方向的布局。

outline 用来设置元素的轮廓线，用法和border一模一样，轮廓和边框不同的点，就是轮廓不会影响到可见框的大小。第一个值：水平偏移量 设置阴影的水平位置，正值向右移动 负值向左移动。border-radius:用来设置圆角，圆角设置的圆的半径大小。border-bottom-right-radius 右下角。border-bottom-left-radius 左下角。border-top-right-radius 右上角。border-top-left-radius 左上角。第四个值：阴影的颜色。

宽度和高度用来设置整个盒子可见框的大小。box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）它会减少内容区的空间，会自动调整内容区的空间以适应盒子的大小。设置box-sizing之后，在对盒子进行padding的设定，实际上。默认值，宽度和高度用来设置内容区的大小。

行内元素不支持设置宽度和高度，但是这并不是说明行内元素没有内容区，而是通过width和height不能改变内容区的大小，行内元素的内容区是由他里面的内容决定的，并不能手动进行修改。hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置。inline-block 将元素设置为行内块元素（行内块既可以设置宽度和高度，又不会独占一行）行内元素可以设置border，垂直方向的border不会影响页面的布局。inline 将元素设置为行内元素。行内元素可以设置padding，但是垂直方向不会影响页面的布局。

如果相邻的外边距都是负值，则取两者中绝对值较大的。如果相邻的外边距一正一负，则取两者的和。兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）父子元素间相邻外边距，子元素的会传递给父元素（上外边距）父子外边距的折叠会影响到页面的布局，必须要进行处理。相邻的垂直方向外边距会发生重叠现象。

不写的话就是父元素被子元素高度撑开，写了父元素的高度就是该是多少是多少。

如果这七个值中没有为auto的情况，则浏览器自动调整margin-right值以使等式满足。如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0。如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值。如果这个值为auto，则会自动调整为auto的那个值以使等式成立。如果将三个值都设置为auto，则外边距都是0，宽度最大。以上等式必须满足，如果相加结果使等式不成立，则称为。一个元素在其父元素中，水平方向必须要满足以下的等式。

margin可以同时设置四个方向的外边框，用法和padding 一样。margin虽然不会改变可见框的大小，但是会影响到盒子实际的占用空间。外边距在外边所以就不会影响盒子的大小，但是会影响到盒子的位置。默认情况下设置margin-right不会产生任何的效果。下外边距，设置一个正值，其下边的元素会向下移动。上外边距，设置一个正值，元素会向下移动。上左边距，设置一个正值，元素会向右移动。一共有四个方向的外边距。

因为背景颜色也会延伸到内边距上，所以内容区和内边距就不太好区分，那么有没有什么方法可以进行区分呢，如下：设置一个子元素inner，并且用子元素将父元素充满，然后设置子元素的背景颜色即可。盒子的可见框的大小，由内容区 内边距 和边框共同决定 ，所以在计算盒子大小的时候，需要将这三个区域加到一起计算。padding内边距的简写属性：可以同时指定四个方向的内边距，规则和border-width一样。

总的来说border-width border-color border-style 既可以四条边一起设置，也可以单独对一条边进行设置对一条边进行设置的话依据的顺序是顺时针，另外border也可以进行简写，单独对一条边也可以简写border-style和boder-color 和border-width都可以不给值，因为都有默认值。

内边距（padding）:内边距（内容区和边框的距离），生活中我们用一个盒子去装东西的话，这个东西通常是不会紧贴着盒子放的，会和盒子的边框有一定的距离，这个距离可以用来放泡沫板，起到保护的作用。将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。边框（border）：盒子外边的边缘，用来限制盒子的大小的，边框里面是盒子的内部，边框外边是盒子的外部。总的来说：内容区，边框，内边距这都属于内部的，它们三个决定了盒子的大小，而外边距属于外部的，决定布局。网页是一个多层的结构，一层摞着一层。

但是在CSS中直接使用颜色名是非常不方便的，一是因为颜色名字太多，我们不一定可以一一准确的记住，第二是因为有些颜色我们没有办法去准确的进行描述。如果颜色两位重复可以进行简写（如：#aabbcc-->abc,但是需要注意的是必须是两位重复的才可以进行简写）1表示不透明，0表示完全透明，.5表示半透明（也就是说透明度值在0到1之间）另一方面，使用RGB这种数字颜色对于计算机来说是非常好的。需要四个值，前三个和rgb一样，第四个表示不透明度。在CSS中可以直接使用颜色名来设置各种颜色。

屏幕（显示器）实际上是由一个一个的小点构成的，比如显示器像素大小是1600乘800意思就是水平方向有1600像素，竖直方向有800像素不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越精细越清晰，所以同样的200px在不同的设备下显示效果是不一样的。

利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设计一次即可让所有的元素都具有该样式，j简化了我们的开发工作。比较优先级的时候，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示（分组选择器是单独计算的）样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就会发生冲突，元素选择器 0,0,0,1。通配选择器 0,0,0,0。因为修改起来会比较麻烦。内联选择器： 1,0,0,0。

{}

2n+1 或0dd 表示选中奇数位的元素。2n或even表示选中偶数位的元素。n 第n个n的范围0到正无穷。比如：第一个元素，被点击的元素，鼠标移入的元素...以上这些伪类都是根据所有的子元素进行排序。：nth-child（）选中第n个元素。：nth-child（）选中第n个元素。：first-child 第一个元素。：last-child 最后一个元素。伪类：（不存在的类，特殊的类）伪类用来描述一个元素的特殊状态。伪类一般情况下都是使用:开头。

(选择属性值以指定值开头的元素，不管后面是什么，只要是以这个元素开头的都会被选择）（选择属性中含有某些值的元素的元素）(选择含有指定属性和属性值的元素）(选择属性以指定值结尾的元素）

直接包含子元素的元素叫做父元素。

用来指定超链接打开的位置可选值：_self 默认值 在当前的页面中打开超链接_blank 在一个新的页面中打开超链接。

1、结构（HTML）2、表现（css）3、行为（javascript）

class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素进行分组，可以同时为一个元素指定多个class属性。但如果我们只想改变一句话的样式，比如就要改变月落乌啼这一句的样式，那么元素选择器就没有办法去解决我们的需求，所以我们要用别的选择：id选择器。id选择器就相当于是给一个特殊的标记，有了标记之后，我们就可以对特定的元素进行特殊的操作。作用：根据元素的class属性值选中一组元素。作用：根据元素的id属性值选中一个元素。通过选择器可以选中页面中的指定元素。

列表可以分为1 有序列表2 无序列表3 自定义列表。

但是我们还是要尽量的按照标准去书写网页，因为一方面浏览器自动修正错误需要时间，这可能会影响程序运行的效率，另一方面，浏览器并不是每一次都会改正成我们想要的样子。有时候我们会发现，我们打了不符合语法的代码后，浏览器却依然可以呈现出正确的画面，那是因为，浏览器在解析网页时，会自动的将网页中不符合规范的内容自动进行修正，keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开。所以在使用Html的时候我们应该更加注重的是它的语义，而不是它的样式。网站的描述会显示在搜索引擎的搜索的结果中。

head里面的title里的是网页的标题body里的是浏览器中显示出的，是给用户看的HTML里的标签一般成对出现，但是也会有一些自结束标签，也就是不需要成对出现的标签。

所有数据在计算机底层都会以二进制的形式保存，可以将内存想象成为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0，这个小格子在内存中被称为一位（bit）8bit=1byte(字节），1024byte=1kb(千字节) 1024kb=1mb(兆字节）这里的111就相当于是十进制的7。

历史上蒂姆.伯纳斯李爵士是万维网的发明人。

通过点击拖动等来使用软件。windows,macos,andorid iOS 中的大部分应用。通过访问网页来使用软件，所有的网站都属于这个范畴（B/S架构）古老的方式，通过命令行来使用软件。网页的特点：相较于传统的图形化界面，网页具有以下特点。通常情况下，现在的软件一般由两个部分组成。服务器负责在远程处理业务逻辑。用户通过客户端来使用软件。BS架构对应的是CS架构。