css学习笔记： 1.css样式须放在 <style> *****样式 </style>
2.背景用图片: background-image:url(/study/background.jpg); 背景水平重复：background-repeat: repeat-x;
3.背景平铺，通过拉伸实现，会有失真 background-size: contain;
4.属性:text-align 值：left,right,center div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。 但是，span却看不出右对齐效果，为什么呢？ 因为span是内联元素其默认宽度就是其文本内容的宽度 简单说就是文本已经粑在其边框上了，对齐是看不出效果来的
5.<style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} .a {text-decoration: none} </style> <h1>上划线</h1> <h2>删除效果</h2> <h3>下划线</h3> <h4>闪烁效果，大部分浏览器已经取消该效果</h4> <a href="https://how2j.cn/">默认的超链</a> <a class="a" href="https://how2j.cn/">去掉了下划线的超链</a>
6.行间距： 属性: line-height 值：数字或百分比 属性：letter-spacing(字符间距) 值：数字 属性：word-spacing(单词间距) 属性：text-indent 值：数字 //首行缩进
7.属性：text-transform 值： uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写
8.属性:table-layout //作用在<table> automatic; 单元格的大小由td的内容宽度决定 fixed; 单元格的大小由td上设置的宽度决定 注：只对连续的英文字母起作用，如果使用中文就看不到效果
9.属性：border-collapse //作用在<table> 值： separate:边框分隔 collapse:边框合并
10.边框风格：属性： border-style // 作用在<div>上 solid: 实线 dotted:点状 dashed:虚线 double:双线
11.边框颜色属性：border-color 值：red,#ff0000,rgb(255,0,0) // 作用在<div>上
12.边框宽度： 属性：border-width 值：数字
13.块级元素和内联元素的边框区别： 可以看到，块级元素div默认是占用100%的宽度 常见的块级元素有div h1 p 等 而内联元素span的宽度由其内容的宽度决定 常见的内联元素有 span a b strong i input 等
14.style标签上的与style属性冲突：style标签上的与style属性冲突
优先使用style属性 即标签上的style属性，而不是head下的<style></style>中的内容
14.只有<table>的border-collapse: collapse; 为collapse的时候（不能为separate）在<tr>标签中的 border-bottom-style: solid; border-bottom- 1px; border-bottom-color: lightgray; 这些属性才能显现处理啊
15 元素内边距，指的是元素里的内容与边框之间的距离 padding-left:左内边距； padding-right:右内边距；padding-top：上内边距；padding-bottom：下内边距 padding: 上 右 下 左
16.
17.元素外边距：指的是元素边框和元素边框之间的距离 属性： margin-left:做外边距 margin-right：右外边距 margin-top：上外边距 margin-bottom：下外边距 像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。 为了观察上下外边距的效果，可以采用块级元素，比如div.
18.<a>标签去除超链接的下划线 text-decoration:none
19. position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移
20. 使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了 使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见
21.html文件中引用css文件： <link rel="stylesheet" type="text/css" href="/study/style.css"> 引用js文件 <script src="https://how2j.cn/study/hello.js"></script>
在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css
这时就应该写成
href="file://d:/style.css"
如果样式上增加了!important，则优先级最高，甚至高于style属性
21.设置了绝对定位的元素，相当于该元素被从原文档中删除了，与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
22.默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
23. display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
24.display:inline内联，内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
div默认是块级元素
span默认是内联元素
25.内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block
<style>span{ display:inline-block; border: 1px solid lightgray; margin:10px; 100px;}</style>像这样 ，每个都能设置宽度 ，同时还能在同一行。<br><span>盖伦</span><span>蒙多医生</span><span>奈德丽</span><span>蒸汽机器人</span>
27.块级元素和内联元素的居中解决办法：
垂直居中的方法：
内边距方式：
28. overflow属性规定当内容溢出元素框时发生的事情
29.心得
1.img、span、a标签都是行级元素，就是如果一行内容没铺满，这三类标签会在后面接着依次排开，要想让他们换行，那就加标签br
2.float：left需要考虑宽度，场景，如果float left 那一行，让出位置，走向上一行的末尾，发现上一行的宽度不够了，那这个使用float left就不会上移了，要想还能够上移，就需要设置width ，使之能够符合上一行剩余的宽度