CSS学习中的一些易错点（一）

最新推荐文章于 2022-07-18 15:04:08 发布

你的宣妹

最新推荐文章于 2022-07-18 15:04:08 发布

阅读量173

点赞数

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/cherreggy/article/details/122671777

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS中百分比的大小取决于外部容器
前端助手插件：FeHelper
background-image默认情况是水平竖直重复充满，background-repeat可以设置平铺方式
在CSS中如果想对某一个div进行设计，采用#和id属性的形式进行连结
由于所有的容器有默认的padding或者margin属性值，内容更改后在div的位置就会相对移动，如果没加的话，div和div之间会出现白边，添加下面的语句可以去除所有标签的默认padding和margin值：

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {margin:0px; padding:0px;}

因此需要注意所有容器的默认属性！

background-attachment的本质实际上是调整图像和容器的相对位置，fixed是相对于浏览器的位置，scroll是相对于所在容器的位置
border的拼接处实际为斜角，可以做出三角形的效果：
在font-family中设置多种字体的目的是使得浏览器在不识别主字体的情况下识别某个预备字体
如果编程中属性字符串出现空格必须使用引号，无空格可以不加引号：

font-family: 华文中宋 'Microsoft Yahei';

font-size属性的默认值是16px；一般字体大小取偶数，便于后续的对齐操作；
font-weight属性数值类型值，100~500对应normal，600~900对应bold/bolder，字体浓淡属性是根据用户电脑上安装的字体相应匹配改变的，在很多情况下，由于系统作了最相近的匹配，因此看不出不同的 font-weight 值有什么区别；
italic和oblique的区别：如果字体没有倾斜属性，采用oblique，如果有倾斜属性，最好采用italic；
em单位在设置缩进时，能不必考虑字体大小变化问题；但是英文大小和中文不同，在中英混用的文本中，需要考虑缩进问题
段落p的默认line-height值是一个动态值，随着字体大小而变化；行高指的是文字上下边距间的距离，即选择时蓝色区域对应的大小：
p标签的属性中，词间距word-spacing是针对英文段落的；如果一个段落的英文单词或者数字特别长，不会进行自动折行，可以采用word-break（强折行）或者word-wrap（弱折行，单词放不下会在下一行折行操作，会有很多空白）进行处理；
属性选择器中，添加*=可以满足部分匹配，=是完全匹配，^=是起始匹配，$=是结束匹配：

div[class*="box"]{background-color: red;}

a标签的伪类选择器一般只采用hover选项，下面的代码，在未移入鼠标是红色，移入或者点击是绿色，如果是link和hover，访问后自动会变色，加link后可能自带visited属性：

<style>
           a{color: red;}
           a:hover{color: green;}
</style>

伪元素::after或::before可以在已有的部分前后添加文字，有很多实际用途
:nth-of-type伪类选择器可以实现隔行换色效果，如下面的代码和效果：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>TEST</title>
        <style>
            li{width: 100px;}
           li:nth-of-type(2n){background-color: red;}
           li:nth-of-type(2n + 1){background-color: royalblue;}
        </style>
    </head>
    <body> 
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>