只因小黑子的HTML入土过程第三章

已于 2023-01-03 09:49:00 修改
阅读量168 收藏
点赞数
分类专栏： 前端 文章标签： html css css3
于 2022-11-04 18:18:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VanWot/article/details/127607296
版权

小黑子的HTML入土过程第三章

HTML+CSS系列教程第三章

3.15 标签群组通配等选择器

标签选择器(TAG选择器)
css:div{}           html:<div></div>
使用的场景:
1，去掉某些标签的默认样式时
2，复杂的选择器中，如层次选择器

群组选择器(分组选择器)：
css:div,p,span{}
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，
来达到代码的复用。

通配选择器
*{}->div,ul,li,p,h1,h2....
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景:
1，去掉所有标签的默认样式时

范例：

<style>
 div{background: red;}
  #text{background: red;}
.title{background: blue;}
<style>
<body>
 <div >这是一个段落</div>
   <p id="text">这是一个块</p>
   <h2 class="title">这是一个标题</h2>
   <body>

—>但是这样写style部分会有重复的类似代码比较麻烦

在这里插入图片描述
当颜色相同时简化代码：

<style>
div,#text{background: red;}
 .title{background:blue;}
<style>
<body>
 <div >这是一个段落</div>
   <p id="text">这是一个块</p>
   <h2 class="title">这是一个标题</h2>
   <body>

3.16 层次选择器

后代选择器：M N{}
父子选择器：M>N{}
兄弟选择器：M～N{}   使用当前M下面的所有兄弟N标签
相邻选择器：M＋N{}   使用当前M下面相邻的一个n标签

后代：
在选择器M下包含所有的后代,之外的则不会被选中

<style>
#list li{border:2px red solid;}
<style>
<body>
 <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>
   <body>

—>
在这里插入图片描述
父子：
M只选择孩子N，不选择孩子N的孩子

<style>
#list>li{border:2px red solid;}
<style>
<body>
 <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>
   <body>

—>
在这里插入图片描述
兄弟：
M只选择下面的兄弟N，和M上面的无关

<style>
 div~h2{background: red;}
<style>
<body>
  <h2>这是一个标题</h2>
   <div>这是一个段落</div>
   <p>这是一个块</p>
   <h2>这是一个标题</h2>
   <h2>这是一个标题</h2>
   <h2>这是一个标题</h2>
   <h2>这是一个标题</h2>
   <h2>这是一个标题</h2>
   <body>

—>
在这里插入图片描述
相邻：
M只会找下面相邻紧挨着的一个N，上面相邻的不管

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

—>无效果，因为不紧挨着
在这里插入图片描述

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

—>
在这里插入图片描述

3.17 属性选择器

在这里插入图片描述

属性选择器：
M[attr]0}
=：完全匹配
*=：部分匹配
^=:起始匹配
$=:结束匹配
[][][]:组合匹配

范例：

<style>
div[class] {background: red;}
<style>
<body>
 <div id="elem">aaaaaaaaa</div>
   <div class="search">bbbbbbbbb</div>
   <div class="box">ccccccccc</div>
   <div class="search-fuck">eeeeeeeee</div>
   <body>

—>全选class属性的
在这里插入图片描述

<style>
div[class*=search] {background: red;}
<style>
<body>
 <div id="elem">aaaaaaaaa</div>
   <div class="search">bbbbbbbbb</div>
   <div class="box">ccccccccc</div>
   <div class="search-fuck">eeeeeeeee</div>
   <body>

—>有search的都匹配
在这里插入图片描述

<style>
div[class^=search] {background: red;}
<style>
<body>
 <div id="elem">aaaaaaaaa</div>
   <div class="search">bbbbbbbbb</div>
   <div class="box">ccccccccc</div>
   <div class="search-fuck">eeeeeeeee</div>
   <div class="fuck-search">ddddddddd</div>
   <body>

—>^=选择开头有的属性，后面有不算
在这里插入图片描述

<style>
div[class$=search] {background: red;}
<style>
<body>
 <div id="elem">aaaaaaaaa</div>
   <div class="search">bbbbbbbbb</div>
   <div class="box">ccccccccc</div>
   <div class="search-fuck">eeeeeeeee</div>
   <div class="fuck-search">ddddddddd</div>
   <body>

