前端常用的那些CSS

来源：互联网发布：淘宝怎么卖百度云资源编辑：程序博客网时间：2024/05/21 04:22

最近系统学习了CSS，做下总结，以备长时间不用又给忘了。

1.rem 和 em

rem：相对根元素html的font-size

em：相对应用在当前元素的尺寸

2.组合选择器

（1）div.className {...} class名字为className的所有div，至于叫这个名字的其他tag元素不适用。

（2）div p {color: green;} div内所有的p元素

（3）div > p {color:blue;} 只要p的父元素是div，都适用该样式

（4）div + p {color:red;} div、p是同一个父级，并且p紧跟在div之后

    <div>        <p>我应该是蓝色的</p>        <div>            <p>我应该是蓝色的</p>        </div>        <p>我是红色</p>        <ul>            <li>                <p>我应该是绿色的</p>            </li>        </ul>        <!-- <a href="">Hello</a> -->        <p>我应该是蓝色</p>    </div>

3. 文本缩进和两端对齐

text-indent: 20px;

text-align: justify;

4. p: first-child { color: red; } p是某元素的第一个孩子，例如：

<body><div>    <p>我是第一个孩子</p> 有效    <p>我是第二个孩子</p> 无效</div><p>我不是孩子<p> 无效</body>

5.行内元素设置宽、高、内边距

行内元素的这些属性是无效的，可将其转成块级元素：

display:block;

6.图片剧中显示

display: block;

margin:auto;

7.background-size:cover; 将图片等比例缩放，直到撑满整个区域，所以，这种情况下，图片的部分内容可能不会显示出来

阅读全文

0 0