第三周

标签：段落标签第三周 height width background div

标签选择器（分组选择器）
div{} ->选中所有的<div></di>标签

使用：去掉某些标签的默认样式时
复杂选择器中，如层次选择器

群组选择器
通过逗号的方式，给多个不同的选择器添加统一的css样式，来实现代码的复用，与分开用效果相同

<style>
        /* div{background-color: aqua;}
        #text{background-color: aqua;}
        .title{background-color: aqua;} */
        div, #text,.title{background-color: chartreuse;}
    </style>
</head>
<body>
    <div>第一个快</div>
    <p id="text">这位是一个段落</p>
    <h2 class="title">这是一个标题</h2>

</body>

通配选择器
给所有标签加同样样式

尽量避免使用
使用：去掉所有标签的默认样式

  *{border: 1px red solid;}

层次选择器

后代M N{}（中间空格）
在M中（里面的）寻找N加样式，起筛选作用

   #list li{border: red 1px solid;}
  .......
    <ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

在这里插入图片描述

（包括li中的ul中的li,可用id选择器选择)

父子M>N{}
只对下一代有用，再后面没用
#list> li{border: red 1px solid;}
兄弟M~N{}
当前M下的所有兄弟N标签（与

 div~h2{background: red;}

在这里插入图片描述

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

div+h2{background: red;}
........
 <h2>又一个标题</h2>
    <p>这是一段</p>
    <div>这是一块</div>
    <h2>这是一个标题</h2>

在这里插入图片描述

属性选择器

在这里插入图片描述

M[属性]{}
如 div[class]{background: red;}

=：class后可再加具体的如 div[class="box"]{background: red;}（完全匹配才行）