—>选择以search在末尾结束的语句
在这里插入图片描述

3.18 伪类选择器

在这里插入图片描述

伪类选择器M:伪类{}
：link      访问前的样式     (只能添加给a标签)
: visited    访问后的样式    (只能添加给a标签)
: hover     鼠标移入时的样式 （可以添加给所有的标签)
: active     鼠标按下时的样式  (可以添加给所有的标签)
:after，:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked，:disabled ，:focus都是针对表单元素的
注:
一般的网站都只设置
a{}   (link visited active )    a:hoverd

范例：
1.

<style>
 a{color: gray;}
        a:hover{color: red;}
<style>
<body>
<a href="#">这是一个链接</a>
   <body>

—>点击前
在这里插入图片描述
—>点击后
在这里插入图片描述
2.

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

—>
在这里插入图片描述
3.

<style>
:checked{width: 110px;height: 110px;}
<style>
<body>
<input type="checkbox">
   <input type="checkbox" >
   <input type="checkbox" >
   <body>

—>点击前
在这里插入图片描述
—>点击后

在这里插入图片描述

<style>
:disabled{width: 110px;height: 110px;}
<style>
<body>
<input type="checkbox">
   <input type="checkbox" >
   <input type="checkbox" disabled>
   <body>

—>点进前
在这里插入图片描述
—>点击后
在这里插入图片描述

<style>
 :disabled{width: 110px;height: 110px;}
        :focus{background: red;}
<style>
<body>
 <input type="checkbox">
   <input type="checkbox" >
   <input type="checkbox" disabled>
   <input type="text" >
   <body>

—>点击前
在这里插入图片描述
—>点击后
在这里插入图片描述

3.19 结构伪类选择器

nth-of-type()         nth-child()
角标()是从1开始的，1表示第一项，2表示第二项, n值表示从6到无穷大
first-of-type         first-child
last-of-type          last-child
only-of-type          only-child
nth-of-type()和nth-child()之间的区别:
type :类型的意思
child :孩子的意思

范例：

<style>
 li:nth-of-type(2) {background: red;}
<style>
<body>
<li></li>
   <div>aaaaaa</div>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <body>

—>表示只在li中找第几个着色
在这里插入图片描述

<style>
 li:nth-child(2) {background: red;}
<style>
<body>
<li></li>
   <div>aaaaaa</div>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <body>

—>在li下选中第二个，但它第二个是div而不是li，故不显示
在这里插入图片描述

3.20 CSS的样式继承

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

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

范例：

<style>
 div{width: 300px;height: 330px;border: 2px red solid;color: greenyellow; 
 font-size: 50px;}
<style>
<body>
   <div>这是一个段落</div>
   <body>

—>
在这里插入图片描述
继承属性：inherit

<style>
 div{width: 300px;height: 330px;border: 2px red solid;color: greenyellow; 
 font-size: 50px;}
 p{border:inherit;}
<style>
<body>
   <div><p>这是一个段落</p></div>
   <body>

—>
在这里插入图片描述

3.21 单一样式的优先级

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

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

3．单一样式优先级：
style行间> id > class > tag > *（通配） >继承      
（cSS的权重指的是这些选择符的优先级）
注:style行间     权重1000
    id           权重100
    class        权重10
    tag          权重
    
4.!important 
提升样式优先级，非规范方式，不建议使用。
(不能针对继承的属性进行优先级的提升)

5．标签+类与单类
标签+类 〉单类

6.群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高。

7.样式权重等级
（1）！important 权重值为10000
（2）内联样式，如： style=“”，权重值为1000
（3）ID选择器，如：#content，权重值为100
（4）类、伪类和属性选择器，如：.content、：hover权重值为10
（5）标签选择器和伪元素选择器，如：div、p、：before权重值为1

8.层次优先级
1．权重比较
  并不是看谁的多就权重谁
   ul li .box p input{}   比如：1 +1 +10 +1 +1.
   hello span elem{}            10+1 +100
   谁数值高才算
   如果写100个低级同样的样式，是不是就可以比高级的优先了呢？
   其实并不是，100个标签加到一起也没有class的优先级高，1和10不是进制
 的意思，而是等级
   
