css个人思考

---恢复内容开始---

(1)div默认是占满整行的,如果设置了float的话,他就不会占满整行,而只会随里面的内容多少而显示多少。

(2)如果要设置将两个div显示在同一行,只需要增加float属性,而不需要设置外层div的宽度,他会自动适应撑开,也没有必要设置里面的两个div的宽度。

如果设置了外层div的宽度,而里面的两个div的宽度是大于最外层的宽度的话,就会掉下来。

最好的方法就是设置两个div的属性为行内元素。

这种完全不需要设置两个div可以直接用span来做。尽量不要用浮动,会存在问题。

布局的时候要坚持越简单越好,千万不要弄得很复杂,按自己的思路去想。

(3)下拉菜单可以在li里面的div设置成绝对定位,这样就脱离了文档流,显示时不会将li撑开。

---恢复内容结束---

时间: 2024-08-17 13:19:38

css个人思考的相关文章

vue/react/angular开发的css架构思考

前端开发现在已经从传统的后端web多页面开发模式转向前端单页SPA开发模式,而vuejs/react/angular则是开发SPA非常优秀的前端框架.组件化开发由react最早提出,vuejs后发优势,将组件化开发贯彻到了极致.虽然spa开发由于组件式开发带来的组件重用,可维护,可扩展非常好,但是css样式的管理一直是一个令前端团队头疼的问题,特别是当页面越来越复杂,并且有多个SPA页面时如何能够让样式重用,并且可维护,可扩展并没有一个特别有效和被验证过的普适方案.本文试图总结一些css模块化在

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

响应式网格(栅格化)布局总结

任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项 网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

关于css的新思考

因为被派去协助别的组,有机会写了一下react,发现ICE做的那一个套件用来搭建后台系统真的太给力了(插一句必入table组件其实是可以把删除添加座位基础方法加进去的).因为看了demo的代码以及对于jsx语法的不熟悉,所以一时不知所措把css写在哪里才发现react对于css的处理已经不同于原来传统对于css的定义了,参考这篇文章 react很核心的思想就是:1. 数据和ui分层:2. 组件化:第二点其实也是建立在第一点之上的,在后台系统中的运用简直太合适了,跟我当时在考拉的时候想做的是差不多

关于CSS反射倒影的研究思考

原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示demo的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有一定难度.而我本人学识有限,加之时间仓促,所翻译内容可能有不恰当及晦涩之处.欢迎大家拍砖指正. 我最近在codepen上看到了这个 加载程序,一个纯CSS制作的带有渐变反射的3D旋转竖条.它的制作方法是:为每个竖条创建一个元素,然后通过复制每一个元素来创建反射倒影,最后在反射倒影上添加渐变背景来创建渐隐

先学习Emmet(zend coding)然后引发css 或者jquery选择器的思考

1.使用VS或者其他编辑器开发HTML快速编码.使用emmet这种简单易用的语法无疑是最快捷的 首先来看这段代码记住这个基本上emmet就会用了,记住光标放到表达式的尾部按下tab键 1 <!-- 2 html:5 3 1. E 代表HTML标签. 4 2. E#id 代表id属性. 5 3. E.class 代表class属性. 6 4. E[attr=foo] 代表某一个特定属性. 7 5. E{foo} 代表标签包含的内容是foo. 8 6. E>N 代表N是E的子元素. 9 7. E+

关于CSS中隐藏内容方法的思考

正在读<精通CSS>,很多样式需要用到内容隐藏,比如平时无内容,鼠标悬停时显示出内容.书中常用的方法是用text-indent:-1000em.margin-left:-1000em将元素隐藏到屏幕边缘之外,而display:none和visibility:hidden.overflow:hidden也可以做到隐藏,那么这几种用法有哪些利弊呢? 1.display:none; 搜索引擎可能认为被隐藏的元素属于垃圾信息而忽略,不利于SEO:屏幕阅读器会忽略被隐藏的元素. 2.visibility

CSS组件化思考

为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): 第二级是组件层,项目中出现两次及以上的样式单独抽离成一个组件,如果组件小于15个,单独放到一个component.less文件中,大于15个(界限自己把握),考虑放到几个不同的less文件中.因为样有些样式依赖于一定的DOM,所以需要针对less文件写一个HTML文件一一对应后于组件对应的DOM:

CSS的一些思考(一)

迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个瓶颈期吗?每天努力工作,也去花时间学习基础知识,只是每次运用的似乎更多的是经验的积累:熟悉各个CSS属性,基本盒模型,兼容性问题如何修复熟悉等.然而,CSS的属性就那么多,如果只是了解每个CSS属性名称.属性值上来看,肯定会有一天达到饱和的.觉得似乎没有什么新的东西可学了,CSS的那点东西我都知道了,似乎工作