css零散笔记回顾

最新推荐文章于 2024-06-14 09:24:52 发布

大海里没有水

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量516

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/Anna_Liqi/article/details/128292663

版权

1、text-align: 也可以对图片进行居中

2、属性选择器

[title] {
	color: red;
}

/* 必须title属性等于div才选中*/
[title='div']{
	background-color: blue;
}

3.兄弟选择器

/* 后一个相邻的兄弟 */
.box + .content {
	color: red;
}
/* 后面所有兄弟 */
.box ~ div {
	font-size: 30px;
}

4.交集选择器

/* 不可以出现空格，div .box，这样就变成后代选择器了*/
div.box {
	color: red;
	font-size: 20px;
}

5.并集选择器

p,
h2, 
h3 {
	color: red;
}

6.伪类的理解

/* 需求： 一个div元素，鼠标放上去，文字变成红色 */
/* hover: 伪类*/
div:hover {
	color: red;
}

7.动态伪类

/* a元素的链接从未被访问过 */
a:link {
	color: red;
}
/* a元素被访问后的状态*/
a:visited {
	color: green;
}
/* a元素鼠标放在上面*/
a:hover {
	color: yellow;
}
/* a元素点击未松手*/
a:active {
	color: blue;
}

8.伪元素befor、 after

9. 默认继承

/* 给div所有子元素字体设置红色 */
div.box {
  color: red
}

<div class="box">
  <h1>我是h1标题</h1>
  <p>
    我是p标题
    <span>呵呵呵呵</span>
  </p>
  <span>我是span标题</span>
</div>

10.元素的隐藏： display-visibility-opacity

.box {
	/* 不占据空间 */
	display: none;
}
.content {
	/* 隐藏了，但是依然占据空间 */
	visibility: hidden;
}

11. width默认值

.box {
	background-color: red;
	/* width如果没有设置，默认是auto, auto 交给浏览器来决定 */
	width: auto;
}
.title {
	/* 行内级非替换元素设置宽高无效*/
	width: auto;
	/* 如果是行内级，width:auto，包裹内容 */
	display: inline-block;
	width：auto;
}

12. 外边距-margin

/* box 跟 container之间是有间隙的，是由换行等造成的，可以通过font-size/浮动/flex布局来解决*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* box跟container之间是有间隙的，是由换行等造成的，可以通过font-size\浮动\flex布局解决 */
      /* 如果有间距，设置margin就不准确了 */
      body {
        font-size: 0;
      }
      .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        /* margin-bottom: 30px; */
      }
      .container {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: green;
        /* 上下的magin会折叠，左右是不会的 */
        /* margin-top: 30px; */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="container"></div>
  </body>
</html>

13.nth-of-type

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 倒数的某一个时 */
      ul > li:nth-last-child(2) {
        color: red;
      }

      /* 倒数的后几个是 */
      ul > li:nth-last-child(-n + 3) {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表元素1</li>
      <li>列表元素2</li>
      <li>列表元素3</li>
      <li>列表元素4</li>
      <li>列表元素5</li>
      <li>列表元素6</li>
      <li>列表元素7</li>
      <li>列表元素8</li>
    </ul>
  </body>
</html>