2．约分比较（等级相同地约掉）
ul li .box p input{}    li p input{}
.hello span itelem{}    elem{}
注意：尽量不要写大于3个的，不然不符合语法

范例：
1.

<style>
.box{color: red;}
 #elem{color: green;}
<style>
<body>
<div id="elem"class="box">这是一个段落</div>
   <body>

—>明显id属性将class属性的覆盖了
在这里插入图片描述
2.

<style>
 #elem{color: green;}
        *{color: red!important;}
<style>
<body>
 <div id="elem" style="color: blue;">这是一个段落</div>
   <body>

—>！important让低级通配优先于style
在这里插入图片描述

3.22 CSS盒子模型

在这里插入图片描述

组成:content ->padding -> border -> margin
相当于：物品   填充物    包装盒     盒子于盒子之间的间距

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

padding :内边距(内填充)
     只写一个值:30px(上下左右)
     写两个值: 30px 40px(上下、左右)
     写四个值: 30px 40px 5opx 6opx(上、右、下、左)
     
单一样式只能写一个值:
     padding-left
     padding-right
     padding-top
     padding-bottom
     
margin :外边距(外填充)
     只写一个值: 30px(上下左右)
     写两个值: 30px 4opx(上下、左右)
     写四个值: 30px 40px 5opx 6opx(上、右、下、左)
     
单一样式只能写一个值:
    正值px表示隔开，负值px表示贴合
     margin-1eft
     margin-right
     margin-tnp
     margin-bottom

在这里插入图片描述

应用：

<!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{width: 300px;height: 200px;background: red;
    border: 15px blue solid; padding:30px 20px ;
    margin: 10px;}
    #box2{width: 300px;height: 200px;background:black;
    color: white; padding:30px ;}
</style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>
</html>

—>
在这里插入图片描述

<style>
    #box{width: 300px;height: 200px;background: red;
    border: 15px blue solid; padding:30px 20px ;
    margin: -20px;}
    #box2{width: 300px;height: 200px;background:black;
    color: white; padding:30px ;}
</style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>
</html>

在这里插入图片描述

3.23 box-sizing改变盒模型

box-sizing:
     盒尺寸，可以改变盒子模型的展示形态。
     
     默认值:
     content-box : width. height -> content     
     border-box : width、 height ->content padding border    
     (盒子的宽高由后面的来分配，越多分得越少）
使用的场景:
      1.不用再去计算一些值
      2．解决一些100%的问题

3.24 盒模型之margin的叠加问题

1. margin叠加问题，出现在上下margin同时存在的时候，会取上下中值较大
   的作为叠加的值。
2.不会左右叠加 。
解决方案:
1.BFC规范。
2想办法只给一个元素添加间距。

范例：
1.

<style>
    #box1{
        width: 200px;height: 200px;background: red;
       margin-bottom: 30px;
     }
    #box2{
        width: 200px;height: 200px;background: yellow;
       margin-top: 30px;
     }
</style>
</head>
<body>
      <div id="box1">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>

—>
在这里插入图片描述
2.

<style>
    #box1{
        width: 200px;height: 200px;background: red;
       margin-bottom: 30px;
     }
    #box2{
        width: 200px;height: 200px;background: yellow;
       margin-top: 70px;
     }
</style>
</head>
<body>
      <div id="box1">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>

—>取大的px，明显间距变大
在这里插入图片描述

3.24 盒模型之margin的传递问题

在这里插入图片描述

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

<style>
    #box1{
        width: 200px;height: 200px;background: red;
     }
    #box2{
        width: 100px;height: 100px;background: yellow;
       margin-top: 100px;
     }
</style>
</head>
<body>
     <div id="box1"><div id="box2">盒子</div></div>
</body>

—>加上margin-top之后，里面的边框将外层也一起带下去了
并没有实现只有里面边框在下
在这里插入图片描述
1.可以加边框解决

<style>
    #box1{
        width: 200px;height: 200px;background: red;
        border: 1px black solid;
     }
    #box2{
        width: 100px;height: 100px;background: yellow;
       margin-top: 100px;
     }
</style>
</head>
<body>
     <div id="box1"><div id="box2">盒子</div></div>
</body>

—>
在这里插入图片描述
2.把margin-to改成上一个paddin-top，再修改高度

