Html、CSS 学习 3.0

O_oregou

已于 2022-12-29 15:20:43 修改

阅读量377

点赞数

文章标签： vscode 学习 web 前端 css

于 2022-10-30 11:17:08 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/127595779

版权

文章目录

1.CSS样式的继承
2.CSS优先级
- 1.相同样式优先级
- 2.内部样式与外部样式
- 3.单一样式优先级
- 4. !important
- 5.标签+类与单类
- 6.群组优先级
- 7.层次优先级
3.CSS盒子模型
- content：内容区域
- padding：内边距(内填充)
- margin：外边距(外填充)
- box-sizing
- 盒子模型的一些问题
- - margin叠加问题：出现在上下margin同时存在的时候
  - margin传递问题：出现在嵌套的结构中，只是针对margin-top的问题
- 盒子模型的扩展
- - margin自适应
  - 不设置content现象
4.标签分类
- 按类型
- 按内容
- 按显示
- - 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
  - 非替换元素：直接写内容，将内容直接告诉浏览器，将其显示出来。
5.显示框类型
6.标签嵌套规范
- 块标签可以嵌套内联标签
- 块标签不一定能嵌套块标签
- 内联标签不可以嵌套块标签
7.溢出隐藏
- overflow
8.透明度与手势
- opacity
- rgba
- cursor
- - 自定义手势
9.最大和最小宽高
- min-width、max-width
- min-height、max-height
- %单位换算：以父容器的大小进行换算
10.CSS默认样式
11.CSS重置样式
- *{margin : 0 ; padding : 0 ;}
- ul{ list-tyle : none;}
- a{ text-decoration : none ; color : #666;}
- img{ display : block;}
12.float 浮动
- float特性
- float取值
- float注意点
- 清除float浮动

1.CSS样式的继承

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

<head>
    <style>
        div{width: 300px;height: 300px;border: 5px aqua solid;color: tomato;font: 30px 华文彩云;}
        p{border: inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

在这里插入图片描述

2.CSS优先级

1.相同样式优先级

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

2.内部样式与外部样式

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

3.单一样式优先级

style行间 > id > class > tag(标签) > *(通配) >继承

<head>
        <style>
            #div1{color: red;}
            #div2{color: red;font-family: 宋体;} .box{color: blue;font-family: 宋体;}
            .box3{color: blue;font-family: 宋体;} div{color: yellow;font-family: 宋体;}
            ul li{color: rgb(238, 15, 238);font-family: 宋体;} *{color: red;font-family: 华文彩云;} body{color: black;}   
        </style>
</head>
<body>
    <div id="div1" style="color: blue;font-family: 宋体;" >这是一个块</div>
    <div id="div2" class="box2">这是一个块</div>
    <div class="box3">这是另外一个块</div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>

在这里插入图片描述
权重：
style行间 1000
id 100
class 10
tag(标签) 1

4. !important

提升样式优先级，非规范方式，不建议使用（无法提升继承的优先级）

<head>
    <style>
        #div1{color: red !important;font-family: 华文彩云 !important;}
        *{color: aqua !important;}
    </style>
</head>
<body>
    <div id="div1" style="color: blue;font-family: 宋体;" >这是一个块</div>
</body>

在这里插入图片描述

5.标签+类与单类

标签 + 类 > 单类

<head>
    <style>
        div{color: blue;}
        div#div1{color: green;}
    </style>
</head>
<body>
    <div id="div1" class="box1">这是一个块</div>
</body>

在这里插入图片描述

6.群组优先级

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

7.层次优先级

1.权重比较
ul li .box1 p input{ } -------1+1+10+1+1
.box2 span #elem{ }------- 10+1+100
2.约分比较
ul li .box1 p input{ }-----------------li p input{ }
.box2 span #elem{ }----------------#elem{ }

3.CSS盒子模型

组成：content -> padding -> border ->margin
组成：物品---->内边距----->包装盒—>外边距

content：内容区域

由width和height构成

padding：内边距(内填充)

写一个值：30px (上下左右)
写两个值：30px 40px(上下，左右)
写四个值：30px 40px 50px 60px(上，右，下，左)
单一样式只能写一个值：
padding-top
padding-bottom
padding-left
padding-right

margin：外边距(外填充)

写一个值：30px (上下左右)
写两个值：30px 40px(上下，左右)
写四个值：30px 40px 50px 60px(上，右，下，左)
单一样式只能写一个值：
margin-top
margin-bottom
margin-left
margin-right

<head>
    <style>
        #box1{width: 200px;height: 200px;background: red;border: 10px blue solid;
        padding: 30px;
        margin-bottom:10px ;
        }
        #box2{width: 200px;height: 200px;background: gray;border: 10px green solid;
        padding: 30px;}
    </style>

