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)
高度与之类似
怪异盒模型的应用
- 如果设置了宽高 然后又设置了padding或者border把盒子撑大的话，可以使用该属性
- 元素浮动且加了边框的话，浏览器在缩小的时候会增大浮动元素的宽度，导致放不下掉下来，给该元素设置怪异盒模型,不受边框的影响
背景属性补充
- css2背景图固定 background-attachment:scroll(滚动)/fixed(固定,图固定，内容板块正常滚)
- css3背景图大小 background-size:宽度 高度
- 数值px/%
- cover 背景图放大 背景图不断放大且直到覆盖容器，可能会出现背景图显示不全的情况
- contain 背景图放大 背景图不断放大，但是碰到容器的某个边缘之后就会停止放大，可能会出现留白区域
- css3背景图显示位置 background-origin
- padding-box 从padding区域开始显示,默认值
- content-box 从内容区开始显示
- border-box 从边框区域开始显示
- 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字体样式来改变其样式(颜色、大小等)。
可变化单位
-
%
- 大部分的%参考的都是父元素
- 绝对定位元素设置的百分数参考参考物
transform:translate变形位移和margin(margin也可以用百分数来设置)百分数参考自己
-
em 跟随当前元素的字体大小
- 1em=16px; (默认值)
-
rem 跟随html(根元素)的字体大小
- 1rem=16px; (默认值)
-
vw(viewport-width) vh(viewport-height) 参考当前可视窗口的大小
- 1vw=可视窗口宽度1% (100vw=可视窗口宽度的100%)
- 100vh=可视窗口高度的100%
如果页面出现纵向滚动条，利用百分数或者vw设置和浏览器一样宽度时候
- 100%只获取body的宽度，body的宽度不会包含滚动条的宽度
- 100vw会获取整个可视窗口及滚动条区域的宽度，会偏大
meta元信息
-
针对ie：在ie浏览器运行的时候以最高版本去解析
<meta http-equiv="X-UA-Compatible" content="IE=edge">http-equiv：网页请求头X-UA-Compatible：针对ie8及以后content="IE=edge"ie8及之后的版本都按照ie的最高版本解析(更改edge可更改IE浏览器版本) -
针对移动端设置: 主要是因为到移动端之后出现两个视口,一个是由设备宽高形成的可视视口，一个是默认的布局视口，布局视口一般宽度默认的大小为980px，css所作用的视口是布局视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport：视口width=device-width设备宽度(可视视口的宽)和width(布局视口)设置为一样initial-scale=1.0初始缩放比例 1 不缩放
浏览器内核(渲染机制)
Trident内核 代表浏览器 ieGecko内核 代表浏览器 fixfoxWebkit内核 代表浏览器 谷歌、苹果SafariBlink内核 代表浏览器 Chrome(28及往后版本)、Opera(15及往后版本)Presto(废弃) 欧朋前内核
浏览器的前缀:css3属性刚出来的时候每款浏览器对该属性的支持不是很好,s所以浏览器自己在该属性前面加一个私有前缀
-webkit-css3属性名: 谷歌-o-css3属性名: 欧朋-moz-css3属性名: 火狐-ms-css3属性名: ie
响应式页面
响应式页面:根据浏览器窗口大小,更改页面的样式
媒体查询
@media 媒体类型 and (媒体特性){
更改的样式
}
媒体类型
- all 所有设备
- screen 显示器
- print 打印设备
媒体特性
- width 浏览宽
- max-width 浏览器最大宽
- min-width 浏览器最小宽
- 多个媒体特性用 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])加样式只让背景的颜色改变，不会改变字体的颜色。