=： div[class*="search"]{background: red;}(有box就行）表示部分匹配

^=:起始匹配，起始位置是search

$=:结束匹配，结束位置是search

[][][]组合匹配:div[class][id]{background: red;}:既有class属性又有id属性才有效果

伪类选择器

实现一些特殊的功能，一般用于初始样式添加不上的时候
M：伪类{}
a:link 访问前的样式（只能添加给a标签）
a:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时改变样式（可以添加给所有的标签）
:active 鼠标按下改变的样式（可以添加给所有的标签）

注：一般网站都只设置
a{}和a:hover{}

hover
 <style>
        div{ width:200px; height: 200px;background:red ;}
        div:hover{background: blue;}
        div:active{background: green;}

    </style>
</head>
<body>
    <div></div>
</body>

红->蓝->绿

        a:link{color:red;}
        a:visited{color:blue;}
        a:hover{color: green;}
        a:active{color:yellow
         <a href="">这是一个链接 </a>

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

div:after{content: "world";color: red;}
<div>hello</div>

在这里插入图片描述

针对表单元素的
:checked
:disabled
:focus

:checked{width:1000px;height: 100px;}
        :focus{background: red;}
<input type="checkbox">
    <input type="checkbox" checked>
    <input type="checkbox">
    <input type="text">

在这里插入图片描述

结构性伪类选择器

nth-of-type() nth-child()
角标是从1开始的，1表示第一项，2表示第2项，n值表示从0到无穷大

利用n做隔行换色的需求
(n)：所有项
（2n)偶数项
(2n+1)奇数项

练习
（1）

<style>
        li:nth-of-type(3){background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述
（2）隔行换色

 li:nth-of-type(3n-2){background: red;}
        li:nth-of-type(3n-1){background: green;}
        li:nth-of-type(3n){background:green;}

在这里插入图片描述
first-of-type第一个
last-of-type最后一个
only-of-type只有一个的时候才有效果

li:first-of-type{background: red;}

区别
type:第n个li
child:第n个东西，可能不是li,就无效果

div:only-of-type{background:green;}
        /* li:nth-child(2){background: red;} */

    </style>
</head>
<body>
    <ul>
        <li></li>
        <div>aaaa</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

有效果，两个div无效果

2.25CSS样式继承

文字相关的样式可以被继承，布局相关的不可以

div{width:300px ;height: 300px; color:green ;border:1px red solid;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>

在这里插入图片描述
div中的文字样式如color可以被副元素继承，布局不能（默认，但可以设置继承属性inherit）

绝大多数样式都有inherit值

<style>
        div{width:300px ;height: 300px; color:green ;border:1px red solid;}
        p{border: inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

在这里插入图片描述

2.26CSS优先级

通过不同的选择器设置样式，显示谁

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

2. 内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，后写的引入方式优先级高
外部引入<link rel="stylesheet" href="./">

3. 单一样式优先级
style行间>id>class>tag>*>继承

权重1000，100，10，1......

 <style>
    #elem{color: red;}        /*id*/
    .box{color:blue}          /*class*/
    div{color: green;}        /*标签*/
    *{color:gold}             /*通配*/
    body{color:blueviolet}    /*继承*/
    </style>
    <link rel="stylesheet" href="./">   外部样式
</head>
<body>
    <!-- <div id="elem" style="color: blue; ">这是一个块</div>             /*style行间*/ -->
    <div class="box">这是一个块</div>
</body>

4. 优先级改变

!important:提神样式优先级，非规范写法，尽量不用（无法让继承的属性提高优先级）
如div{color: green ！important;}
标签+类与单类
标签加类高于单类
如.box{color:} < div.box{color:}
群组优先级
(选择器相同）群组选择器与单一选择器的优先级相同，靠后写的优先级高。

5. 层次优先级 （层次选择器）
层次：如ul,li,.box,p,input

权重比较
用权重的累加进行比较
如ul,li,.box,p,input{}=1+1+10+1+1
< .hello,span,#elem{}=1+10+100
100个1也<10(等级不一样）
约分比较
如 ul,li,.box,p,input{} >>>> li,p,input
.hello,span,#elem >>>>>>#elem
注：层次选择器尽量三层以内

2.27CSS盒子模型

在这里插入图片描述

1. 组成（内到外）：content(物品）->padding（填充物）->border（包装盒）->margin（外填充，盒子与盒子之间的间距）

content:内容区域 width和height组成的
padding:内边距（内填充）
number:30px
写一个值：30px上下左右
写两个值:10px 上下、左右
写四个值：30px,40px,50px,60px上右下左
#box{width: 100px;height: 100px;background: red;border: 10px blue solid;padding-left: 10px ;}
单一样式（只能写一个值） padding-left:设置左内边距（right，top，bottom）
padding为蓝黄间的部分
margin:外边距（外填充）盒子间的间距
如 #box{width: 100px;height: 100px;background: red;border: 10px blue solid;padding-left: 10px ;margin：10px}
用法同内填充

2. 注意

背景颜色会填充到marign以内的区域（不包括）margin
文字在content区域添加
padding不能为复数，margin可以让两个盒子重合

3. box-sizing

在这里插入图片描述
解释:盒尺寸，可以改变盒子模型的展示形态
如height.width如何分配

contect-box:width,height->content(默认）
border-box:width,height->content,padding,border
用处：
（1）不用再计算一些值，如计算如何让分配大小
（2）解决一些百分比的问题
如

 input{width: 100%;padding:30px}
    </style>
    <body>
    
     <div id="box盒子">这是一个</div> 
     <input type="text">

因为有padding会出现滚动条，改成,就不会了（不用进行CSS计算)

4. 盒子模型的问题

margin的叠加
上下边距都存在时，左右不存在这种问题
如

<style> 
    #box1{width: 200px;height: 200px;background: red;margin-bottom: 30px;}
    #box2{width: 200px;height: 200px;background: blue;margin-top: 30px;}
    </style>
</head>
<body>
    <div id="box1"></div> 
    <div id="box2"></div> 
</body>

边距不会变为30+30=60，仍然是30
根据大的那一方来
解决（1)BFC规范
（2）调整数值吧就，尽量只给一个元素添加边距

margin传递
出现在嵌套的结构中，只是针对margin-top的问题（别的没有）

 <style>
        #box1{width: 200px;height: 200px;background: red;}
        #box2{width: 100px;height: 100px;background:blue;margin-top: 100px;}

    </style>

</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

对小块进行magrin-top效果，大块也进行了位置变化

解决：
（1）BSC
（2）给父容器加边框

<style>
        #box1{width: 200px;height: 200px;background: red;border: 10px black solid;}
        #box2{width: 100px;height: 100px;background:blue;margin-top: 100px;}

    </style>

</head>
<body>
    <!-- <div id="box1"></div> 
    <div id="box2"></div>  -->
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

在这里插入图片描述
（3）将margin换为padding
加在父容器上并重新算高度

<style>
        #box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
        #box2{width: 100px;height: 100px;background:blue;}

    </style>

在这里插入图片描述

5. 盒子模型扩展

margin的自适应：auto，无论屏幕大小，上下不行
右边自适应，靠最左margin-right: auto;
左边自适应，靠最右margin-left: auto;
左右自适应，居中margin-right: auto;margin-left: auto;
不设置content的现象
width,height不设置时对盒子模型的影响
width不设置时，加border,padding等时width会自动计算并铺满父容器

嵌套练习

<style>
      #box1{width:350px ;height: 350px;border: 1px black dashed;padding: 27px;}
      #box2{border: 5px solid #d7effe;padding: 20px;}
      #box3{background: #ffa0df;padding: 41px;}
      #box4{border: 1px dashed white;padding: 3px;}
      #box5{border: 1px dashed white;padding: 49px;}
      #box6{width:100px; height:100px;background: #96ff38; border: 5px solid #fcff00; }
      

    </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>

在这里插入图片描述

第三部分

3.1 标签分类

1. 按类型划分标签

block块:
（1）独占一行，不会有两个块在一行
（2）支持所有样式
（3）不写宽时与父元素的宽相同
（4）所占区域为矩形
如. div,p,ul,li,h...
inline内联：
(1)挨在一起，可以多个一行
(2）有些样式不支持
(3)不写宽时，宽度有内容决定
(4)所占区域不一定为矩形，根据内容来
(5)内联标签间有空隙，原因：换行产生
如 span,a,em,strong,img.....
img特别支持宽高
注：用div布局，修饰文本用内联，所以没关系
解决：
inline-block:基本为表单
具备内联和块的特性
（1）挨在一起，支持宽高
（2）不能折叠，保持矩形结构
如 input,select...

按内容划分标签

https://www.w3.org/TR/html5/dom.html
按显示划分标签

替换元素
如****img,input
非替换元素
如h，div,p
显示框类型display
改变显示框的默认类型

display:block/inline/inline-block/none;

display:none表示不显示
（区别none不占空间的隐藏
visibility:hidden；占空间的隐藏）

3.2标签嵌套规范

要按规范的一些
如 ul、li
dl、dt、dd
table、tr、td
块标签可以嵌套内联标签
块标签不一定能嵌套块标签
大部分都可以，特殊如p标签不可以
内联标签大部分不能嵌套块标签
特殊如a嵌套div可以，因为规定a是透明的，会显示div中的内容

<a herf="#">
<div></div>
</a>

a中不能嵌套a

3.3溢出隐藏overflow

visible:默认，内容多时会溢出
hidden:隐藏，到了边界直接切掉
scroll:不管内容多少都会出现滚动条
auto：内容多才会显示滚动条
x轴，y轴：overflow-x/y:.....针对x,y轴分别设置

3.4透明度与手势

1. 透明度

opacity
0(透明）~1（不透明)
0.5半透明
- 透明是也占空间
- 所有的子空间也会透明
rgba
rgba():0~1(最后一个数字）
- 可以让指定的样式透明，不影响子空间

手势cursor（鼠标样式）

default:默认箭头
pointer:手型
move:可移动
help:箭头加问号
自定义
准备图片.cur、.ico格式
cusor:url(./......),auto;

3.5最大、最小宽高

宽高会自适应
min:框最小的值，会自己变大
max:框最大的值，会自己变小，太多依然溢出

min-width、max-width
min-height、max-height

注：强化对百分比的理解
换算：百分比以父容器的大小进行换算
父容器没有大小时就都没有了（爷爷不行）

一个容器怎么适应屏幕的高

html,body{height:100%;}
.contrainer{height:100%;}

3.6 CSS默认样式

有些标签有默认样式，有些标签没有

没有
div、span...
2.有
body、h、p、ul...

3.7CSS重置样式reset

```
*{margin:0;padding:0;}
```

优点：不用考虑哪些标签有默认的margin、padding
缺点：稍微的性能影响，效果无影响

单独提出来去掉默认样式
body,p,h1,ul{margin:0;padding:0;}
ul{list-style:none;}去点
链接默认为蓝色且有下划线，改变：

a{text-decoration:none;color:....}
a:hover{text-decoration:underline;color}

鼠标移入时

5.图片插入时与容器底有空隙，因为对齐方式是按文字基线而不是底线
img{vertical-align:baseline基线对齐默认}
bottom：底线对齐
将图片转为块display:block;

写具体页面时
写结构->CSS重置样式->写具体样式

3.8float浮动

文档流 ：结构的排列方式
float浮动

{float:left/.....}沿着父容器浮动不会影响父容器
都脱离文档流，边框变为一条线
注意点

只会影响后面的元素，对浮动前的不造成任何影响
内容默认提升半层
文字不会跑到红色中，形成图文混排效果
加了float默认宽根据内容决定,不加时宽默认同body
换行换列
浮动的元素在父容器下排列不下的时候，会自动折行
主要给块元素添加，但也可以给内联元素添加

清除浮动
要多个浮动元素不受影响要清浮动

上下排列：clear属性，表示清除浮动的left、right、both（左、右）(浮动的块依然浮动在文档流外）
clear:left.....
所有块脱离文档流，父容器会变成一条线
解决：
（1）固定父容器宽高
（不推荐，因为不能自适应）
（2）父元素浮动
让父容器浮动和子元素在同一层，但也会影响后面的元素（不推荐）
（3）overflow:hidden(BFC规范）
如果有子元素溢出会受到影响，会把溢出的内容截掉
（4）display:inline-block(BFC）也会影响后面元素（不推荐）
（5）设置空标签
好，但不推荐，会多添加一个标签

.clear{clear:both;}
<div class="clear"></div>

（6）after伪类（推荐）
空标签的加强版

.clear:after{content:;clear:both;display:block}
父容器<div class="clear"></div>

可将content看作一个空标签
注：clear属性只会操作块标签，对内联标签不起作用，所以加display

练习

<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: 360px; margin: 20px auto;}
        #main.title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;background:url(./....) no-repeat 6px 4px, url(./)repeat-x;}   /*写了宽度加padding块会变大*/
        #main ul{overflow: hidden;margin-top: 113px;}
        #main li{margin-bottom: 22px;}
        #main .pic{width: 99px;border: 1px solid #c8c4d3;}
        #main .pic img{margin: 2px;}
        #main .content{width: 240px;font-size: 12px;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 class="title">外媒精选评论</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a herf="#">
                        <img src="./屏幕截图 2022-11-03 200921.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题测试标题</h2>
                    <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落。。。。
                      <a href="#">[详细]</a>  
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a herf="#">
                        <img src="./屏幕截图 2022-11-03 200921.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题测试标题</h2>
                    <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落。。。。
                      <a href="#">[详细]</a>  
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a herf="#">
                        <img src="./屏幕截图 2022-11-03 200921.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题测试标题</h2>
                    <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落。。。。
                      <a href="#">[详细]</a>  
                     
                    </p>
                </div>
            </li>
        </ul>
    </div。
</body>

标签：段落,标签,第三周,height,width,background,div
From： https://www.cnblogs.com/bujiatangaa/p/16855762.html

2.25CSS样式继承

2.26CSS优先级

2.27CSS盒子模型

第三部分

3.1 标签分类

3.2标签嵌套规范

3.3溢出隐藏overflow

3.4透明度与手势

3.5最大、最小宽高

3.6 CSS默认样式

3.7CSS重置样式reset

3.8float浮动

相关文章

赞助商

阅读排行