<style>
    #box1{
        width: 200px;height: 100px;background: red;
     }
    #box2{
        width: 100px;height: 100px;background: yellow;
      
     }
</style>
</head>
<body>
     <div id="box1"><div id="box2">盒子</div></div>
</body>

—>
在这里插入图片描述

3.25 CSS盒子模型之扩展

扩展:
1. margin左右自适应是可以的﹐但是上下自适应是不行的。
(如果想实现上下自适应的话，需要在后面深入来进行学习)

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

<style>
#box1{
        width: 200px;height: 100px;background: red;
        padding-top: 100px; margin-left: auto; 
        margin-right: auto;
     }
</style>
</head>
<body>
     <div id="box1"></div>
</body>

—>居中效果
在这里插入图片描述
2.

<style>
#box1{
        width: 300px;height: 300px;background: red;
     }
#box2{ width:100%; height:100pX; background:blue;
     color:white; padding-left: 30px; border
     -left:1px black solid;}
</style>
</head>
<body>
    <div id="box1">
        <div id="box2">这是一些内容</div>
    </div>
    
</body>

—>
在这里插入图片描述
3.

<style>
#box1{
        width: 300px;height: 300px;background: red;
     }
     #box2{height:100pX; background:blue; color:white; 
     padding-left: 30px; border-left:10px black solid;}
</style>
</head>
<body>
    <div id="box1">
        <div id="box2">这是一些内容</div>
    </div>
    
</body>

—>不设置width时，系统自动计算填充
在这里插入图片描述

3.26 按类型划分标签

在这里插入图片描述

按类型
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．挨在一起，但是支持宽高
    
注:布局一般用块标签，修饰文本一般用内联标签

1.不写宽时，占满

<style>
#box1,#box2 {height: 200px;background: red;}
</style>
</head>
<body>
  <div id="box1">块1</div>
    <div id="box2">这是一些内容</div>
</body>

在这里插入图片描述
2.

<style>
  #content1,#content2 {width: 100px; height: 100px;
  background: red;}
</style>
</head>
<body>
 <span id="content1">内联1内联1内联1内联1内联1内联1</span>
    <span id="content2">内联2</span>
</body>

—>
在这里插入图片描述
or无空隙

<style>
  #content1,#content2 {width: 100px; height: 100px;
  background: red;}
</style>
</head>
<body>
 <span id="content1">内联1内联1内联1内联1内联1内联1</span><span id="content2">内联2</span>
</body>

—>
在这里插入图片描述

<style>
#box1,#box2 {height: 200px;background: red;}
input{width: 200px;height: 200px;}
</style>
</head>
<body>
  <div id="box1">块1</div>
    <div id="box2">这是一些内容</div>
    <input type="text">
    <input type="text">    
</body>

—>
在这里插入图片描述

3.27 按内容划分标签

在这里插入图片描述https://www.w3.org/TR/html5/dom.html

3.28 按显示内容划分标签

按显示：
替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容
    img、input ...
非替换元素:将内容直接告诉浏览器，将其显示出来。
    div、h1、p ...

范例：

<style>
img{width: 700px;height: 500px;}
input{width: 200px;height: 200px;}
</style>
</head>
<body>
     <img src="./图片/img/1.jpg(我的图片路径）" alt="">
    <input type="checkbox">
    <h1>标题</h1>
</body>

—>
在这里插入图片描述

3.29 display显示框类型

display: block，inline， inline-block， none
区别:
display:     none不占空间的隐藏
visibility:  hidden占空间的隐藏

范例：
1.

<style>
    div{width: 100px;height: 100px;background: red; display: inline;}
    span{width: 100px;height: 100px;background: red; display: block;}
</style>
</head>
<body>
         <div>块1</div>
    <div>块2</div>
    <span>内联1</span>
    <span>内联2</span>
</body>

—>display令块有了内联属性，内联有了块属性
在这里插入图片描述
2.

<style>
    div{width: 100px;height: 100px;background: red; 
    display: inline-block;}
    span{width: 100px;height: 100px;background: red;
     display: inline-block;}
</style>
</head>
<body>
         <div>块1</div>
    <div>块2</div>
    <span>内联1</span>
    <span>内联2</span>
</body>

—>inline令其都支持了宽、高，并且排成了一列
在这里插入图片描述
3.

