css属性书写顺序

布局定位属性
display / position / float / clear / visibility / overflow
（建议 display 第一个写，毕竟关系到模式）

自身属性
width / height / margin / padding / border / background

文本属性
color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他属性（CSS3）
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;
}

布局流程

（1）必须确定页面的版心（可视区），我们测量可得知
（2）分析页面中的行模块，以及每个行模块中的列模块；其实页面布局，就是一行行罗列而成
（3）制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
（4）然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

chrome调试工具

F12 或者 ctrl+shift+I

Chrome提示的常见布局错误

前端笔记（7）css属性书写顺序，布局流程，chrome调试工具相关推荐

web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
CSS属性书写顺序规范
建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式) ...
CSS权重，属性书写顺序，布局技巧和网页布局总结，盒子模型排列位置---CSS
文章目录一.CSS权重二.CSS属性书写顺序一.布局总结二.常见布局技巧一.CSS权重注意:类选择器.属性选择器.伪类选择器,权重为 10. 参考看 CSS三大特性,在CSS的特性优先级中 ...
Henry前端笔记之 CSS相关
Henry前端笔记之 CSS相关深入理解vertical-align和line-height的基友关系深入理解vertical-align和line-height的基友关系详见:基友理解 px. ...
前端学习笔记之CSS属性设置
CSS属性设置阅读目录一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一字体属性 1.font-weight:文字粗细取值描述 normal 默认值,标准粗细 ...
自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
CSS样式书写顺序与浏览器内部加载原理
CSS加载存在先后顺序,不严谨的书写顺序将会导致界面出现偏差.并且正确的书写顺序也可以提高代码的可读性. 正确的排序方式如下: (1)定位属性:position display float left ...
前端技巧|利用CSS属性修改图片颜色
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...

前端笔记（7）css属性书写顺序，布局流程，chrome调试工具

css样式表/层叠样式表（5）

css属性书写顺序

布局流程

chrome调试工具

前端笔记（7）css属性书写顺序，布局流程，chrome调试工具相关推荐

最新文章

热门文章