46-71 78-83

最新推荐文章于 2024-09-10 22:58:41 发布

Numbhomie

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量73

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_74298353/article/details/127651911

版权

标签选择器

TAG选择器

div {} <div></div>

使用的场景：

1、去掉某些标签的默认样式时

2、复杂的选择器中，如层次选择器

群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

通配选择器

*{ }→ div,ul,li,p,h1,h2....{}

注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。

（去掉某些标签的默认样式时）

层次选择器

后代 M N{ }

父子 M>N{ }

兄弟 M~N{ } 当前M下面的所有兄弟N标签

相邻 M+N{ } 当前M下面的相邻的N标签

属性选择器

M【attr】 {}

= ：完全匹配

*=：部分匹配

^=: 起始匹配

$=: 结束匹配

[ ][ ][ ] :组合匹配

伪类选择器

M:伪类{ }

：link 访问前的样式（只能添加给a标签）

：visited 访问后的样式（只能添加给a标签）

：hover 鼠标移入时的样式（可以添加给所有标签）

：active 鼠标按下时的样式（可以添加给所有的标签）

注：

一般的网站都只设置

a{} （link visited active）a：hover{}

：after、：before 通过伪类的方式给元素添加的一段文本内容，使用content属性

：checked、：disabled、：focus 都是针对表单元素的

nth-of-type（） nth-child（）

角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大

first-of-type

last-of-type

only-of-type

nth-of-type（）和nth-child（）之间的区别

type：类型

child：孩子

CSS的样式继承

文字相关的样式可以被继承

布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit 值）

CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

内部样式优先级

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级

style行间>id>class>*>继承

注：style行间权重 1000

id：权重 100

class 权重 10

tag 权重 1

！important

提升样式优先级，非规范方式，不建议使用。

标签+类与单类

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高

层次优先级

1、权重比较

ul li .box p input{} 1+1+10+1+1

.hello span #elem{} 10+1+100

2、约分比较

ul li .box input{} li p input{}

.hello span #elem{} #elem{}

CSS盒子模型

组成：content→padding→border→margin

物品填充物包装盒盒子与盒子之间的间距

content：内容区域 width和height组成的

padding：内边距（内填充）

只写一个值：30px（上下左右）

写两个值：30px 40px（上下、左右）

写四个值：30px 40px 50px 60px（上、右、下、左）

单一样式只能写一个值：

margin-left

margin-right

margin-top

margin-bottom

注：

1、背景色填充到margin以内的区域（不包括margin区域）

2、文字在content区域添加。

3、padding不能为负数，而margin可以为负数。

box-sizing：盒尺寸，可以改变盒子模型的展示形态。

默认值：content-box：width、height→content

border-box：width、height→content padding border

使用的场景：

1、不用再去计算一些值

2、解决一些100px的问题

盒子模型的一些问题：

1、margin叠加问题，出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。

2、margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。

扩展：

1、margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在第二部分来进行学习）

2、width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

<!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>
         #box1{width: 350px;height: 350px;border: 1px black dashed; padding:27px;}
         #box2{border: 5px #d7effe solid; padding: 20px;}
         #box3{background: #ffa0df;padding: 41px;}
         #box4{border: 1px white dashed; padding: 3px;}
         #box5{border: 1px white dashed; padding: 49px;}
         #box6{width: 100px;height: 100px;background-color: #96ff38;border: #fcff00 5px solid;}
    </style>
</head>
<body>
         <div id="box1">
            <div id="box2">
                <div id="box3">
                    <div id="box4">
                        <div id="box5">
                            <div id="box6"></div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
</body>
</html>

标签分类

一、按类型

block：div、p、ul、li、h1.

1、独占一行

2、支持所有样式

3、不写宽的时候，跟父元素宽相同

4、所占区域是一个矩形

inline：span、a、em、strong、img...

1、挨在一起的

2、有些样式不支持，例如：width、height、margin、padding

3、不写宽的时候，宽度由内容决定

4、所占的区域不一定是矩形

5、内联标签之间会有空隙，原因：换行产生的

inline-block：input、select...

1、挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

二、按内容

Flow：流内容

Metadata:元数据

Sectioning：分区

Heading：标题

Phrasing：措辞

Embedded：嵌入的

Interactive：互动的

三、按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

img、input...

非替换元素：将内容直接告诉浏览器，将其显示出来。

显示框类型

display：block inline inline-block none ...

区别：

display：none

不占空间的隐藏

visibility： hidden 占空间的隐藏

标签嵌套规范

ul、li

dl、dt、dd

table、tr、td

块能够嵌套内联

<div>

</div>

块嵌套块

<div>

</div>

内联是不能嵌套块

特殊：

正确的写法：

</a>

溢出隐藏

overflow：

visible：默认

hidden

scroll

auto

x轴、y轴

overflow-x、overflow-y针对两个轴分别设置

透明度与手势

opacity：0（透明）~1（不透明）

0.5（半透明）

注：占空间、所有的子内容也会透明

rgba（）：0~1

注：可以让指定的样式透明，而不影响其他样式

cursor：手势

default：默认箭头

要实现自定义手势：

准备图片：.cur .ico

最大、最小宽高

min-width、min-height

max-width、max-height

%单位：换算→以父容器的大小进行换算的

一个容器怎么适应屏幕的高：容器加height：100%； body：100% html：100%

html，body{ height：100%}

.contrainer{ height：100%}

CSS默认样式

没有默认样式的：div、span

有默认样式的：

body→margin：8px

h1→margin：上下 440px

font-weight：bold

p→margin：上下16px

ul→margin：上下 16px padding：左 40px

