css笔记

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量1.4k 收藏 26
点赞数 38
文章标签： css 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61469426/article/details/136852340
版权

css

css的书写位置：在title标签下方添加style双标签，在style标签中写css代码

<title>初识css</title>
    <style>
        /* css代码 */
        /* 选择器  {css属性名：属性值} */
        /* 属性名和属性值是成对出现的——键值对 */
        p {
            /* 文字颜色 */
            color: red;
            /* 字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>css的新体验</p>
</body>

css引入方式

1、内部样式表：css代码写在style标签中

2、外部样式表：css代码写在单独的css文件中（.css），在HTML使用link标签引入，最常用的

link写在title的下面

<title>初识css</title>
<!-- link引入外部样式表，rel：关系，样式表 -->
<link rel="stylesheet" href="./my.css"

3、行内样式：配合JavaScript使用

css写在标签的style属性值内

<div style="color:red;font-size=20px">这是div标签</div>
<span style="color: aqua; font-size: 30px;">这是span标签</span>

选择器：查找标签，设置样式

### 基础选择器

一、标签选择器

用标签名作为选择器——同名标签设置相同样式

如：p,h1,div,a,img

二、类选择器

实现标签相同，但样式不同，用来设置css样式

步骤：

定义类选择器——> .类名

使用类选择器——> 标签添加 class="类名"

类名可以用多个单词 两个单词之间用—连接

   <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .size {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class="red">大家好</p>
    <P class="green">我是bob</P>
    <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
    <div class="red size">这是div标签</div>
</body>
三、id选择器

与类选择器一样，用来实现标签相同，但样式不同。id选择器一般配合JavaScript使用，很少用来设置css样式。

步骤：

定义id选择器——> #id名

使用id选择器——> 标签添加 id="id名"

注意：同一个id选择器在一个页面只能使用一次

<title>id选择器</title>
    <style>
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="red">div标签</div>
</body>

四、通配符选择器

查找页面所以标签，设置相同样式

在开发项目初期，清除标签的默认样式的时候使用

通配符选择器 * {}

<title>通配符选择器</title>
    <style>
        * {
            color: blue;
        }
    </style>
</head>
<body>
    <p>p标签</p>
    <div>div标签</div>
    <h1>h1标签</h1>
</body>

画盒子

属性名作用
width宽度
height高度
background-color背景色
<title>画盒子</title>
    <!-- 用类选择器，选择器名相同，样式不同 -->
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>

文字控制属性

描述属性
字体大小(常用单位px)font-size
字体粗细font-weight
字体倾斜font-style
行高line-height
字体样式（楷体）font-family
字体符合属性font
文本缩进text-indent
文本对齐text-align
修饰线text-decoration
颜色color

一、字体大小 font-size
 <title>文字修饰属性</title>
    <style>
        /* 注意：谷歌浏览器文字有默认大小 16px */
        p {
            /* font-size 属性必须有单位，否则不生效 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>p标签</p>
</body>
二、字体粗细 font-weight

属性值：

数字（常用）关键字
正常400normal
加粗700bold
    <title>文字修饰属性</title>
    <style>
        h2 {
            font-weight: 400;
        }
        div {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h2>h2标签</h2>
    <div>div标签</div>
</body>
三、字体倾斜 font-style

作用：清除文字默认的倾斜效果

不倾斜：normal

倾斜：italic

    <title>字体修饰属性</title>
    <style>
        em {
            font-style: normal;
        }
        div {
            font-style: italic;
        }
    </style>
</head>
<body>

    <!-- em标签：使字体倾斜 -->
    <em>em标签</em>
    <div>div标签</div>
</body>
四、行高 line-height （垂直居中）

line-height 属性值：1、数字+px 2、数字（当前标签font-size值的倍数）

测量行高的方法：从一行文字的最顶端（最低端）测量到下一行文字的最顶端（最低端）

    <title>字体修饰属性</title>
    <style>
        p {
            /* line-height: 30px; */
            /* 行高值是数字，表示是当前标签字体大小的倍数 */
            line-height: 2;
        }
    </style>
</head>
<body>
    <p>今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
</body>

用行高实现垂直居中

行高属性值等于盒子高度属性值

   <title>垂直居中</title>
    <style>
        div {
            height: 100px;
            background-color: skyblue;
            /* 行高与高度相同时，实现垂直居中 
            注意：只能是单行文字垂直居中
            */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
五、文字字体（字体族）font-family

属性值：字体名

    <title>文字字体</title>
    <style>
        div {
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

font-family属性值可以写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体（sans-serif）

六、font符合属性

一个属性对应多个值，各个属性值之间用空格隔开

font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

 <title>font属性</title>
     <style>
        /* 文字倾斜，文字加粗，字体大小是30px，行高2倍，楷体 */
        div {
            font: italic 700 30px/2 楷体;
        }
     </style>
</head>
<body>
    <div>测试font属性</div>
</body>        div {
            font: italic 700 30px/2 楷体;
        }

注意：字号和字体必须写，否之font属性不生效

七、文本缩进 text-indent

属性值：1、数字+px 2、数字+em（推荐1em=当前标签的字号大小）常用

    <title>首行缩进</title>
    <style>
        p {
			/* 首行缩进2位 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
</body>
八、文本对齐方式 text-align

控制内容水平对齐方式

属性值效果
left左对齐（默认）
center居中对齐
right右对齐
    <title>垂直居中</title>
    <style>
        h1 {
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>标题文字</h1>
</body>
九、图片对齐方式

在div的区域中居中对齐

<title>图片对齐方式</title>
    <style>
        div {
            text-align: center;
        }
    </style>
</head>
<body>
   <div> <img src="./images/1.jpg" alt=""></div>
</body>
十、文本修饰线 text-decoraction
属性值效果
none无修饰线
underline下划线
line-through（用的很少）删除线
overline（用的很少）上划线
    <title>文本修饰线</title>
    <style>
        a {
            text-decoration: none;
        }
        div {
            text-decoration: underline;
        }
        p {
            text-decoration: line-through;
        }
        span {
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <a href="#">a 标签，去掉下划线</a>
    <div>div标签，添加下划线</div>
    <p>p标签，添加删除线</p>
    <span>span标签，添加上划线</span>
</body>

十一、文字颜色 color

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red，green，blue...学习测试
rgb表示法rgb(r,g,b)r,g,b表示红绿蓝三原色，取值：0-255（数越大，颜色越深）了解
rgba表示法rgba(r,g,b,a)a表示透明度，取值：0-1（透明-不透明）开发使用，实现透明色
十六进制表示法#RRGGBB#000000，#ffcc00，简写：#000，#fc0 取值：0-f开发使用（从设计稿复制）
    <title>文字颜色</title>
    <style>
        h1 {
            background-color: aqua;
            /* color: red; */
            /* color: rgb(0,255,0); */
            /* color: rgba(0, 0, 0, 0.3); */
            color: #0f0;
        }
    </style>
</head>
<body>
    <h1>h1 标签</h1>
</body>

复合选择器

由两个或多个基础选择器，通过不同的方式组合而成

一、后代选择器

选中某元素的后代元素

写法：父选择器 子选择器 {css属性}，父子选择器之间用空格隔开

    <title>后代选择器</title>
    <style>
        /* div里面的span文字颜色为红色 */
        /* 后代选择器，选中所有后代，包含儿子，孙子，重孙子 */
        div span {
            color: red;
        }
    </style>
</head>
<body>
    <span>span标签</span>
    <div>
        <span>这是div的儿子span</span>
        <p>
            <span>这是孙子span</span>
        </p>
    </div>
</body>
二、子代选择器

选中某元素的子代元素（最近的字级）

写法：父选择器>子选择器{css属性}，父子选择器之间用>隔开

    <title>子代选择器</title>
    <style>
        /* div的儿子span文字颜色为红色 */
        div>span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>儿子span</span>
        <p>
            <span>孙子span</span>
        </p>
    </div>

</body>
三、并集选择器

选中多组标签设置相同的样式

写法：选择器1，选择器2，...，选择器N {css属性}，选择器之间用，隔开

    <title>并集选择器</title>
    <style>
        /* div，p，span 文字颜色是红色，相同样式 */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
</body>
四、交集选择器（了解）

选中同时满足多个条件的元素

写法：选择器1选择器2 {css属性}，选择器之间连写，无任何符号

若交集选择器中有标签选择器，标签选择器必须写在最前面

    <title>交集选择器</title>
    <style>
        /* 第一个p标签文字颜色是红色 */
        /* 既是又是的关系：既是p标签，又是有box类 */
        .box {
            font-size: 30px;
        }
        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">p标签，使用了类选择器box</p>
    <p>p标签</p>
    <div class="box">div标签，使用了类选择器box</div>
</body>

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器：hover{css属性}

    <title>伪类选择器</title>
    <style>
        /* 任何标签都可以设置鼠标悬停的状态 */
        a:hover {
            color: red;
        }
        div:hover{
            color: brown;
        }
        /* .box:hover{
            color: green;
        } */
    </style>
</head>
<body>
    <a href="#">a标签，超链接</a>
    <div class="box">div标签</div>
</body>
伪类-超链接

注意：如果要给超链接设置以下四个状态，需要按LVHA的顺序来写

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时（激活）
    <title>超链接伪装</title>
    <style>
        /* a:link {
            color: red;
        }
        a:visited {
            color: green;
        }
        a:hover {
            color: blue;
        }
        a:active {
            color: orange;
        } */
        /* 工作中，一个a标签选择器设置超链接的样式，hover状态特殊设置 */
        a {
            color: red;
        }
        a:hover {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">a标签，测试伪类</a>
</body>

css特性

一、继承性

子级默认继承父级的文字控制属性

    <title>css-继承性</title>
    <style>
        body {
            font-size: 30px;
            color: red;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
    <!-- 如果标签自己有样式则生效自己的样式，不继承 超链接默认是蓝的-->
    <a href="#">a标签</a>
    <h1>h1标签</h1>
</body>

二、层叠性

相同的属性会覆盖：后面的css属性覆盖前面的css属性

不同的属性会叠加：不同的css属性都生效

 <title>css-层叠性</title>
    <style>
        /* 覆盖     相同属性：后面的覆盖前面的 */
        /* 叠加     不同属性：会叠加*/
       div {
        color: green;
        font-size: 30px;
       }
       
       div {
        color: red;
        font-weight: 700;
       } 
    </style>
</head>
<body>
    <div>div标签</div>
</body>

三、优先级

当一个标签用了多个选择器时，基于不同种类的选择器的匹配规则

规则：谁的优先级高，谁的样式生效

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

选中标签的范围越大，优先级越低

    <title>css-优先级</title>
    <style>
        /* 通配符选择器 */
        * {
            /* !important 将这条属性的优先级变得最高，感叹号是英文的，慎用*/
            color: red !important; 
        }
        /* 标签选择器 */
        div {
            color: green;
        }
        /* 类选择器 */
        .box {
            color: blue;
        }
        /* id选择器 */
        #test {
            color: orange;
        }
    </style>
</head>
<body>
    <!-- 行内样式 <div style="color: purple;">div标签</div>-->
    <div class="box" id="test" style="color: purple;">div标签</div>
</body>
优先级--叠加计算规则

叠加计算：若是复合选择器，则要权重叠加计算

公式：（每一级之间不存在进位）

（行内样式，id选择器个数，类选择器个数，标签选择器个数）

规则： 1、从左向右依次比较个数，同一级个数多的优先级高，若个数相同，则向后比较

2、！important 权重最高

3、继承权重最低

    <title>css-权重叠加1</title>
    <style>
        /* （0，0，2，1） */
        .c1 .c2 div {
            color: blue;
        }
        /* （0，1，0，1） */
        div #box3 {
            color: green;
        }
        /* （0，1，1，0） */
        #box1 .c3 {
            color: orange;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这文本是什么颜色？
                <!-- 是橙色 -->
            </div>
        </div>
    </div>
</body>
    <title>css-权重叠加2</title>
    <style>
        /*  */
        div p {
            color: red;
        }
        /* 是继承，权重最低 */
        .father {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">
            文字
        </p>
    </div>
</body>
  <title>权重叠加-第三题</title>
  <style>
    /* (0, 2, 0, 0) */
		#father #son {
			color:blue; 
		} 
		
    /* (0, 1, 1, 1) */
		#father p.c2 {
			color:black;
		} 
		
    /* (0, 0, 2, 2) */
		div.c1 p.c2 {
			color:red;
		} 
		/* 是继承，所以权重最低 */
		#father { 
			color:green !important;
		} 
		/* 是继承，所以权重最低 */
		div#father.c1 {
			color: yellow ;
		} 

	</style>
