CSS-0816盒模型 标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面 媒体类型媒体特性opacity和背景色设置透明的区别
title: “CSS 0816”
date: 2022-08-16T11:18:25+08:00
文章目录
- title: "CSS 0816" date: 2022-08-16T11:18:25+08:00
- 盒模型
- 标准盒模型
- 怪异盒模型
- 怪异盒模型的应用
- 背景属性补充
- 小图标使用
- 两个小图标网站：
- 图标使用：
- 可变化单位
- meta元信息
- 浏览器内核(渲染机制)
- 响应式页面
- 媒体类型
- 媒体特性
- 补充
- opacity和background-color的透明区别
盒模型
标准盒模型
又叫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])加样式只让背景的颜色改变，不会改变字体的颜色。
CSS-0816盒模型 标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面 媒体类型媒体特性opacity和背景色设置透明的区别相关推荐
- 响应式设计 视口 viewport 媒体查询
响应式网页设计能让手机.平板电脑等均能获得完美的浏览体验,能够兼顾多屏幕.多场景的灵活设计,这与一次编写,到处运行有异曲同工的作用. 移动端设备的使用率虽然越来越高,但是计算机端用户也还有不少,基于这 ...
- 关于响应式页面的几种处理方法
2021-01-12 我本来还看了一些网页设计的课程,本来想找里面的一部分内容来着,结果怎么也找不到当时的笔记了,唉怪我自己没收好,生气 一.使用框架实现响应式 做响应式最简单方便的就是用现成的框架或 ...
- 跨终端响应式页面设计入门
跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里 ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- 网页布局 响应式页面
十二月二十九 1.网页布局 定义网站结构的模式 2.网页布局分为几个部分 头部区域 菜单导航 内容 底部 overflow:hidden溢出隐藏 disolay:flex弹性布局 justify-co ...
- 移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录 一.移动端自适应布局 1.rem 什么是rem ...
- 显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
- python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式 做 请求get 主要是获取数据 post 提交数据同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数get请求acce ...
- css响应式页面实现
响应式页面 概念部分 1.响应式页面的由来 在很久很久以前,我们做的网页只是为了PC端的观看.使用,直到2000年,2.5G手机的出现,人们可以通过手机来访问网络,使得服务商们纷纷做了另一套网页为手机 ...
最新文章
- webkit入门准备
- 反转字符串/列表、改变递归次数限制、else用法...Python 冷知识（四）
- 为什么我们需要比特币（BCH）
- python dataframe 新列_Python第二十四课：Pandas库（四）
- 设计模式笔记十四：责任链模式
- Android笔记 xml补间动画
- python 链表操作 优化_链表的内存优化
- 5393: YuYu的密码II
- 攒机笔记二十：改造笔记本电脑（华硕A555L）
- 推荐你身边的技术amp;产品女神加入我们，多重大礼送给你！
- Windows server 2012远程桌面会话主机和远程桌面授权。
- 《读者》的“卷首语” (二)
- JAVA基础––从类和对象开始
- Python探索之旅 | 第一部分第二课：安装Python和Python的常用开发软件
- matlab向量化 什么意思,什么是“向量化”？
- 我们的程序员为何你月薪达不到30K，奈若何？
- random.randint()用法
- 【Unity3D编辑器扩展】Unity3D中实现UI界面控制，UI界面的显示和隐藏实现
- 怎么快速的访问化学绘图软件文件
- 说说 input 输入框的事件