默认点：list-style：disc

a→text-decoration：underline；

CSS reset：

*{ margin：0；padding：0；}

优点：不用考虑哪些标签有默认的margin和padding

缺点：稍微的影响性能

body，p，h1，ul{ margin：0；padding：0；}

ul{ list-style：none；}

a{ text-decoration：none；color：#999；}

img{ display：block}

问题的现象：图片跟容器底部有一些空隙。

内联元素的对齐方式是按照文字基线对齐的，而不是文字底部对齐的。

vertical-align：baseline；基线对齐方式，默认值

img{ vertical-align：bottom；}解决方式是推荐的

写具体页面的时候或一个布局效果的时候：

1、写结构

2、CSS重置样式

3、写具体样式

float浮动

文档流：是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动元素，会挨着浮动的元素进行排列。

float取值

left right none

<!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>
        body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow; float: right;}
        #box2{ width: 200px; height: 200px; background: rgb(255, 0, 0); float: right;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

float注意点

只会影响后面的元素。

内容默认提升半层。

默认宽根据内容决定。

换行排列。

主要给块元素添加，但也可以给内联元素添加。

<!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>
        body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow;}
        #box2{ width: 200px; height: 200px; background: rgb(255, 0, 0);}
        #box3{ width: 300px; height: 300px; background: blue;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

<!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>
        /* body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow;}
        #box2{ width: 200px; height: 200px; background: rgb(255, 0, 0);}
        #box3{ width: 300px; height: 300px; background: blue;} */
        ul{ margin: 0; padding: 0; list-style: none; width: 300px; height: 300px; border: 1px black solid;}
        li{ width: 100px; height: 100px; background: red; border: 1px yellow solid; box-sizing: border-box; float: left;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div> -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

<!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>
        /* body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow;}
        #box2{ width: 200px; height: 200px; background: rgb(255, 0, 0);}
        #box3{ width: 300px; height: 300px; background: blue;} */
        ul{ margin: 0; padding: 0; list-style: none; width: 300px; height: 300px; border: 1px black solid;}
        li{ width: 100px; height: 100px; background: red; border: 1px yellow solid; box-sizing: border-box; float: left;}
        li:nth-of-type(1){ height: 120px;}
        li:nth-of-type(2){ height: 80px;}
        span:last-of-type{ float: right;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div> -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>aaaa</span><span>bbbb</span>
</body>
</html>

如何清除浮动

上下排列：clear属性，表示清楚浮动的，left、right、both

嵌套排列：

固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。

父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。

overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。

display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。

设置空标签：不推荐，会多添加一个标签。

after伪类：推荐，是空标签的加强版，目前各大公司的做法。

（clear属性只会操作块标签，对内联标签不起作用）

<!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>
        body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
   

    
</body>
</html>

<!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>
        /* body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;} */
        #box1{ width: 200px; border: 1px black solid; float: left;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
   <div id="box1">
         <div id="box2"></div>

   </div>
aaaaaa
    
</body>
</html>

<!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>
        /* body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;} */
        #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear{ clear: both;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
   <div id="box1">
         <div id="box2"></div>
         <div class="clear"></div>

   </div>
aaaaaa
    
</body>
</html>

<!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>
        /* body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;} */
        #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear:after{ content:''; clear: both; display: block;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
   <!-- <div id="box1">
         <div id="box2"></div>
         <div class="clear"></div>

   </div>
aaaaaa -->
     <div id="box1" class="clear">
        <div id="box2"></div>

     </div>
    aaaaaaa
</body>
</html>

<!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>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none;}
        img{ display: block;}
        a{ text-decoration: none; color: #666;}
        h1,h2,h3{ font-size: 16px;}
        .l{ float: left;}
        .r{ float: right;}
        .clear::after{ content: ""; display: block; clear: both;}
        #main{ width: 366px; margin: 20px auto;}
        #main.title{ height: 23px; line-height: 23px; font-size: 12px; font-weight: bold; padding-left: 30px; background: url(./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png) no-repeat 6px 4px , url(./链接的综合练习/images/1_1$9E\)DZTGL]KI[K68G4XK.png) repeat-x;}
        #main ul{ overflow: hidden; margin-top: 13px;}
        #main li{ margin-bottom: 22px;}
        #main .pic{ width: 99px; border:1px solid #c8c4d3;}
        #main .plc img{ margin: 2px;}
        #main.content{ width: 240px; margin-left: 13px;}
        #main .content h2{ font-size: 12px; line-height: 24px;}
        #main .content p{ font-size: 12px; line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
       <h2>外媒评论精选</h2>
       <ul>
        <li>
            <div class="pic">
               <a href="#">
                <img src="./链接的综合练习/images/(R34Y5B8@HM$B14TCE}W{@X.png" alt="">
               </a>
            </div>
            <div class="content">
                <h2>测试标题</h2>
                <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落<a href="#">[详细]</a></p>
            </div>    
        </li>
        <li>
            <div class="pic">
               <a href="#">
                <img src="./链接的综合练习/images/1_1$9E)DZTGL]KI[K68G4XK.png" alt="">
               </a>
            </div>
            <div class="content">
                <h2>测试标题</h2>
                <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落<a href="#">[详细]</a></p>
            </div>
        </li>
        <li>
            <div class="pic">
               <a href="#">
                <img src="./链接的综合练习/images/6X@B2JP7PM)9D}VGP}VLK]0.png" alt="">
               </a>
            </div>
            <div class="content">
                <h2>测试标题</h2>
                <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落<a href="#">[详细]</a></p>
            </div>
        </li>    
       </ul>
    </div>
</body>
</html>