</head>
<body>
  <div id="father" class="c1">
		<p id="son" class="c2">
			这行文本是什么颜色的？ 
		</p>
	</div>
</body>

Emment写法

说明标签结构Emmet
类选择器p.box加回车 <p class="box"></p>标签名.类名
id选择器p#fox加回车 <p id="fox"></p>标签名#id名
同级标签<div></div><p></p>div+p
父子级标签<div><p></p></div>div>p
多个相同标签<span></span><span></span><span></span>span*3
有内容的标签<div>内容</div>div{内容}
            w400+h400 加回车等于
            
            width: 400px;
            height: 400px;

背景属性

实现装饰性的图片效果

描述属性名
背景色background-color
背景图background-image
背景图平铺方式background-repeat
背景图位置background-position
背景图缩放background-size
背景图固定background-attachment
背景复合属性background
背景图：background-image

属性值：url（图片的URL）

    <title>背景图</title>
    <style>
        /* 盒子是400*400 */
        div {
            width: 400px;
            height: 400px;
            /* 背景图默认是平铺（复制）效果 */
            background-image: url(./images/1.png);
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
背景图平铺方式 ：background-repeat （bgr）
属性值效果
no-repeat不平铺（不复制）
repeat平铺（默认效果）
repeat-x水平方向平铺
repeat-y垂直方向平铺
    <title>背景图平铺方式</title>
    <style>
        /* 盒子是400*400 */
        div {
            width: 400px;
            height: 400px;
            background-color: pink ;
            /* 背景图默认是平铺（复制）效果 */
            background-image: url(./images/1.png);
            
            /* 背景图不平铺 */
            background-repeat: no-repeat;

            /* 背景图水平方向平铺 */
            background-repeat: repeat-x;

            /* 背景图垂直方向平铺 */
            background-repeat: repeat-y;

        }
    </style>
</head>
<body>
    <div>div标签</div>
</body
背景图位置 background-position
属性值（关键字）位置
left（水平方向位置）左侧
right（水平方向位置）右侧
center居中
top（垂直方向位置）顶部
botton（垂直方向位置）底部

属性值（坐标）：数字+px，正负都可以

水平：正数向右，负数向左

垂直：正数向下，负数向上

注意：关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中，数字只写一个值表示水平方向，垂直方向是居中的

    <title>背景图位置</title>
    <style>
        /* 盒子是400*400 */
        div {
            width: 400px;
            height: 400px;
            background-color: pink ;
            /* 背景图默认是平铺（复制）效果 */
            background-image: url(./images/1.png);
            
            /* 背景图不平铺 */
            background-repeat: no-repeat;

            /* background-position:left top ; */

            /* background-position: right bottom; */

            /* 水平：正数向右，负数向左 */
            /* background-position:50px 0 ; */
            /* background-position: -50px 0; */

            /* 垂直：正数向下，负数向上*/
            /* background-position: 0 100px; */
            /* background-position: 0 -100px; */

            background-position: 50px center;
            
            /* 水平垂直颠倒位置是可以的 */
            background-position: bottom left;

            /* 关键字可以只写一个，另一个方向默认居中 */
            background-position: bottom;

            /* 只写一个数字表示水平方向，垂直方向默认居中 */
            background-position: 50px;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
背景图缩放 background-size

属性值写法：

1、关键字

cover:等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白

2、百分比：根据盒子尺寸计算图片大小

3、数字+单位（px）

    <title>背景属性</title>
    <style>
        /* 盒子是400*400 */
        div {
            width: 500px;
            height: 300px;
            background-color: pink ;
            /* 背景图默认是平铺（复制）效果 */
            background-image: url(./images/1.png);
            
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            
            /* contain：若图的宽高跟盒子尺寸相等则停止缩放，可能导致盒子有露白 */
            /* background-size: contain; */

            /* cover：图片完全覆盖盒子，可能会导致图片显示不全 */
            /* background-size: cover; */

            /* 100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比例缩放 */
            background-size: 100%;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
背景图固定 background-attachment（bga）

背景不会随着元素的内容滚动

属性值：fixed

background-attachment: fixed;
背景复合属性 background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性，不区分顺序）

    <title>背景复合属性</title>
    <style>
        div {
            width: 400px;
            height: 400px;

            /* background: pink url(./images/1.png) no-repeat center bottom/cover; */
            background: pink url(./images/1.png) no-repeat center bottom/contain;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
转换显示模式 display
属性值效果
block块级（独占一行，宽度默认是父级的100%，加宽高生效 ）
inline-block行内块（一行共存多个，默认尺寸由内容撑开，加宽高生效）
inline（不常用）行内（一行共存多个，尺寸由内容撑开，加宽高不生效）
    <title>显示模式转换</title>
    <style>
        /* 块级：独占一行，宽度默认是父级的100%，加宽高生效 */
        div {
            width: 100px;
            height: 100px;

            /* 块级转成行内块，加宽高生效 */
            /* display: inline-block; */

            /* 块级转成行内,尺寸由内容撑开，但inline在工作中不常用*/
            display: inline;
        }

        .div1 {
            background-color: brown;
        }

        .div2 {
            background-color: orange;
        }

        /* 行内：一行共存多个，尺寸由内容撑开，加宽高不生效 */
        span {
            width: 200px;
            height: 200px;

            /* display: block; */
            display: inline-block;
        }

        .span1 {
            background-color: brown;
        }

        .span2{
            background-color: orange;
        }

        /* 行内块：一行共存多个，默认尺寸由内容撑开，加宽高生效 */
        img {
            width: 100px;
            height: 100px;

            display: block;
        }
    </style>
</head>
<body>
    <!-- 块元素 -->
    <div class="div1">div标签1</div>
    <div class="div2">div标签2</div>
    <!-- 行内元素 -->
    <span class="span1">span111111111111</span>
    <span class="span2">span1</span>
    <!-- 行内块元素 -->
    <img src="./images/1.png" alt="">
    <img src="./images/1.png" alt="">
</body>

结构伪类选择器

根据元素的结构关系查找元素

选择器（E是标签）说明
E:first-child查找第一个E元素
E:last-child查找最后一个E元素
E:nth-child(N)查找第N个E元素（第一个元素N值为1）
    <title>结构伪类选择器</title>
    <style>
        li:first-child {
            background-color: green;
        }

        li:last-child {
            background-color: orange;
        }

        li:nth-child(3) {
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
        <li>li8</li>
    </ul>
</body>
：nth-child(公式)

根据元素的结构关系查找多个元素

功能公式
偶数标签2n
奇数标签2n+1 ; 2n-1
找到5的倍数的标签5n
找到第5个以后的标签n+5
找到第5个以前的标签-n+5
    <title>结构伪类选择器-公式用法</title>
    <style>
        n默认从0开始
        /* 偶数标签 */
        /* li:nth-child(2n) {
            background-color: green;
        } */

        /* 奇数标签 */
        /* li:nth-child(2n+1) {
            background-color: orange;
        } */

        /* 2的倍数 */
        /* li:nth-child(2n) {
            background-color: green;
        } */

        /* 第4个以后的标签 */
        li:nth-child(n+4) {
            background-color: green;
        }

        /* 第4个以前的标签 */
        li:nth-child(-n+4) {
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>
        <li>li 7</li>
        <li>li 8</li>
    </ul>
</body>
伪元素选择器

创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器说明
E::before在E元素里面最前面添加一个伪元素
E::after在E元素里面最后面添加一个伪元素

注意：

1、必须设置content:" "属性，用来设置伪元素的内容，若没有内容，则引导留空即可

2、伪元素默认是行内显示模式

3、权重和标签选择器相同

    <title>伪元素选择器</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink ;
        }
        /* before伪元素是行内显示 */
        div::before {
            content:"老鼠";
            width: 100px;
            height: 100px;
            background-color: brown;
            display: block;
        }
        div::after {
            content: "大米";
            width: 100px;
            height: 100px;
            background-color: orange;
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 标签内容：老鼠爱大米 -->
    <div>爱</div>
</body>

盒子模型

盒子模型--组成

盒子模型重要组成部分：

  • 内容区域--width & height

  • 内边距-- padding（出现在内容与盒子边缘之间）

  • 边框线-- border

  • 外边框-- margin(出现在盒子外面)

    <title>盒子模型-组成</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* padding 会将盒子撑大，后面会解决。内容与盒子边缘之间 */
            padding: 20px;

            border: 1px solid #000;

            /* 出现在盒子外面，拉开两个盒子之间的距离 */
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
盒子模型--边框线

属性名：border（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

属性值线条样式
solid实线
dashed虚线
dotted点线
   <title>盒子模型-边框线</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 实线 */
            /* border: 1px solid #000; */

            /* 虚线 */
            /* border: 2px dashed red; */

            /* 点线 */
            border: 3px dotted green;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
设置单方向边框线

属性名：border-方位名词 （bd+方位名词首字母，例如：bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

    <title>盒子模型-边框线2</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 上面的边框线 */
            border-top: 1px solid #000;

            /* 右边的边框线 */
            border-right: 2px dashed red;

            /* 下面的边框线 */
            border-bottom: 5px dotted green;

            /* 左边的边框线 */
            border-left: 10px solid orange;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
盒子模型--内边距

设置内容与盒子边缘之间的距离

属性名：padding/padding-方位名词

    <title>盒子模型-内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 四个方向，内边距相同 */
            /* padding: 20px; */

            /* 单独设置一个方向内边距 */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 40px;
            padding-left: 80px;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>

盒子模型-内边距-多值写法

padding多值写法

取值个数示例含义
一个值四个方向内边距均为10px
四个值上：10px；右：20px ；下：40px；左：80px
三个值上：10px；左右：40px ；下：80px
两个值上下：10px；左右：80px
    <title>盒子模型-内边距多值写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 四值：上 右 下 左  顺时针旋转*/
            /* padding: 10px 20px 40px 80px; */

            /* 三值：上 左右 下 顺时针旋转，若有一个方向没有数，就看对面*/
            padding: 10px 40px 80px;

            /* 两值：上下 左右 */
            padding: 10px 80px ;

        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
盒子模型--尺寸计算

默认情况：盒子尺寸=内容尺寸+border尺寸（边框线）+内边距尺寸（padding）

结论：给盒子加border/padding 会撑大盒子

解决：1、手动做减法，减掉border/padding的尺寸 (减的是两边的border/padding)

2、内减模式：box-sizing:border-box

    <title>盒子模型-尺寸计算</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink ;

            padding: 20px;

            /* 内减模式：不要手动减法，加padding和border不会撑大盒子 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
盒子模型--外边距

margin与padding（内边距）的属性值一样

   <title>盒子模型-外边距</title>
    <style>
        div {
            width: 1000px;
            height: 200px;
            background-color: pink;

            /* 外边距不会撑大盒子 */
            /* 四个方向外边距相同 */
            /* margin: 50px; */

            /* 单独设置一个方向的外边距 */
            /* margin-left: 100px;
            margin-right: 100px;
            margin-top: 100px;
            margin-bottom: 100px; */
			外边距的多值写法
             /* 四值：上 右 下 左  顺时针旋转*/
            /* margin: 10px 20px 40px 80px; */

            /* 三值：上 左右 下 顺时针旋转，若有一个方向没有数，就看对面*/
            /* margin: 10px 40px 80px; */

            /* 两值：上下 左右 */
            /* margin: 10px 80px ; */

            /* 两值写法  版心居中 盒子一定要有宽度weight不然无法版心居中  左右是auto的*/
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div>版心内容</div>
</body>
清除默认样式

清除标签默认的样式，比如：默认的内外边距

    <title>清除默认样式</title>
    <style>
        /* 清除所有的标签默认样式（内外边距） */
        * {
            margin: 0; 外边距
            padding: 0; 内边距
            /* 不会撑大盒子 */
            box-sizing: border-box;
        }

        /* 去掉列表的项目符号 */
        /* li {
            list-style: none;
        } */
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>ppppp</p>
    <ul>
        <li>li1</li>
    </ul>
</body>
盒子模型--元素溢出

控制溢出元素的内容的显示方式

属性名：overflow

属性值效果
hidden溢出隐藏
scroll溢出滚动（无论是否溢出，都显示滚动条位置）
auto溢出滚动（溢出才显示滚动条位置）
 <title>元素溢出</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* hidden超出部分隐藏 */
            /* overflow: hidden; */

            /* 溢出滚动（无论是否溢出，都显示滚动条位置）水平垂直都有滚动条 */
            /* overflow: scroll; */

            /* 溢出滚动（溢出才显示滚动条位置） */
            overflow: auto;
        }
    </style>
外边距问题-合并现象

场景：垂直排列的兄弟元素，上下margin会合并（不是两个值相加，而是在二者中选较大值，这个较大值就是两个盒子之间相隔的距离）

现象：取两个margin中的较大值生效

 <title>外边距-合并现象</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-bottom: 20px;
        }

        /* 两个盒子之间相隔50px */
        .two {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
外边距问题-塌陷问题

场景：父子级的标签，子级添加上边的外边距会产生塌陷问题

现象：导致父级一起向下移动

    <title>外边距塌陷问题</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
			子级导致父级一起向下移动
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

解决方法：

  • 取消子级margin，父级设置padding（规避问题）推荐使用这个方法

      <title>外边距塌陷问题</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 用了padding 下面要接上box-sizing：border-box */
            padding-top: 50px;
            box-sizing: border-box;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;

            /* margin-top: 50px; */
        }
      </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

  • 父级设置overflow：hidden（这个比下面那个好一些）

  • 父级设置border-top

    <title>外边距塌陷问题</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 溢出隐藏 */
            /* overflow: hidden; */
            
            border-top: 1px solid #000;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;

            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
行内元素--内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置

解决方法：给行内元素添加line-height可以改变垂直位置

    <title>行内元素的垂直内外边距</title>
    <style>
        span {
            margin: 50px;
            padding: 20px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <span>span标签</span>
    <span>span标签</span>
</body>
盒子模型--圆角

设置元素的外边框为圆角

border-radius

属性值：数字+px /百分比 （属性值是圆角半径）

    <title>盒子模型-圆角</title>
    <style>
        div {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: orange;
            
            /* 四个角相同值 */
            border-radius: 20px;

            /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */

            /* 四值：左上角 右上角 右下角 左下角 */
            /* border-radius: 10px 20px 40px 80px; */

            /* 三值：左上角 右上角+左下角 右下角 */
            /* border-radius: 10px 40px 80px; */

            /* 两值：左上角+右下角  右上角+左下角 */
            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

正园形状：给正方形盒子设置圆角属性值为宽高的一半/50%

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

    <title>圆角-特殊场景</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            /* border-radius: 50%; */
            border-radius: 100px;
        }

        div {
            width: 200px;
            height: 80px;
            background-color: orange;

            border-radius: 40px;
        }
    </style>
</head>
<body>
    <!-- 正圆形 -- 头像 -->
    <img src="./images/1.jpg" alt="">

    <!-- 胶囊状 -->
    <div></div>
</body>
盒子模型--阴影

给元素设置阴影效果

属性名：box-shadow

属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：X轴偏移量 和Y轴偏移量 必须书写

默认是外阴影，内阴影要添加inset

    <title>盒子模型--阴影</title>
    <style>
        div {
            margin: 50px auto;
            width: 200px;
            height: 80px;
            background-color: orange;
					X轴偏移量   Y轴偏移量  模糊半径  扩散半径  颜色  内外阴影
            box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>

css书写顺序：

  1. 盒子模型属性

  2. 文字样式

  3. 圆角、阴影等修饰属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品卡片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #f1f1f1;
        }
        .product {
            margin: 50px auto;
            padding-top: 40px;
            width: 270px;
            height: 253px;
            background-color: orange;
            text-align: center;

            border-radius: 10px;
        }
        .product h4 {
            margin-top: 20px;
            margin-top: 12px;
            font-size: 18px;
            color: #333;
            font-weight: 400;
        }
        .product p {
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./images/liveSDK.svg" alt="">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>

</body>
</html>

标准流

块元素独占一行 div

行内元素可以一行显示多个 span

浮动（了解，现在基本不用）

让块元素水平排列

属性名：float

属性值：left：左对齐 right：右对齐

    <title>浮动-基本使用</title>
    <style>
                /* 特点：顶对齐，具备行内块特点，浮动的盒子会脱标，不占标准流的位置 */
        .one {
            width: 100px;
            height: 100px;
            background-color: brown;

            float: left;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: orange;
            
            /* float: left; */

            float: right;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
    <title>浮动-产品区域布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .produce {
            /* margin实现版心居中 */
            margin: 50px auto;
            width: 1226px;
            height: 628px;
            background-color: pink;
        }

        .left {    
            float: left;

            width: 234px;
            height: 628px;
            background-color: skyblue;

        }

        .right {   
            float: right;


            width: 978px;
            height: 628px;
            background-color: brown;

        }

        .right li {
            float: left;

            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color: orange;
        }

        /* 找到第四个和第八个li，去掉右侧的margin */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!-- 版心：左右结构，右面：8个产品->8个li -->
    <div class="produce">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
清除浮动

浮动元素会脱标，若父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

在父元素内容的最后添加一个块级元素，设置css属性clear：both

一般的用来清除浮动的选择器都叫 .clearfix

  <title>清除浮动-额外标签法</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;

            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        .right {
            float: right;

            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
	/*一般的用来清除浮动的选择器都叫 .clearfix*/	
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
       ******** <div class="clearfix"></div>********
    </div>
    <div class="bottom"></div>
</body>
方法二：单伪元素法

伪元素必须要配合content

在父元素内容的最后添加一个块级元素，设置css属性clear：both

    <title>清除浮动-单伪元素法</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;

            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        .right {
            float: right;

            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }

        /* 单伪元素法 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>
方法三：双伪元素（推荐）
       /* 双伪元素法 */
        /* before 解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

    <title>清除浮动—双伪元素</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;

            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        .right {
            float: right;

            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
        /* 双伪元素法 */
        /* before 解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>
方法四：overflow（溢出隐藏）

给父级标签添加css'属性 overflow：hidden

 <title>清除浮动</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }

        .left {
            float: left;

            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        .right {
            float: right;

            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }

    </style>
</head>
<body>
    <div class="top ">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>

Flex布局（重点，企业）

Flex模型不会产生浮动布局中的脱标现象。

描述属性名
创建flex容器display:flex
主轴对齐方式justify-content
侧轴对齐方式align-items
某个弹性盒子侧轴对齐方式align-self
修改主轴方向flex-direction
弹性伸缩比flex
弹性盒子换行flex-wrap
行对齐方式align-content

Flex-组成

创建flex容器 display:flex

设置方式：给父级标签设置display：flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器

弹性盒子

主轴：默认在水平方向

侧轴/交叉轴：默认在垂直方向

    <title>Flex</title>
    <style>
        .box {
            /* 变成flex模型 */
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        /* 弹性盒子：沿着主轴方向排列 */
        .box div {
            /* 浮动 */
            /* float: left;
            margin: 50px; */
            width: 200px;
            height: 100px;
            background-color: pink ;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
弹性盒子的主轴对齐方式 justify-content
属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end（不常用）弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
    <title>flex-主轴对齐方式</title>
    <style>
        .box {
            display: flex;
            /* flex-start是默认值，弹性盒子从起点开始依次排列 */
            /* justify-content: flex-start; */

            /* 弹性盒子从终点开始依次排列，不常用 */
            /* justify-content: flex-end; */

            /* 弹性盒子沿主轴居中排列 */
            /* justify-content: center; */
            
            /* 父级剩余的尺寸分配成间距 */

            /* space-between 弹性盒子之间的间距相等，两侧没有 */
            /* justify-content: space-between; */

            /* space-around 间距出现在弹性盒子两侧，弹性盒子之间的间距是两端间距的2倍 */
            /* justify-content: space-around; */

            /* 不论是弹性盒子两侧的间距，还是弹性盒子之间的间距都相等 */
            justify-content: space-evenly;
            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
弹性盒子的侧轴对齐方式

属性名：

  • align-items :当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

  • align-self ：单独控制某个弹性盒子的侧轴对齐方式 （给弹性盒子设置）

属性值效果
stretch弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
   <title>flex-侧轴对齐方式</title>
    <style>
        .box {

            display: flex;
            /* 若弹性盒子在侧轴方向没有尺寸才能拉伸 */
            /* align-items: stretch; */
            /* align-items: center; */

            /* align-items: flex-start; */
            align-items: flex-end;
            height: 300px;
            border: 1px solid #000;
        }

        /* 找出第二个div，侧轴居中对齐 */
        .box div:nth-child(2n) {
            align-self: center;
        }
        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
修改主轴方向 flex-direction

主轴默认在水平方向，侧轴默认在垂直方向

属性值效果
row水平方向，从左向右（默认）
column(只记这个，其他基本不用)垂直方向，从上向下
row-reverse水平方向，从右向左
column-reverse垂直方向，从下向上
    <title>flex-修改主轴方向</title>
    <style>
        .box {
            display: flex;
            /* 修改主轴方向 垂直方向，侧轴自动变换到水平方向 */
            flex-direction: column;

            /* 主轴在垂直方向，视觉效果：垂直居中 */
            justify-content: center;

            /* 侧轴在水平方向，视觉效果，水平居中 */
            align-items: center;
            width: 150px;
            height: 120px ;
            background-color: pink ;
        }
        
        img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/1.png" alt="">
        <span>媒体</span>
    </div>
</body>

弹性伸缩比 flex

控制弹性盒子的主轴方向的尺寸

属性值 ：整数数字，表示占用父级剩余尺寸的份数

    <title>flex-弹性伸缩比</title>
    <style>
        /* 默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸 */
        .box {
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            /* height: 100px; */
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 200px;
        }
        
        .box div:nth-child(2){
            flex: 1;
        }

        .box div:nth-child(3){
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
弹性盒子换行flex-wrap

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性值： wrap：换行 nowrap：不换行

写在父级标签中

            flex-wrap: wrap;
            flex-wrap: nowrap;
行对齐方式 align-content
属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end（不常用）弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

写在父级标签中

    <title>flex-行对齐.html</title>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* align-content: flex-start; */
            align-content: space-evenly;
            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>

    </div>
</body>

网站根目录

/*base.css文件的内容 这个可以直接复制，基本都一样*/
/* 存放基础公共样式，列如：清除默认样式+设置网页通用样式 */
* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
    /* 盒子不会撑大 */
    box-sizing: border-box;
}

li {
    /* 将列表前面的项目符号去除 */
    list-style: none;
}

body {
    font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}

a {
    color: #333;
    /* 将超链接的下划线去除 */
    text-decoration: none;
}
  
    /*index.html文件的内容*/
    <title>学成在线</title>
    <!-- 首页的HTML文件 -->
    <!-- 一定要保证顺序要求，要先清除在设置新的样式 -->
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
</body>

网页制作思路

1、布局思路：先整体后局部，从外到内，从上到下，从左到右

2、css实现思路

  1. 画盒子，调整盒子范围--->宽高背景色

  2. 调整盒子位置---->flex布局、内外边距

  3. 控制图片、文字内容样式

header（页眉）区域-布局

通栏：宽度与浏览器窗口相同的盒子

标签结构：通栏（.header ）> 版心（.header .wrapper）（父级加 dispaly ：flex） > logo+导航+搜索+用户

注意：HTML中 版心要将后面四个都包含进去

logo制作技巧

logo功能：1、单击跳转页面（超链接） 2、搜索引擎优化：提升网站百度搜索排名

实现方法：1、标签结构：h1 > a > 网站名称（搜索关键字）

 <!-- logo -->
        <div class="logo">
            <h1><a href="#">学成在线</a></h1>
        </div>

2、css样式：

.logo a {
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../images（固定使用的）/logo.png);

    /* 隐藏文字 */
    font-size: 0;
}
导航制作技巧（nav）

导航功能：单击跳转页面

实现方法：标签结构：ul > li*3 >a

布局思路：li设置 右侧 margin a设置 左右padding

搜索区域（search）

实现方法： 标签结构：.search(dispaly:) > input+a / button

p87

又要开始创造垃圾啦
关注
  • 38
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS笔记
weixin_58509345的博客
12-16 2478
一、基础认知 CSS：层叠样式表 CSS的作用：给页面中的HTML标签设置样式 1.1CSS语法规则 写在哪里？ CSS写在style标签中，style标签一般写在head标签里面，title标签下面 怎么写？ CSS初体验 常见属性：color（文字颜色）font-size（字体大小）background-color（背景颜色）width（宽度）height（高度） 注意点：1、CSS标点符号都是英文状态下的2、每一个样式键值对写完之后，最后需要写分号 1.2CSS引入方式 1.2.
CSS学习笔记
m0_58761900的博客
09-18 3047
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css 笔记2
m0_68844946的博客
06-13 1730
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS笔记.pdf
07-14
1. **外部样式表**：通过`<link>`标签引用外部CSS文件，例如`<link rel="stylesheet" type="text/css" href="文件路径" />`，这种方式便于管理和复用样式，适用于大型项目。 2. **内部样式表**：在HTML文档的`<head>...
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 307
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 147
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 116
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1281
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 805
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1884
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 683
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
CSS-0_3 CSS和单位
乡亲们啊的博客
07-15 866
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
CSS基础
lvshihao_的博客
07-15 672
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
CSS图像不透明度的艺术：探索透明度控制的无限可能
Lesleyhnj的博客
07-15 214
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值