CSS属性书写顺序,css的布局流程

简介: CSS属性书写顺序,css的布局流程

CSS属性书写顺序



CSS属性书写顺序

1.布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式)
2.自身属性:width/height/margin/padding/border/background
3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(CSS3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
eg:
.eg{
    display:block;
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:0 10px;
    padding:20px 0;
    font-family:Arial;
    color:#333;
    background:rgba(0,0,0,.5);
    border-radius:10px;
}

布局流程

1.必须确定页面的版心(可视区),我们测量可知
2.分析页面中的行模块,以及每个行模块中的列模块,其实页面布局就是一行行罗列而成
3.制作html结构,我们还是遵循,现有结构后有样式的原则,结构永远最重要
4.然后开始运用盒子模型的原理,通过div+css布局来控制网页的各个模块
目录
相关文章
|
28天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
25天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
22 1
|
1月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
21天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
54 4
|
25天前
|
前端开发
css简写属性
css简写属性
28 0
|
1月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
16 0
|
1月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
35 0
|
1月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
48 0