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布局来控制网页的各个模块
目录
相关文章
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
3天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
6 1
|
12天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
12天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
12天前
|
前端开发 UED 容器
【专栏:CSS进阶篇】CSS Grid布局:构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统,适用于复杂页面结构,如页眉、主体和侧边栏。通过定义网格线和单元格,能轻松创建行和列。基本语法包括设置容器为grid容器,定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中,CSS Grid能有效提升开发效率和用户体验,尤其在响应式设计和复杂布局场景下。
|
12天前
|
前端开发 开发者 容器
【专栏:CSS进阶篇】CSS Flexbox布局:实现灵活的响应式设计
【4月更文挑战第30天】CSS Flexbox是现代网页设计中创建响应式布局的关键工具,它提供了一种一维布局模型,使元素能灵活适应各种屏幕尺寸。通过设置容器的`display`属性为`flex`,开发者可以利用主轴和交叉轴调整元素排列和对齐方式。核心概念包括弹性项、伸缩性、空间分配和对齐。通过实例,如导航栏、卡片布局、图片画廊和响应式表单,展示了Flexbox在实现响应式设计中的应用。尽管需要注意浏览器兼容性,但掌握Flexbox能帮助开发者构建出功能强大且适应性强的界面。
|
12天前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
|
12天前
|
前端开发
【专栏:CSS基础篇】CSS盒模型:理解网页布局的核心
【4月更文挑战第30天】CSS盒模型是网页布局关键,将HTML元素视为内容、内边距、边框和外边距的矩形。内容决定元素大小,padding增加内部空间,border设置线条样式,margin控制元素间距。理解盒模型及其计算方式(内容+padding+border+margin)有助于布局设计。通过调整相关属性,实现浮动、Flexbox或定位布局,创建响应式网页。
|
13天前
|
前端开发
CSS弹性布局justify-content的用法
CSS弹性布局justify-content的用法
|
13天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色