</head>
<body>
    <div id="box1">这是一个盒子</div>
    <div id="box2">这是一个盒子</div>
</body>

在这里插入图片描述
注意：
1.背景颜色会填充到margin以内的区域(可以通过对border使用transparent颜色实验)(同样的背景图片也是填充到margin以内的区域)
2.文字会在content区域
3.padding不能出现负值，margin是可以出现负值

box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）| border-box。
盒尺寸，可以改变盒子模型的展示形态
默认值：
box-sizing：content-box：wigth、height -> content
改变后：
box-sizing：border-box：wigth、height -> content padding boder
使用场景：
1.不用再去计算一些值
2.解决一些百分比问题

盒子模型的一些问题

margin叠加问题：出现在上下margin同时存在的时候

当给两个盒子同时添加上下外边距的时候，就会出现叠加问题。这个问题，只在上下有，左右是没有这个叠加问题的。
例如：

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

同时存在上下外边距时候不叠加，只按较大的那个值显示
在这里插入图片描述
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距

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

margin传递的问题只会出现在嵌套的结构中，且只有margin-top有传递的问题，其他三个方向是没有传递的问题的。
解决方案:
1.BFC规范
2.给父容器加边框

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

在这里插入图片描述

3.margin换成padding

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

在这里插入图片描述

盒子模型的扩展

margin自适应

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

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

在这里插入图片描述

不设置content现象

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

<head>
    <style>
        #box1{width: 500px;height: 500px;background: red;}
        /* #box2{height: 200px;background: blueviolet;color: white;padding-left: 50px;border-left: 10px black solid;box-sizing: border-box;} */
        #box2{height: 200px;background: blueviolet;color: white;padding-left: 50px;border-left: 10px black solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">这是一些内容</div>
    </div>
</body>

在这里插入图片描述

4.标签分类

按类型

block：块

<div> <h1>...<h6> <p> <ol> <ul> <dl> <table> <address> <blockquote> <form>

1.独占一行
2.支持所有样式
3.不写宽的时候跟父元素相同
4.所占区域是一个矩形

inline：内联

常见的内联

<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code> <img>

1.挨在一起，左右并排
2.有些样式不支持，例如：width，height，marginpadding（支持左右，不支持上下）
3.宽由内容决定
4.所占区域不一定是矩形
5.内联标签之间会有空隙，是由于编码时换行产生的
解决 5. 的方式：可以在 style 里设置
body{ font - size : 0}
然后在内联的CSS里重新写入 { font - size : … }
注：布局一般用块标签，修饰文本用内联标签

inline-block：内联块

常见的内联块

<input> <td> <textarea> <select> <option>

同时具有内联和块的特性
例如：挨在一起，但支持宽高
例如：所占区域为矩形
例如：标签之间也会有空隙

按内容

Flow：流内容

Metadata：元数据

Sectioning：分区

Heading：标题

Phrasing：措辞

Embedded：嵌入的

Interactive：互动的

在这里插入图片描述
相关详情网址：
https://www.w3.org/TR/html5/dom.html

按显示

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

例如：img、input…

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

例如：div、h1、p…

5.显示框类型

display
display：block
display：inline
display：inline-block
display：none（使其在页面中不显示，不占空间的隐藏）
注：display：none 和 visibility：hidden 区别
display：none（不占空间的隐藏）
visibility：hidden（占用空间的隐藏）

6.标签嵌套规范

块标签可以嵌套内联标签

例如：

<div>
    <span></span>
    <a href="#"></a>
</div>

块标签不一定能嵌套块标签

错误示范：

<p>
    <div></div>
</p>

内联标签不可以嵌套块标签

组合需要嵌套规范
例如：
ul、li
dl、dt、dd
错误示范：

<span>
    <div></div>
</span>

特殊举例：

<a href="">
    <div></div>
</a>

a 还可以写入内联，但是 a 里面不能再写入 a

7.溢出隐藏

overflow

visible：默认
hidden
scroll
auto
x轴：overflow-x；
y轴：overflow-y；分别针对两个轴设置

8.透明度与手势

opacity

