当前位置: 首页 > news >正文

0314-布局遇到的问题(山东理工大)

注意事项:

布局:先用色块把整体布好。
id:唯一的(重复也不会错,同样的css可以加标号)
img:宽度和高度只设置一种,避免被拉伸

已解决:

兼容问题:什么时候该用绝对数值,什么时候用百分比,宽和高各怎么设等等都不太清楚,导致有点混乱,缩放时位置会移动。

解决方法:如果是屏幕宽度的div,先设一个100%的div,再套一个固定宽度的div,固定宽度里面的其他内容宽度可用百分比。

总结起来就是:大的div固定宽度,里面用百分比。

1.用图片做列表前缀可能会和文字不平齐,可以用背景图片的方法,再用背景图片的定位调整位置。

2.背景图片的居中:background-position:center(50%) center(50%)

3.宽度固定内容太挤的话缩放时可能自动换行

4.line-height设置单行垂直居中

5.设置一个只包含浮动元素的div时,如果下面还有其他内容,一定要给div固定高度。

6. 给整个页面设置(左)边距的时候是body{}而不是*{},要设置padding而不是margin

7. padding值不能为负

8.行内标签不能通过text-align;center实现文字居中,因为本身的长度是跟随内容的长度

9.对a和div的标签组合设置:hover:可直接通过a标签控制;如果通过div控制,需将div放到a标签里面

10.如果要图片不随缩放而改变,图片所在的div和图片本身都不要设高。如果只给div设高,图片不会改变,但会遮盖下面内容,如果也给图片设高,高度会缩放。

转载于:https://www.cnblogs.com/flypea93/p/8570341.html

相关文章:

  • java多线程处理导入数据拆分List集合 同步处理插入数据
  • 1011. A+B和C (15)
  • Pandora.js 视频介绍
  • display和position的值与用途
  • 吊销***用户
  • nginx 配置多 域名 + 多 https
  • 多城市将展开5G试点 启动车联网、物联网应用测试
  • 「镁客·请讲」影创孙立:AR市场规模正在急剧扩大,铺设线下体验店将成为2018年制胜关键...
  • Oracle游标属性
  • 用PHP开发企业Wifi网络Web认证系统(附源码)
  • ansible主机清单Inventory说明
  • JMeter正则表达式提取器
  • Java SPI(Service Provider Interface)简介
  • Git 企业中常用分支管理策略
  • Linux的overcommit配置
  • (三)从jvm层面了解线程的启动和停止
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • 【5+】跨webview多页面 触发事件(二)
  • Angular Elements 及其运作原理
  • CEF与代理
  • Docker容器管理
  • ES6语法详解(一)
  • exports和module.exports
  • express + mock 让前后台并行开发
  • HTTP 简介
  • node 版本过低
  • Nodejs和JavaWeb协助开发
  • PHP 7 修改了什么呢 -- 2
  • tab.js分享及浏览器兼容性问题汇总
  • vue总结
  • webpack+react项目初体验——记录我的webpack环境配置
  • WebSocket使用
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 来,膜拜下android roadmap,强大的执行力
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 我是如何设计 Upload 上传组件的
  • No resource identifier found for attribute,RxJava之zip操作符
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • 积累各种好的链接
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #AngularJS#$sce.trustAsResourceUrl
  • #include到底该写在哪
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • #传输# #传输数据判断#
  • (ZT)一个美国文科博士的YardLife
  • (定时器/计数器)中断系统(详解与使用)
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))
  • (学习日记)2024.04.04:UCOSIII第三十二节:计数信号量实验
  • (状压dp)uva 10817 Headmaster's Headache
  • (最简单,详细,直接上手)uniapp/vue中英文多语言切换