华清远见重庆中心-HTML+CSS基础阶段个人总结

  关于html和css的学习内容，我根据学习过程中做的一些笔记来整理一下这一阶段学到的东西吧（根据平常做练手的大概使用程度编排）

flex

        

 这是写在父元素上的属性，其中最重要的是要在父元素里写display：flex；不然其他的写了也不生效！

 子元素的属性目前相对用的不多

flex的使用重点在于要分清主轴以及交叉轴，以及记得那些属性是写主轴的，那些属性是写交叉轴的！

grid

 网格布局用的不如flex多，但是当页面类能一看看过去均分，或具有数学比例关系时，使用起来会方便，以及每一个div之前的间距很好设置

布局基本上使用这两种方法

关于定位

定位里使用比较多的绝对定位以及相对定位，定位使用时要注意参考系是谁，如果代码界面无法预估大概位置，可以去浏览器里面进行调试，到合适位置回代码界面改数值就行

盒模型、背景

盒模型值得注意的是分为了四层，content内容、padding内边距、border边框、margin外边距、设置不同的样式会有不同的效果，内边距会撑大盒子margin不会。因为笔记写在一起了，图片里还有背景和滚动条的内容就一起说了，背景图要写url，通过路径才能找到图片，滚动条需要注意只有内容超出才会出现滚动条

文本样式

文本样式最常用的就是文本对齐样式text-align ，关于字体的改变font-开头的，以及文本装饰线text-decoration，关于溢出文本用省略号显示分为好几步，关于溢出部分肯定要隐藏overflow：hidden，内容本身要换行，white-space:nowrap强制不换行，最后才是text-overflow：ellipsis溢出部分文字用省略号显示

结构伪类、伪元素

 结构伪类我一般只用nth-of-type，我觉得这样比较方便，只需要前面的条件写明就okk，伪元素注意他是行内元素，不能直接设置宽高，如果要设置记得转为行内块元素或者转为块元素！！！！！以及里面一定要有content：'';里面为空都可以但是一定要有！！！！

选择器

 选择器要注意写对，不然写了不显示，去浏览器检查才发现是没有找对！以及权重的问题，因为不同类型的选择器权重不同，所以可能会无法显示，这个时候就要改变他的权重

这里有一个经常用的动态伪类，标签：hover{}这是当鼠标悬停时显示的样式

表单

表单里多个单选框只能选择一个时则要取相同的name

列表、图片、路径、a标签

 

列表分为有序和无序列表， 前面都有小黑点或者数字，要去除则需要添加list-style-type:none；

图片如果无法显示一般是因为路径的问题，我一般使用相对路径，更好找一些可以直接点出来

表格

表格布局现在基本不用，因为他是回流式，每刷新一次就会全部重新执行，给电脑带来负担

样式、音频、视频

 

内部样式里的@import有些低版本的浏览器无法识别

常见标签

这些标签相对使用不多，一般关于文本的都是用文本标签更多

总结

css样式更多的是需要练习，熟手，练得多才能运用的熟练，还有发现错误是用浏览器调试，以及写完了一定记得手动保存，关于布局还要知道自己是否结构搭建对了，如果结构搭建没对，后面大概率是会重做的！还有就是写选择器的时候记得类名要写对！以及样式写了发现没有显示，可能是没选择到，也可能是行内元素没有转化，或者是权重的问题