opacity：0（透明，看不见，但依旧占空间）～1（不透明）
0.5（半透明）
注意：占空间，所有的子内容也会变透明，对整体进行操作

rgba

rgba：0 ～ 1
0.5（半透明）
注意：可以让指定样式透明，而不影响其他样式

cursor

cursor：手势
常用手势：
cursor：pointer（手指）
cursor：help（鼠标加文号）
cursor：move（十字移动）
cursor：ne-resize（左下右上箭头）
cursor：ns-resize（向上向下箭头）
cursor：nw-resize（左上右下箭头）
cursor：zoom-in（放大镜）
cursor：zoom-out（缩小镜）
cursor：grab（手）

<head>
    <style>
        #div1{width: 100px;height: 100px;background: red ;opacity: 0.5;font-weight: bold;}
        p{margin:0 ;}
        #div2{width: 100px;height: 100px;background: rgba(255, 0, 0, 0.5);font-weight: bold;cursor: pointer
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <p>这是一个段落</p>
    <div id="div2">这是一个块</div>
</body>

在这里插入图片描述

自定义手势

准备图片： .cur、.ico
写法： cursor : url(图片地址) , auto；

9.最大和最小宽高

min-width、max-width

min-width：最小宽
max-width：最大宽

min-height、max-height

min-height：最小高
max-height：最大高

<head>
    <style>
        #div1{width:100px;min-height:100px;border: 3px red solid;}
        #div2{max-width: 200px;max-height:100px;border: 3px green solid;}
    </style>
</head>
<body>
    <div id="div1">
        这是一段内容 这是一段内容 这是一段内容 这是一段内容 
        这是一段内容 这是一段内容 这是一段内容 这是一段内容 
        这是一段内容 这是一段内容 这是一段内容 这是一段内容 
        这是一段内容 这是一段内容 这是一段内容 这是一段内容 
        这是一段内容 这是一段内容 这是一段内容 这是一段内容 
        </div>
        <div id="div2">这是一段内容</div>
</body>

在这里插入图片描述

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

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

在这里插入图片描述

10.CSS默认样式

有些标签带有默认样式，有些标签没有默认样式
没有默认样式的：
div、span…
有默认样式的：
body、h1…h6、p…
可以参考网址：http://www.mafengxue.cn/596.html

11.CSS重置样式

常用的重置样式

*{margin : 0 ; padding : 0 ;}

优点：不用考虑那些标签有默认样式的margin和padding
缺点：稍微的影响性能
也可以组合一起例如：body，p，h1，ul{ margin : 0 ; padding : 0 ;}

ul{ list-tyle : none;}

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

img{ display : block;}

问题现象：图片跟容器底部有一些间隙
内联元素的对齐
的基线对齐，而不是文字的底线对齐的。
vertical-align ：baseline；基线对齐方式的默认值
可以这样修改：
img { vertical-align : bottom;}

一般来说写具体页面的时候或一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式

reset.css参考链接:
https://blog.csdn.net/brain_bo/article/details/81560444

12.float 浮动

文档流

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

float特性

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

float取值

left
right
none（默认）

<head>
    <style>
        body{border: 1px black solid;}
        #box1{width: 200px;height: 200px;background: blue;float: left;}
        #box2{width: 200px;height: 200px;background: red;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

在这里插入图片描述

float注意点

1.只会影响后面的元素。

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

在这里插入图片描述

2.内容默认提升半层。

在这里插入图片描述

3.不加宽度时，默认宽根据内容决定。

在这里插入图片描述

4.换行排列。

<head>
    <style>
        ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
        li{width: 100px;height: 100px;background: red;float: left;border: 1px yellow solid;box-sizing: border-box;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

在这里插入图片描述

<head>
    <style>
        ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
        li{width: 100px;height: 100px;background: red;float: left;border: 1px yellow solid;box-sizing: border-box;}
        li:nth-of-type(1){height: 120px;}
        li:nth-of-type(2){height: 140px;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

在这里插入图片描述

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

<head>
    <style>
        p{float: right;}
    </style>
</head>
<body>
    <p>66666666666666666</p>
</body>

在这里插入图片描述

清除float浮动

利用clea属性清除float浮动

属性
clear：none; —说明：允许有浮动对象

属性
clear：right;—说明：不允许右边有浮动对象

属性
clear：left;—说明：不允许左边有浮动对象

属性
clear：both;不允许有浮动对象

固定宽高：不推荐，不能把宽高固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想要溢出，那么会受影响
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一些标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法