<style>
    #box1{
        width: 300px;height: 100px;background: red;
        display: none;
     }
     #box2{width:300px;height:100pX; background:blue; color:white; }
</style>
</head>
<body>
<div id="box1">块1</div>
    <div id="box2">块2</div>
</body>

—>display：none效果，将红色的块1，隐藏不占空间
在这里插入图片描述

<style>
 #box1{
        width: 300px;height: 100px;background: red;
        visibility: hidden;
     }
#box2{width:300px;height:100pX; background:blue; color:
white; }
</style>
</head>
<body>
<div id="box1">块1</div>
    <div id="box2">块2</div>
</body>

—> visibility: hidden效果，将块1隐藏但占空间
在这里插入图片描述

3.30 标签的嵌套规范

例子：
ul、li
dl、 dt. dd
table、 tr、td
块能够嵌套内联 
  <div>
    <span></span><a href="#""></a></div>
块嵌套块
   <div>
      <span></span> <a href="#""></a> </div>
特殊:
p标签不能嵌套div标签
      错误的写法:<p>
                <div></div><p> 
内联是不能嵌套块
      错误的写法:
      <span><div></div></span>
 特殊:
     正确的写法:<a href="#"><div></div></a>
                <a href="#"><span></span> </a>          
     这样的好处：可以给一个区域加链接
     注（a标签不能嵌套a标签）

3.31 overflow溢出隐藏

overflow :
    visible :默认
    hidden
    scroll
    auto
    x轴、y轴
      overfloW-x、overflow-y针对两个轴分别设置

实现;
1.

