CSS-0816盒模型 标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面 媒体类型媒体特性opacity和背景色设置透明的区别

---

title: “CSS 0816”
date: 2022-08-16T11:18:25+08:00

盒模型

标准盒模型

又叫w3c盒模型：box-sizing:content-box;

总宽 = width + padding左右 + border左右

高度与之类似

怪异盒模型

又叫ie盒模型： box-sizing:border-box;

总宽 = width(内容区+padding+border)

高度与之类似

怪异盒模型的应用

1. 如果设置了宽高 然后又设置了padding或者border把盒子撑大的话，可以使用该属性
2. 元素浮动且加了边框的话，浏览器在缩小的时候会增大浮动元素的宽度，导致放不下掉下来，给该元素设置怪异盒模型,不受边框的影响

背景属性补充

1. css2背景图固定 background-attachment:scroll(滚动)/fixed(固定,图固定，内容板块正常滚)
2. css3背景图大小 background-size:宽度 高度
   • 数值px/%
   • cover 背景图放大 背景图不断放大且直到覆盖容器，可能会出现背景图显示不全的情况
   • contain 背景图放大 背景图不断放大，但是碰到容器的某个边缘之后就会停止放大，可能会出现留白区域
3. css3背景图显示位置 background-origin
   • padding-box 从padding区域开始显示,默认值
   • content-box 从内容区开始显示
   • border-box 从边框区域开始显示
4. css3背景图裁切 background-clip
   • padding-box 从padding区域开始裁切,之外部分不显示
   • content-box 从内容区开始裁切,之外部分不显示
   • border-box 从边框区域开始裁切,之外部分不显示 默认值

小图标使用

两个小图标网站：

• https://www.iconfont.cn/
• https://icomoon.io/app/

图标使用：

选到图标下载并解压后，选择到demo_index.html文件，打开之后按照网站上步骤引入到代码中即可使用。

注意：引入方式不同，在网页中的显示也不同

• css引入的图标是灰色的，但可以通过css代码改变样式
• js方式引入的图标是彩色的，也可以通过css代码改变样式
• 引入的图标都可以用css字体样式来改变其样式(颜色、大小等)。

可变化单位

1. %

   • 大部分的%参考的都是父元素
   • 绝对定位元素设置的百分数参考参考物
   • transform:translate变形位移和margin(margin也可以用百分数来设置)百分数参考自己

2. em 跟随当前元素的字体大小

   • 1em=16px; (默认值)

3. rem 跟随html(根元素)的字体大小

   • 1rem=16px; (默认值)

4. vw(viewport-width) vh(viewport-height) 参考当前可视窗口的大小

   • 1vw=可视窗口宽度1% (100vw=可视窗口宽度的100%)
   • 100vh=可视窗口高度的100%

   如果页面出现纵向滚动条，利用百分数或者vw设置和浏览器一样宽度时候

   • 100%只获取body的宽度，body的宽度不会包含滚动条的宽度
   • 100vw会获取整个可视窗口及滚动条区域的宽度，会偏大

meta元信息

1. 针对ie：在ie浏览器运行的时候以最高版本去解析

   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   

   http-equiv：网页请求头

   X-UA-Compatible：针对ie8及以后

   content="IE=edge" ie8及之后的版本都按照ie的最高版本解析(更改edge可更改IE浏览器版本)

2. 针对移动端设置: 主要是因为到移动端之后出现两个视口,一个是由设备宽高形成的可视视口，一个是默认的布局视口，布局视口一般宽度默认的大小为980px，css所作用的视口是布局视口

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

   viewport：视口

   width=device-width 设备宽度(可视视口的宽)和width(布局视口)设置为一样

   initial-scale=1.0 初始缩放比例 1 不缩放

浏览器内核(渲染机制)

• Trident内核 代表浏览器 ie
• Gecko内核 代表浏览器 fixfox
• Webkit内核 代表浏览器 谷歌、苹果Safari
• Blink内核 代表浏览器 Chrome(28及往后版本)、Opera(15及往后版本)
• Presto(废弃) 欧朋前内核

浏览器的前缀:css3属性刚出来的时候每款浏览器对该属性的支持不是很好,s所以浏览器自己在该属性前面加一个私有前缀

• -webkit-css3属性名: 谷歌
• -o-css3属性名: 欧朋
• -moz-css3属性名: 火狐
• -ms-css3属性名: ie

响应式页面

响应式页面:根据浏览器窗口大小,更改页面的样式

媒体查询

@media 媒体类型 and (媒体特性){
	更改的样式
}

媒体类型

1. all 所有设备
2. screen 显示器
3. print 打印设备

媒体特性

1. width 浏览宽
2. max-width 浏览器最大宽
3. min-width 浏览器最小宽
4. 多个媒体特性用 and 连接

注意：

• max-width:元素的宽度可以跟随父元素不断的变大，但是不会超过该值
• min-width:元素的宽度可以跟随父元素不断的变小，但是不能低于该值
• max-height:元素的高度由内容撑大，但是不能高于该值
• min-height: 元素的高度由内容撑大，但是不能低于该值

案例1：

/* css代码 */
*{margin: 0;}
div{
    background-color: pink;
    width: 100vw;
    height: 100vh;
}
/* 浏览器窗口大小在1000以下的时候 背景色变红色 */
@media screen  and (max-width:1000px){
    div{
        background-color: red;
    } 
}
/* 多个条件之间仍然可以用and连接，且每个值(条件)结束不能用分号 */
/* 浏览器窗口大小在500-700之间的时候 背景图蓝色 字体大小 50 */
@media screen and (min-width:500px) and (max-width:700px){
    div{
        background-color:blue;
        font-size: 50px;
    }

}
/*浏览器窗口大小在300以上 字体颜色变橙色  */
@media screen and (min-width:300px){
    div{
        color: orange;
    }        
}
/* 打印的时候 div 加一个边框 字体颜色变红色 */
@media print {
    div{
        border: 5px solid red;
        width: 200px;height: 200px;
        background-color: red;
    }
}

<!-- html代码 -->
<div>媒体查询</div>

案例2：

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

我认为用的最多的应该是案例2这种用法。

在使用该属性时需要注意的地方：

• 首先需要注意该属性的格式问题
• 其次是在使用该属性时要注意选中元素的选择器权重问题

了解更多：
菜鸟：https://www.runoob.com/cssref/css3-pr-mediaquery.html
MDN：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

补充

opacity和background-color的透明区别

• opacity给元素加样式时，元素里面的字体也会透明
• background给元素利用rgba(数值,数值,数值,透明度[0-1])加样式只让背景的颜色改变，不会改变字体的颜色。