博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 常用属性、布局
阅读量:7206 次
发布时间:2019-06-29

本文共 1230 字,大约阅读时间需要 4 分钟。

文本

color //颜色名表示。如white、gold等。还可以rgb、rgba。a表示透明程度,[0,1]=[完全透明,不透明]。我喜欢rgb(255,0,128)。
text-decoration  //文本修饰,underline为下划线,line-through为删除线
text-align  //对齐方式,居中就是center。

字体

font-family //字体系列。我喜欢 Verdana。
font-size //大小。
font-style //italic 表示斜体
font-weight  //粗细。可以设置为bold。

背景

background-attachment,背景图片是否固定。scroll-滚动,fixed-固定。
background-color,背景色。
background-image,背景图片。background-image:url(abc.gif);
background-position,背景图片位置。xx px、xx%都可以。center、bottom也可以。

background-repeat,是否平铺。repeat、no-repeat、repeat-x、repeat-y。

使用上面的方法缺点是不能够自适应窗口,不能拉伸。推荐另一种实现

边框

border-style // solid是固体的意思,表示实线;oueset,像一个凸起的框
border-width //边框宽度。
边框默认是上下左右,所以可以使用border-top/bottom/left/right-style单独设定

外边距

margin: 1em;
外边距默认是上下左右,所以可以使用margin-top/bottom/left/right 单独设定

定位

position 属性值的含义:
static  //元素框占有自己的空间。
relative   //元素框偏移某个距离。不占有自己的空间。
absolute   //不占有自己的空间。

fixed //元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

z-index  //设置一个定位元素在z轴的位置,z轴为垂直于显示器的坐标轴。值越小表示离用户更远,可以为负数。

透明度

opacity:不透明度。0表示完全透明,1表示完全不透明。

媒体查询

@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。也就是所说的响应式布局。

常用布局实现

居中
margin-left:auto;margin-right:auto。
图片居中:<img>标签的父标签中设置 style="text-align:center" 属性即可。
两元素分别左右对齐
同一div块中的两个元素,一个左对齐,一个右对齐,可以这样实现:float:left;float:right。

转载地址:http://gdvum.baihongyu.com/

你可能感兴趣的文章
struts基础
查看>>
块状链表 codevs 2333弹飞绵羊
查看>>
(九)jsMath
查看>>
CE_现金模组基本概念(概念)
查看>>
饭后一题
查看>>
Zynq-7000 FreeRTOS(一)系统移植配置
查看>>
[笔记][朝花夕拾][Multisim基础电路范例].第一章 RLC电路,第七、八节 米勒定理...
查看>>
免费论文查重
查看>>
【GPRS】GSM和GPRS模块的应用
查看>>
第一章 Docker简介和基本概念
查看>>
java代码-----实现打印三角形
查看>>
python(4) 小程序-异步加载
查看>>
20190327(练手感)
查看>>
modelform动态显示select标签的对象范围
查看>>
Android ---------- 富文本构建
查看>>
leetcode:Count Primes
查看>>
[转] babel的使用
查看>>
CentOS7.0安装与配置Tomcat-7
查看>>
C# SQL数据访问帮助类
查看>>
.net面试(汇总)
查看>>