<style>
div{width: 200px;height: 200px;border: 1px black solid;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
    </div>
</body>

—>不加overfl导致溢出边框
在这里插入图片描述

<style>
div{width: 200px;height: 200px;border: 1px black 
solid; overflow: hidden;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
    </div>
</body>

—>hidden的直接剪切隐藏
在这里插入图片描述

<style>
div{width: 200px;height: 200px;border: 1px 
black solid;overflow: scroll;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
    </div>
</body>

—>滚动条效果
在这里插入图片描述

<style>
div{width: 200px;height: 200px;border: 1px black solid;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
         溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
    </div>
</body>

—>只有右边有滚动条，并且再内容多到超过边框时才显示滚动条
在这里插入图片描述

3.32 透明度与手势

opacity : 0(透明)～1(不透明)
          0.5(半透明)  
     注:占空间、所有的子内容也会透明
     
rgba() : 0～ 1  
     注:可以让指定的样式透明，而不影响其他样式
     
cursor :手势
     default :默认箭头
     
要实现自定义手势: 
         准备图片:.cur . .ico
         cursor : url(./img/ cursor.ico)
         （自己定义的光标图） ,auto;

1.opacity

<style>
   div{width: 200px;height: 200px;background:red; 
   border: 1px black solid; opacity: 0.5;}
</head>
<body>
   <div>这是一个块</div>
    <p>这是一个段落</p>
</body>

—>透明化依旧占空间
在这里插入图片描述

<style>
   #div1{width: 200px;height: 200px;background:red;
   opacity: 0.5;}
    #div2{width: 200px;height: 200px;background: 
    rgba(255,0.5,0.5, 0.5);}
</head>
<body>
    <div id="div1">这是一个块</div>
    <p>这是一个段落</p>
    <div id="div2">这是一个块</div>
</body>

—>rgba只针对背景透明，对文字不影响
在这里插入图片描述

<style>
   div{width: 200px;height: 200px; rgba(255,0.5,0.5, 
   0.5);cursor: help;}
</head>
<body>
   <div>这是一个块</div>
</body>

—>
在这里插入图片描述

<style>
   div{width: 200px;height: 200px; rgba(255,0.5,0.5, 
   0.5);
    opacity: 0.5; cursor: pointer;}
</head>
<body>
   <div>这是一个块</div>
    <p>这是一个段落</p>
</body>

—>
在这里插入图片描述

3.33 最大最小宽高

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

%单位: 换算->已父容器的大小进行换算的

一个容器怎么适应屏幕的高: 容器加height:100%; 
                        body:108%;
                        htm1:100%;
  
html, body{ height : 100%;}
.contrainerheight : 100%;

<style>
   div{width: 200px;min-height: 200px;border: 1px red 
   solid}
</head>
<body>
  <div>
        这是一个内容 
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
    </div>
    
</body>

—>
原本：
在这里插入图片描述
设置了最小高度或宽度，那么超过了最小高度或宽度，就会自动调节
—>
在这里插入图片描述

<style>
   div{width: 200px;max-height: 200px;border: 1px red 
   solid}
</head>
<body>
  <div>
        这是一个内容 
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
        这是一个内容
    </div>
    
</body>

—>
原本
在这里插入图片描述
—>设置了最大高度或宽度，那么小于最大高度或宽度，就会自动调节
在这里插入图片描述

<style>
   #box1{width: 200px;height: 200px;background: red;}
    #box2{width: 100%;height: 80%;background: blue;}
</head>
<body>
 <div id="box1">
        <div id="box2"></div>
    </div>
</body>

—>%计算时根据父容器div1来进行
在这里插入图片描述
—>当其中一项高或宽没有时，就无效果
在这里插入图片描述

<style>
  body{ height : 100%;}
   #box1{width: 200px;height: 100%;background: red;}
    #box2{width: 100%;height: 80%;background: blue;}
</head>
<body>
 <div id="box1">
        <div id="box2"></div>
    </div>
</body>

—>根据body部分层层迭代
在这里插入图片描述

3.34 CSS的默认样式

没有默认样式的:div、span
有默认样式的:
body ->marign : 8px

h1 ->margin : 上下 21.440px
              font-weight : bold 
              
p->margin : 上下 16px

ul ->margin : 上下 16px padding :左 40px 
              默认点:list-style : disc
              
a ->text-decoration: underline;

3.35 CSS的重置样式

css reset :
   *{margin:0; padding:o;}
        优点:不用考虑哪些标签有默认的margin和padding
        缺点:稍微的影响性能
        body,p,h1,ul{ margin:0; padding:o;}
        
ul{ list-style : none;}

a{ text-decoration: none; color:#999;}

img{ dispaly: block}        
  问题的现象:图片跟容器底部有一些空隙。
    内联元素的对齐方式是按照文字基线对齐的，而不是文字的
    底线对齐。
    vertical-align: baseline; 基线对齐方式，默认值
    img{ vertical-align:bottom;} 解决方式是推荐的
    
写具体页面的时候或一个布局效果的时候:
  1．写结构
  2. css重置样式
  3. 3．写具体样式

<style>
ul{list-style: none;}
</head>
<body>
    <ul>
        <li></li>
    </ul>
     <a href=""></a>
</body>

原本是有默认点的
在这里插入图片描述

—>加了list-style：none就消失了
在这里插入图片描述

<style>
ul{list-style: none;}
a{text-decoration: none;color: #999;}
    a:hover{text-decoration: underline;color: red;}
</head>
<body>
    <ul>
        <li></li>
    </ul>
     <a href="">这是一个链接</a>
</body>

原本：
在这里插入图片描述

—>下划线消失，并且点击才出现下划线、变色
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<style>
img{ vertical-align: bottom; }
</head>
<body>
   <div><img src="./ img/dog.jpg" alt="" >xyz</div>
</body>

—>填充基线
在这里插入图片描述

3.36 flot浮动概念及原理

在这里插入图片描述
1.

<style>
    body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
    float: left;}
    #box2{width: 50px;height: 50px;background: yellow; float: left;}
    #box3{width: 200px;height: 200px;background: green;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

无浮动前：
在这里插入图片描述

—>向左进行了浮动，表示不占原来的位置了，沿着父容器body向左排列，而处于正常文档流的box3则替代了浮动文档的位置
在这里插入图片描述

<style>
    body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
    float: left;}
    #box2{width: 50px;height: 50px;background: yellow; float: left;}
    #box3{width: 200px;height: 200px;background: green;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

—>向右效果
在这里插入图片描述

<style>
    body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
    float: right;}
    #box2{width: 50px;height: 50px;background: yellow; float: right
    ;}
    #box3{width: 200px;height: 200px;background: green; float：left}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

—>当body父容器中无正常文档流时，设置的实线边框就不会撑开如例1的样子。
在这里插入图片描述

<style>
  body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
    float: right;}
    #box2{width: 50px;height: 50px;background: yellow; float: right;}
    #box3{width: 200px;height: 200px;background: green;float: right;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

