Html&CSS 今日心得
今天和秋秋一起review了一下我自己写的登录页面。她给我提了几个point,对我很有启发。
css样式的代码和html代码分离。
我自己做的时候是在google console里面调好了样式以后就直接copy到了对应的tag里,而不是在css中通过selector来找到元素后设置样式。
这样的做法我感觉和java代码中同样的函数在个各类中反复出现有些类似。将html和css完全分离开来有几个好处:
逻辑上,看html代码的时候不用关心它对应的样式,而只用关心html的结构;
另外在以后修改的时候,这样的做法就避免了需要到多处去寻找相应的地方修改。例如:我想修改<div class="example">...</div>这个div的样式时,如果我有部分样式是写在html里,有部分写在了css里,甚至我都不确定哪些在html哪些在css里,我就必须检查两个文件。但是若将html和css很明确的分隔开来,修改的时候就省下了不少麻烦。
border设置
在设置border时我是这样做的:
border-style: solid;
border-width: 1px;
border-color: gray;
今天才知道这样就OK了:
border:1px, solid, gray
padding和margin的区别
我想把两个元素之间的间隔距离拉大,使用了padding。但其实更好的做法是使用margin。padding和margin的区别是:
简单的说padding是内容和边框的间隔,而margin是元素和元素之间的间隔。也就是说如果我用了padding来加大元素间的间隔,当元素的背景和大背景相同时确实是达到了效果,但是其实这两个元素的border还是挨在一起的。而当使用margin的时候才真正的将两个元素从border到内容分割了开来。
margin的使用
margin: 10px, 20px, 10px, 20px; ->对应的是上,右,下,左,也就是上下10px,左右20px
margin: 10px, 20px; ->对应:上下,左右,效果同上
margin: 10px, 20px, 30px;->对应:上10px,左右20px,下30px
margin还可以使用auto方法来自动设置,但是使用auto时必须同时给该元素设置width,否则margin并不知道如何进行自动的设置:
margin: 0 auto;
width: 1170px;
这样的效果是:元素宽为1170px,两边的间隔将自动设定。
overflow-hidden的使用
自己实践的时候已经发现了需要使用overflow-hidden来清样式,这样上一层的样式才不会影响到下面的元素的样式。但是我的使用方法是在需要clean flow的地方显示的写出了overflow-hidden。
我认为这样做并没有大的问题,只是这样一来css中增加了很多重复代码。
解决方法是在需要clean flow的tag下加上一个clear-float的class:
/*style.css中*/
.clear-float {
overflow: hidden;
}
/*login.html中*/
<div class="footer clear-float"> …</div>
position的使用
我认为position相对于别的样式来说相对复杂,因为它很难调到自己满意的样子。position使用的时候,将会把当前的元素从context flow里单独拿出来设置样式,这样造成的一个结果就是后面的元素就不会根据html的context flow来为该使用了position的元素留出位置。因此,在使用position的时候一定要记得给元素显示的设置width和height。
postion有三个属性:fixed,relative,absolute。总结来说:
fixed:相对浏览器的位置固定。
relative:相对定位元素会相对于它在正常流中的默认位置偏移。
absolute:相对于static定位以外的第一个父元素进行定位。
总结
以前总觉得html很简单,css很麻烦。其实都错了,html有很深的讲究,实现同样的结构使用的html有好有坏,好的html是结构清晰调理分明的,让人一眼就能明白整体结构和各部分语义。css看起来很复杂,需要不停的调整来达到自己想要的效果,但是其实也有很多的方法需要更多的实践和练习去发现和熟悉。
html和css也需要保持代码的整洁。clean code不是只对后台代码才有效的准则。
Html&CSS 今日心得的更多相关文章
- CSS使用心得小结
CSS心得 最近对CSS的使用有一些小心得,在此写下来给大家分享分享 .最后附上选择器的实例代码. ------DanlV CSS是什么 层叠样式表(英文全称:Cascading Style Shee ...
- CSS学习心得2
CSS样式 链接 a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 当为链接的不同 ...
- CSS学习心得
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外 ...
- CSS应用心得
单纯Html配合CSS网页 下面用程序来实际总结一下 首先,在写程序的应该具有一个良好的编程习惯. 第一:排版,拥有一个良好的排版,有助于我们能够快速的理解以及阅读程序: 第二:注释,就如以下程序,作 ...
- 分享一下学习css,js心得
简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端 ...
- css 开发心得
1.一个 div内的行内 元素 如何水平对齐 将内部的元素设为 float ,然后设置 margin-top 对齐,然后 用伪类清楚浮动的影响
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- ssc项目Python爬虫心得
###今日心得 ####time.datetime 1.字符串格式到标准化格式:time.strptime(str, "%Y%m%d") 2.今天的标准化格式:today = da ...
- <c ss高效开发实战>看完了,Bootstrap学习是关键
Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...
随机推荐
- C#常用格式输出
ylbtech- .NET-Basic:C#常用格式输出 C#常用格式输出 1.A,相关概念返回顶部 using System; namespace Test { class Formating { ...
- Educational Codeforces Round 15 套题
这套题最后一题不会,然后先放一下,最后一题应该是大数据结构题 A:求连续最长严格递增的的串,O(n)简单dp #include <cstdio> #include <cstdlib& ...
- poj 1651 http://poj.org/problem?id=1651
http://poj.org/problem?id=1651Multiplication Puzzle Time Limit: 1000MS Memory Limit: 65536K To ...
- WinForm使用webbrowser爬取数据,中文乱码问题
使用winform中的webbrowser抓取某个网站的数据时,遇到中文乱码的问题: 当时使用的获取网页内容的代码为: webBrowser1.DocumentText.ToString(); 不管我 ...
- 祭奠我的csdn博客
本人在csdn的博客莫名其妙地被封了(http://blog.csdn.net/fty8788),非常郁闷. 回忆起,可能是我近半年由于工作事情忙很少写博客了,被某213盗用发了不恰当的东东.我也查不 ...
- DX11&C++
- AWR
Automatic Workload Repository是10g引入的一个重要组件.在里面存贮着近期一段时间内,默认是7天,数据库活动状态的详细信息 手动得到一份AWR报告: SQL> exe ...
- MapReduce TopK统计加排序
Hadoop技术内幕中指出Top K算法有两步,一是统计词频,二是找出词频最高的前K个词.在网上找了很多MapReduce的Top K案例,这些案例都只有排序功能,所以自己写了个案例. 这个案例分两个 ...
- RStudio Keyboard Shortcuts
Console Description Windows & Linux Mac Move cursor to Console Ctrl+2 Ctrl+2 Clear console Ctrl+ ...
- 微服务架构下分布式Session管理
转载本文需注明出处:EAII企业架构创新研究院(微信号:eaworld),违者必究.如需加入微信群参与微课堂.架构设计与讨论直播请直接回复此公众号:“加群 姓名 公司 职位 微信号”. 一.应用架构变 ...