—>按循序排列浮动
在这里插入图片描述

3.37 float注意点

1.只会影响后面的元素。
2.内容默认提升半层。
3.默认宽根据内容决定。
4.换行排列。
5.主要给块元素添加，但也可以给内联元素添加。

1.只会影响后面的元素

<style>
    body{border: 5px black solid;}
    #box1{width: 100px;height: 1000px;background: red;
        float: left;}
    #box2{width: 50px;height: 50px;background: yellow;}
    #box3{width: 200px;height: 200px;background: green;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

—>由于box2px比较小，故被覆盖，实际上在左上角的位置
在这里插入图片描述

or.

<style>
    body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
        }
    #box2{width: 50px;height: 50px;background: yellow;float: left;}
    #box3{width: 200px;height: 200px;background: green;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

—>
在这里插入图片描述

<style>
    body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
        }
    #box2{width: 50px;height: 50px;background: yellow;float: left;}
    #box3{width: 200px;height: 200px;background: green;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
   <div id="box3">文字文字文字文字
        文字文字文字文字文字文字文字文字文字
    </div>
</body>

—正常的大文档流上的字体不会被小的浮动文档遮盖，可以配合实现图文混排的效果
在这里插入图片描述
3.
原本：

<style>
   body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
        }
    #box2{width: 50px;height: 50px;background: yellow;float: left;}
    #box3{width: 200px;height: 200px;background: green;}
    #box4{background: orange;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
        <div id="box4">这是一个无框的块元素</div>
</body>

—>无添加宽高时，填充body基下
在这里插入图片描述

<style>
   body{border: 5px black solid;}
    #box1{width: 100px;height: 100px;background: red;
        }
    #box2{width: 50px;height: 50px;background: yellow;float: left;}
    #box3{width: 200px;height: 200px;background: green;}
    #box4{background: orange;}
</head>
<body>
     <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
        <div id="box4">这是一个无框的块元素</div>
</body>

—>单无添加宽高浮动时，其根据内容决定
在这里插入图片描述

原本

<style>
  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;}
</head>
<body>
  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

—>
在这里插入图片描述
（1）

<style>
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;}
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

—>浮动换行排列
在这里插入图片描述

（2）

<style>
    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;}
</head>
<body>
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

—>
在这里插入图片描述

（3）

<style>
    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;}
</head>
<body>
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

—>
在这里插入图片描述
4.

<style>
    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;}
</head>
<body>
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>aaaffff</span><span>bbbb</span>
</body>

—>内联元素也适用浮动
在这里插入图片描述

3.38 清除float浮动

如何清除浮动
上下排列:clear属性，表示清除浮动的，left、 right、 both
嵌套排列:
     固定宽高:不推荐，不能把高度固定死，不适合做自适应的效果。
     父元素浮动:不推荐，因为父容器浮动也会影响到后面的元素。
     overflow : hidden (BFC规范)，如果有子元素想溢出，那么
     会受到影响。
     display : inline-block(BFC规范)，不推荐，父容器会影响
     到后面的元素。
     设置空标签︰不推荐，会多添加一个标签。
     
     after伪类:推荐，是空标签的加强版，目前各大公司的做法。
        (clear属性只会操作块标签，对内联标签不起作用)

<style>
#box1{width: 100px;height: 100px;background: red;
float: left;}
#box2{width: 200px;height: 200px;background: blue;
clear: both;}
</head>
<body>
   <div id="box1"></div>
    <div id="box2"></div>
</body>

原本不加clear
在这里插入图片描述

—>加了clear：both / left / right将蓝色方块不受浮动影响
在这里插入图片描述

<style>
     #box1{width: 200px;border: 4px black solid; 
     overflow: hidden;}
     #box2{width: 100px;height: 200px;background: blue
     ;clear: left;}
</style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    fkfkfkffkfkffkfk
</body>

—>
在这里插入图片描述

<style>
     #box1{width: 200px;border: 4px black solid; 
    display: inline-block;}
     #box2{width: 100px;height: 200px;background: blue
     ;clear: left;}
</style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    fkfkfkffkfkffkfk
</body>

—>
在这里插入图片描述

<style>
     #box1{width: 200px;border: 4px black solid; }
     #box2{width: 100px;height: 200px;background: blue;float: left;}
     .clear{ clear:both;}
</head>
<body>
   <div id="box1">
        <div id="box2"></div>
        <div class="clear">zhes1</div>
    </div>
    fkfkfkffkfkffk
</body>

—>
在这里插入图片描述
当将div class属性标签的文字去除
在这里插入图片描述
5.

<style>
    #box1{width: 200px;border: 4px black solid; }
     #box2{width: 100px;height: 200px;background: 
     blue;float: left;}
     .clear::after{content:"";clear:both;display:block}
</head>
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
        
    </div>
    fkfkfkffkfkffk
</body>

原本：

.clear::after{content:"~~~~";clear:both;display:block}

—>
在这里插入图片描述

—>伪类空标签，清除浮动影响
在这里插入图片描述

小黑子史蒂夫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
爱坤小黑子游戏源码大全.zip
11-18
【标题】"爱坤小黑子游戏源码大全.zip" 提供的是一个包含多个游戏源码的集合，可能是一个小型游戏开发项目或者教学资源。从压缩包的名称来看，"爱坤小黑子"可能是游戏的主角或者项目的代号，而“大全”则暗示了包含...
论文研究 - 基于小波的多重分形分析太阳黑子数与太阳极场的关系
05-21
寻找太阳黑子数（SSN）与太阳极场之间的关系的兴趣日益浓厚。 通常，可以在复杂系统动力学的时间序列中观察到分形特性，例如太阳活动和气候。 本研究通过进行多重分形分析研究了SSN与太阳极场之间的关系。 为了研究...
只因小黑子的HTML入土过程第四章
VanWot的博客
11-19 187
只因小黑子的HTML入土过程第四章
只因小黑子的HTML入土过程第五章
VanWot的博客
11-26 212
只因小黑子的HTML入土过程第五章
只因小黑子的JavaScript入土过程第三章
VanWot的博客
01-13 424
小黑子的js入土（51-75）第三章
小黑子的HTML入土过程第二章
VanWot的博客
10-27 490
HTML入门教程第二章
只因小黑子的JavaScript入土过程第一章
VanWot的博客
01-11 511
只因小黑子的JS土过程（1-25）第一章
只因小黑子的HTML5和CSS3入土复习过程第三章
VanWot的博客
01-03 192
小黑子的HTML5+CSS3入土复习过程第三章
只因小黑子的JavaScript入土过程第四章
VanWot的博客
01-15 418
小黑子的js入土（76-106）第四章
只因小黑子的JavaScript入土过程第五章
VanWot的博客
01-20 312
小黑子入土的js第五章（107-161）长篇~~
只因小黑子的HTML5和CSS3入土复习过程第四章
VanWot的博客
01-05 473
小黑子的HTML5+CSS3入土复习过程第四章
小黑子专属游戏—迷你版.exe
12-17
小黑子专属游戏—迷你版.exe
matlab太阳黑子_matlab_太阳黑子_太阳黑子matlab_
10-03
标题中的“matlab太阳黑子_matlab_太阳黑子_太阳黑子matlab_”表明这是一个关于使用MATLAB处理太阳黑子数据的项目。描述提到“基于matlab，实现太阳黑子周期辐射信号周期的分析”，这暗示我们将讨论如何利用MATLAB...
太阳黑子数据
07-06
太阳黑子是太阳表面的一种暗区，它们比周围的太阳表面温度低，因此在观测时显得较暗。这些区域是太阳活动的重要标志，与太阳耀斑、日冕物质抛射等现象紧密相关。本资料包“太阳黑子数据（很全）”显然提供了全面的...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2650
title>充电效果
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 106
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
使用linux的mail命令发送html格式的邮件
zh515858237的专栏
07-10 426
2、然后修改/etc/mail.rc，在文件末尾增加以下内容，指定邮箱和授权码。1、关闭本机的sendmail服务或者postfix服务。3、然后通过命令来发送邮件。3、授权码的获取方式。
初识HTML
Dxito_的博客
07-09 939
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
小黑子html简易网页
03-30
小黑子的简易网页 h1 { color: black; font-size: 36px; text-align: center; margin-top: 50px; } p { color: grey; font-size: 24px; text-align: center; margin-top: 20px; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值